//为
该实例演示了在用户点击 <button> 元素时如何执行函数:
document.getElementById("myBtn").addEventListener("click", myFunction);function myFunction() { document.getElementById("demo").innerHTML = "Hello World";}
您可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件。
该实例演示了如何在<button>元素中添加两个点击事件：
document.getElementById("myBtn").addEventListener("click", myFunction);document.getElementById("myBtn").addEventListener("click", someOtherFunction);
您可以在同一个元素中添加不同类型的事件。
该实例演示了如何在同一个 <button> 元素中添加多个事件：
document.getElementById("myBtn").addEventListener("mouseover", myFunction);document.getElementById("myBtn").addEventListener("click", someOtherFunction);document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); 当传递参数值时，使用"匿名函数"调用带参数的函数：
document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2);}); 修改 <button> 元素的背景：
document.getElementById("myBtn").addEventListener("click", function(){ this.style.backgroundColor = "red";}); 使用可选参数 useCapture 来演示冒泡和捕获阶段的不同:
document.getElementById("myDiv").addEventListener("click", myFunction, true); 使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
// 添加事件句柄 document.getElementById("myDIV").addEventListener("mousemove", myFunction);// 移除事件句柄 document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
以下实例演示了跨浏览器的解决方法：
var x = document.getElementById("myBtn");if (x.addEventListener) { //所有主流浏览器，除了 IE 8 及更早 IE版本 x.addEventListener("click", myFunction);} else if (x.attachEvent) { // IE 8 及更早 IE 版本 x.attachEvent("onclick", myFunction);}