javascript附加事件

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

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

我试图将JavaScript和HTML分开。

类似这样的内容：

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

---

它类似于

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

这将对

document.queryselectoral（）

返回的

type=“text”

中的每个

元素执行

yourFunctionName（）

函数，并将该

元素作为

This

传递到函数中

在这种情况下，还可以使用

addEventListener（）

：

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

同样在这种情况下，使用

document.querySelector（）

（与

document.queryselectoral（）

）返回与传入选择器匹配的第一个元素，使用CSS表示法：

// gets the element with an 'id' of 'myButton', binding the 'click' event-handler:
document.querySelector('#myButton').addEventListener('click', myFunction, false);

或：

//获取绑定“click”事件处理程序的第一个元素：
document.querySelector（'input'）。addEventListener（'click'，myFunction，false）；

参考资料：

是的，你可以（也应该！）

---

当然，您只需要选择项目并调用其相应的回调函数。p、 e:

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

或者，如果没有内联函数：

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

---

您正在单击

onclick

给出

myFunction（）

的返回值，除非

myFunction（）

返回一个函数，否则这是不正确的。您实际上可以忽略

（）

参见Anthony Grist的回答谢谢@NiftyDude和Anthony Grist，学习了一些新的+1来避免曾经流行的内联函数-它们并不是经常声称的万能药。

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

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

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

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

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

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