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() 方法来执行函数

 

Html代码 

1. <button id="myBtn">点我</button>  
2. <p id="demo">  

 

 

Html代码 

1. <script>  
2. document.getElementById("myBtn").addEventListener("click", myFunction);  
3. function myFunction() {  
4.     document.getElementById("demo").innerHTML = "Hello World";  
5. }  

 

</script>

例子2 该实例使用 addEventListener() 方法在同一个按钮添加两个点击事件。

Html代码 

1. <button id="myBtn">点我</button>  

 

Js代码 

1. <script>  
2. var x = document.getElementById("myBtn");  
3. x.addEventListener("click", myFunction);  
4. x.addEventListener("click", someOtherFunction);  
5. function myFunction() {  
6.     alert ("Hello World!")  
7. }  
8. function someOtherFunction() {  
9.     alert ("该函数也将被执行!")  
10. }  

 

 

例子3该实例使用 addEventListener() 方法在按钮中添加多个事件。

Html代码 

1. <button id="myBtn">点我</button>  
2. <p id="demo"></p>  

 

Js代码 

1. <script>  
2. var x = document.getElementById("myBtn");  
3. x.addEventListener("mouseover", myFunction);  
4. x.addEventListener("click", mySecondFunction);  
5. x.addEventListener("mouseout", myThirdFunction);  
6. function myFunction() {  
7.     document.getElementById("demo").innerHTML += "鼠标经过!<br>"  
8. }  
9. function mySecondFunction() {  
10.     document.getElementById("demo").innerHTML += "点击!<br>"  
11. }  
12. function myThirdFunction() {  
13.     document.getElementById("demo").innerHTML += "鼠标离开!<br>"  
14. }  
15.    

 

例子 3该实例演示了在使用 addEventListener() 方法时如何传递参数。

 

点击按钮执行一个计算。

 

Html代码 

1. <button id="myBtn">点我</button>  
2.    
3. <p id="demo"></p>  

  

Js代码 

1. <script>  
2. var p1 = 5;  
3. var p2 = 7;  
4.    
5. document.getElementById("myBtn").addEventListener("click", function() {  
6. myFunction(p1, p2);  
7. });  
8.    
9. function myFunction(a, b) {  
10. var result = a * b;  
11. document.getElementById("demo").innerHTML = result;  
12. }  
13. </script>  

 

该实例演示了在添加事件监听时冒泡与捕获阶段的不同。

Html代码 

1. <div id="myDiv">  
2.     <p id="myP">点击该段落， 我是冒泡</p>  
3. </div><br>  
4. <div id="myDiv2">  
5.     <p id="myP2">点击该段落， 我是捕获</p>  
6. </div>  

 

Js代码 

1. <script>  
2. document.getElementById("myP").addEventListener("click", function() {  
3.     alert("你点击了 P 元素!");  
4. }, false);  
5. document.getElementById("myDiv").addEventListener("click", function() {  
6.     alert("你点击了 DIV 元素!");  
7. }, false);  
8. document.getElementById("myP2").addEventListener("click", function() {  
9.     alert("你点击了 P 元素!");  
10. }, true);  
11. document.getElementById("myDiv2").addEventListener("click", function() {  
12.     alert("你点击了 DIV 元素!");  
13. }, true);  
14. </script>  

 如果多个均为 true，则外层的触发先于内层；

如果多个均为 false，则内层的触发先于外层。

 游览器兼容

Js代码 

1. var x = document.getElementById("myBtn");  
2. if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本  
3.     x.addEventListener("click", myFunction);  
4. } else if (x.attachEvent) {                  // IE 8 及更早 IE 版本  
5.     x.attachEvent("onclick", myFunction);  
6. }  

 例子来源：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则是后执行