javascript - javascript附加事件

Question

我已经看到您可以附加这样的事件

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

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

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

我试图将 JavaScript 和 HTML 分开。

Answer 1

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

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

如果您没有idon 元素，您也可以使用：

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();
        };
    }
}

另一种方法是 using ，其中包含使用andArray.prototype.forEach()创建的元素数组：Array.prototype.slice()document.querySelectorAll()

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

yourFunctionName()这将为每个<input />元素执行函数 of type="text"，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);

参考：

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

Answer 2

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

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

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

Answer 4

像这样的东西：

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

Answer 5

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

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

Answer 6

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