HTML DOM addEventListener()
addEventListener() 方法用于向指定元素添加事件的方法 我个人理解为绑定事件。与之想对应的自然是解绑removeEventListener()
注意: Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件
element.addEventListener(event, function, useCapture)
event | 指定事件名 |
function | 必须。指定要事件触发时执行的函数。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 |
例子1 用户点击后使用 addEventListener() 方法来执行函数
<button id="myBtn">点我</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
例子2 该实例使用 addEventListener() 方法在同一个按钮添加两个点击事件。
<button id="myBtn">点我</button>
<script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!") } function someOtherFunction() { alert ("该函数也将被执行!") }
例子3该实例使用 addEventListener() 方法在按钮中添加多个事件。
<button id="myBtn">点我</button>
<p id="demo"></p>
<script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "鼠标经过!<br>" } function mySecondFunction() { document.getElementById("demo").innerHTML += "点击!<br>" } function myThirdFunction() { document.getElementById("demo").innerHTML += "鼠标离开!<br>" }
例子 3该实例演示了在使用 addEventListener() 方法时如何传递参数。
点击按钮执行一个计算。
<button id="myBtn">点我</button>
<p id="demo"></p>
<script> var p1 = 5; var p2 = 7; document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; } </script>
该实例演示了在添加事件监听时冒泡与捕获阶段的不同。
<div id="myDiv">
<p id="myP">点击该段落, 我是冒泡</p>
</div><br>
<div id="myDiv2">
<p id="myP2">点击该段落, 我是捕获</p>
</div>
<script> document.getElementById("myP").addEventListener("click", function() { alert("你点击了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert("你点击了 DIV 元素!"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你点击了 P 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你点击了 DIV 元素!"); }, true); </script>
如果多个均为 true,则外层的触发先于内层;
如果多个均为 false,则内层的触发先于外层。
游览器兼容
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); }
例子来源:http://www.runoob.com/jsref/met-element-addeventlistener.html
下面是我实际开发中接触到的例子
我们公司的网站做qq咨询的功能 每次打开网站就会onload到qq质询内容的js加载很慢
原来的写法
<script charset="utf-8" src="http://wpa.b.qq.com/cgi/wpa.php"></script>
每次打开网站都会先加载qq质询的js 而且很慢
优化后的代码如下
useCapture 为true也可以理解成就是先执行为false则是后执行