javascript javascript附加事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10335343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript attaching events
提问by user983124
I've seen that you can attach events like this
我已经看到你可以附加这样的事件
<button type="button" id="myButton" onclick="myFunction()">
can you do the same without the "onclick=", like:
你能在没有 的情况下做同样的事情吗"onclick="，比如：
document.getElementById('myButton'). //and here attach the event on click to myFunction
I'm trying to keep JavaScript and HTML separate.
我试图将 JavaScript 和 HTML 分开。
回答by David says reinstate Monica
It's similar to the onclickapproach, and in fact uses the same event-handler, but is removed from the HTML:
它类似于该onclick方法，实际上使用相同的事件处理程序，但已从 HTML 中删除：
document.getElementById('myButton').onclick = function(){
// do stuff
myFunction();
}
If you don't have an idon the element you could also use:
如果id元素上没有，也可以使用：
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();
};
}
}
An alternative approach, using Array.prototype.forEach(), with an array of elements created using Array.prototype.slice()and document.querySelectorAll():
另一种方法， using Array.prototype.forEach()，使用Array.prototype.slice()和创建的元素数组document.querySelectorAll()：
[].forEach.call(document.querySelector('input[type="text"]', yourFunctionName);
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.
这将为yourFunctionName()每个<input />元素执行函数， of type="text"，document.querySelectorAll()通过将该<input />元素作为传递给函数而返回this。
You could also use addEventListener()in this case:
addEventListener()在这种情况下，您还可以使用：
document.getElementById('myButton').addEventListener('click', myFunction, false);
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:
并且在这种情况下，使用document.querySelector()（而不是document.querySelectorAll()），它使用 CSS 符号返回与传入选择器匹配的第一个元素：
// gets the element with an 'id' of 'myButton', binding the 'click' event-handler:
document.querySelector('#myButton').addEventListener('click', myFunction, false);
Or:
或者：
// gets the first of the <input> elements, binding the 'click' event-handler:
document.querySelector('input').addEventListener('click', myFunction, false);
References:
参考：
回答by Anthony Grist
Yes, you can (and should!).
是的，你可以（而且应该！）。
document.getElementById('myButton').onclick = myFunction;
回答by elboletaire
Sure, you only need to select your item and call it's correspondant callback function. p.e:
当然，您只需要选择您的项目并调用其对应的回调函数即可。体育：
document.getElementById('myButton').onclick = function(e) {
// your code here
}
Or, without the inline function:
或者，没有内联函数：
document.getElementById('myButton').onclick = myObject.myMethod;
回答by Oyeme
Something like this:
像这样的东西：
document.getElementById('myButton').onclick = function() {location.href='http://stackoverflow.com';return false;}
回答by Jags
document.getElementById('myButton').onclick = function () {
console.log('Inline event attach');
};
document.getElementById('myButton').addEventListener('click', function () {
console.log('Using native addEventListener');
}, false);
回答by squarephoenix
document.getElementById('myButton').onclick = function() { myFunction(); }
