代码改变世界

javascript--浅谈addEventListener和attachEvent

2016-02-18 12:22  sunshine1987  阅读(158)  评论(0)    收藏  举报

一、addEventListener、attachEvent可以给某个对象绑定多次事件

举个栗子

html代码

<div id="box">追梦子</div>

用on的代码

复制代码var box = document.getElementById("box");
box.onclick = function(){
  console.log("我是box1");
}
box.onclick = function(){
  console.log("我是box2");
}
运行结果：“我是box2”

第二个onclick把第一个onclick给覆盖了，如果我们需要执行多个相同的事件，很明显用on完成不了我们想要的……

用addEventListener、attachEnent的代码：

复制代码var box = document.getElementById("box");
----------------addEventListener--------------------------------------------
box.addEventListener("click",function(){
   console.log("我是box1");
})
box.addEventListener("click",function(){
   console.log("我是box2");
})
运行结果：我是box1
　　　　  我是box2

--------------attachEvent--------------------------------------------------
box.attachEvent("onclick",function(){
   console.log("我是box1");
})
box.attachEvent("onclick",function(){
   console.log("我是box2");
})
运行结果：我是box1
　　　　  我是box2

二、addEventListener、attachEvent的区别

addEventListenert：（用在非IE环境下）

element.addEventListener(type,listener,useCapture);

参数参数说明
element 要绑定事件的对象，及HTML节点。
type 事件名称，注意去掉事件前边的“on”，比如“onclick”要写成“click”，“onmouseover”要写成“mouseover”。
listener 要绑定的事件监听函数，注意只写函数名，不要带括号。
userCapture 事件监听方式，只能是true和false：true，采用capture(捕获)模式；false，采用bubbling(冒泡)模式。如无特殊要求，一般是false。默认是false

这里有必要说一下捕获模式和冒泡模式的区别：

举个栗子：

<body>
　　<div id="box">
　　　　<div id="child"></div>
　　</div>
</body>

单击child元素，它是怎么样执行的？（执行顺序）

复制代码
1 box.addEventListener("click",function(){
2     console.log("box");
3 })
4 
5 child.addEventListener("click",function(){
6     console.log("child");
7 })
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。

如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。

复制代码
1 box.addEventListener("click",function(){
2     console.log("box");
3 },true)
4 
5 child.addEventListener("click",function(){
6     console.log("child");
7 },true)
　　执行的结果：
　　　　　　　　box
　　　　　　　　child

事件冒泡执行过程：

　　　　　　　　从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box

事件捕获执行过程：

　　　　　　　　从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child

attachEvent:(IE环境)
element.attachEvent(type,listener);

参数参数说明
element 要绑定事件的对象，及HTML节点。
type 事件名称，注意加上事件前边的“on”，比如“onclick”和“onmouseover”，这是与addEventListener的区别。
listener 要绑定的事件监听函数，注意只写函数名，不要带括号。

浏览器兼容处理：

function regEvent(ele, event_name, fun)
{
    if (window.attachEvent) 
        ele.attachEvent(event_name, fun);  //IE浏览器
    else
    {
        event_name = event_name.replace(/^on/, “”);   //如果on开头，删除on，如onclick->click
        ele.addEventListener(event_name, fun, false);  //非IE浏览器
    }
}