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

如果你还没有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); 

这将那个<input />元件穿入执行yourFunctionName()函数为每个<input />元件，的type="text"，返回由document.querySelectorAll()功能为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 = function() {location.href='http://stackoverflow.com';return false;} 

Answer 3

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

Answer 4

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

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

Answer 5

当然，您只需要选择您的项目并将其称为相应的回调函数。页。E：

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

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

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

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

Answer 6

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

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