JavaScript 事件绑定

Question

我看到过可以这样附加事件

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

你能不使用 "onclick=" 来执行同样的操作吗，例如：

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

我正在努力将JavaScript和HTML分开。

- user983124

Answer 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);

这将针对每个由document.querySelectorAll()返回的type="text"的<input />元素，执行yourFunctionName()函数，并将该<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);

参考文献：

• Array.prototype.forEach() 方法。
• Array.prototype.slice() 方法。
• document.querySelector() 方法。
• document.querySelectorAll() 方法。
• EventTarget.addEventListener() 方法。

- David Thomas

Answer 2

是的，您可以（而且应该！）这样做。

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

- Anthony Grist

Answer 3

当然，您只需要选择您的物品并调用相应的回调函数。例如：

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

或者，不使用内联函数：

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

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

- elboletaire

---

避免使用普遍存在的内联函数——它们并不是经常声称的万能药。 - Lee Goddard

Answer 4

像这样的东西：

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

- Oyeme

Answer 5

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

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

- Jags

Answer 6

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

- squarephoenix

---

如果myFunction()不返回一个函数，你正在将onclick赋予myFunction()的返回值，这是不正确的。 - Andreas Wong

你实际上可以省略 ()，参见 Anthony Grist 的回答。 - Andreas Wong

谢谢@NiftyDude和Anthony Grist，学到了新东西。 - squarephoenix