javascript附加事件 [英] javascript attaching events
问题描述
我看到你可以附加这样的事件
I've seen that you can attach events like this
<button type="button" id="myButton" onclick="myFunction()">
如果没有onclick =
,如:
document.getElementById('myButton'). //and here attach the event on click to myFunction
我试图保持JavaScript和HTML分开
I'm trying to keep JavaScript and HTML separate.
推荐答案
它类似于 onclick
方法,实际上使用相同的事件处理程序,但是从HTML中删除:
It's similar to the onclick
approach, and in fact uses the same event-handler, but is removed from the HTML:
document.getElementById('myButton').onclick = function(){
// do stuff
myFunction();
}
如果您没有 id
你可以使用的元素:
If you don't have an id
on the element you could also use:
var inputs = document.getElementsByTagName('input');
for (var i=0, len=inputs.length; i<len; i++){
if (inputs[i].type == 'text'){
// assuming you want to affect text-inputs in this case
inputs[i].onclick = function(){
// do stuff. In here 'this' refers to inputs[i] element
myFunction();
};
}
}
另一种方法是使用 Array.prototype.forEach()
,使用 Array.prototype.slice()
和文档创建的元素数组.querySelectorAll()
:
An alternative approach, using Array.prototype.forEach()
, with an array of elements created using Array.prototype.slice()
and document.querySelectorAll()
:
[].forEach.call(document.querySelector('input[type="text"]', yourFunctionName);
这将执行 $ code> type =text的每个
$ c>,由< input />
元素的yourFunctionName() document.querySelectorAll()
返回,将< input />
元素传递到函数中这个
。
This will execute the yourFunctionName()
function for each <input />
element, of type="text"
, returned by document.querySelectorAll()
passing that <input />
element into the function as this
.
你也可以使用 addEventListener()
在这种情况下:
You could also use addEventListener()
in this case:
document.getElementById('myButton').addEventListener('click', myFunction, false);
在这种情况下,使用 document.querySelector()
(而不是 document.querySelectorAll()
),它返回与传入选择器匹配的第一个元素,使用CSS符号:
And also in this situation, using document.querySelector()
(as opposed to document.querySelectorAll()
), which returns the first element that matches the passed-in selector, using CSS notation:
// gets the element with an 'id' of 'myButton', binding the 'click' event-handler:
document.querySelector('#myButton').addEventListener('click', myFunction, false);
或:
// gets the first of the <input> elements, binding the 'click' event-handler:
document.querySelector('input').addEventListener('click', myFunction, false);
参考文献:
-
Array.prototype。 forEach()
。 -
Array.prototype.slice()
。 - a href =https://developer.mozilla.org/en/docs/Web/API/Document.querySelector =nofollow>
document.querySelector()
。 -
document.querySelectorAll()
。 -
EventTarget.addEventListener()
。
Array.prototype.forEach()
.Array.prototype.slice()
.document.querySelector()
.document.querySelectorAll()
.EventTarget.addEventListener()
.
这篇关于javascript附加事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!