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则是后执行