javascript附加事件答案

【问题标题】：javascript attaching eventsjavascript附加事件
【发布时间】：2012-04-26 14:18:30
【问题描述】：

我看到你可以附加这样的事件

<button type="button" id="myButton" onclick="myFunction()">

如果没有"onclick="，你能做同样的事情吗，比如：

document.getElementById('myButton'). //and here attach the event on click to myFunction

我试图将 JavaScript 和 HTML 分开。

【问题讨论】：

标签： javascript events handler

【解决方案1】：

它类似于onclick 方法，实际上使用相同的事件处理程序，但从 HTML 中删除：

document.getElementById('myButton').onclick = function(){
    // do stuff
    myFunction();
}

如果元素上没有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();
        };
    }
}

另一种方法，使用Array.prototype.forEach()，使用Array.prototype.slice() 和document.querySelectorAll() 创建一个元素数组：

[].forEach.call(document.querySelector('input[type="text"]', yourFunctionName);

这将为type="text" 中的每个<input /> 元素执行yourFunctionName() 函数，由document.querySelectorAll() 返回，将该<input /> 元素作为this 传递给函数。

在这种情况下，您也可以使用addEventListener()：

document.getElementById('myButton').addEventListener('click', myFunction, false);

同样在这种情况下，使用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);

或者：

// gets the first of the <input> elements, binding the 'click' event-handler:
document.querySelector('input').addEventListener('click', myFunction, false);

参考资料：

【讨论】：

【解决方案2】：

是的，你可以（而且应该！）。

document.getElementById('myButton').onclick = myFunction;

【讨论】：

【解决方案3】：

当然，您只需要选择您的项目并调用它对应的回调函数即可。 p.e:

document.getElementById('myButton').onclick = function(e) {
    // your code here
}

或者，没有内联函数：

document.getElementById('myButton').onclick = myObject.myMethod;

https://developer.mozilla.org/en/DOM/element.onclick

【讨论】：

+1 用于避免流行的内联函数——它们确实不是人们经常声称的灵丹妙药。

【解决方案4】：

类似这样的：

  document.getElementById('myButton').onclick = function() {location.href='http://stackoverflow.com';return false;}

【讨论】：

【解决方案5】：

document.getElementById('myButton').onclick = function () {
        console.log('Inline event attach');
    };

    document.getElementById('myButton').addEventListener('click', function () {
        console.log('Using native addEventListener');
    }, false);

【讨论】：

【解决方案6】：

document.getElementById('myButton').onclick = function() { myFunction(); }

【讨论】：

你给onclick的返回值是myFunction()，除非myFunction()返回一个函数，这是不正确的
您实际上可以省略 () 参见 Anthony Grist 的回答
谢谢@NiftyDude 和 Anthony Grist，学到了一些新东西