js 事件

目录

一.绑定事件处理函数

1.ele.on xxx = function(event){}

2.dom.addEventListener(‘事件类型‘，处理函数，false)；

3.dom.attachEvent('on'+ 事件类型 ， 处理函数)；

二.事件处理模型

1.事件冒泡

2.事件捕获

3.取消冒泡

 3.1 event.stopPropagation();  

---

一.绑定事件处理函数

1.ele.on xxx = function(event){}

可直接看下面例子，就是一个触发事件

这个例子就是在 div 绑定了一个事件处理函数，也是一种绑定函数的方法。兼容性很好，但是会产生属性覆盖，即一个对象的一个事件只能绑定一个处理函数，如下，只会打印 b

        div.onclick=function(){
            console.log('a');
        }
        div.onclick = function(){
            console.log('b');
        }

 

而且这种绑定函数方式和直接写在 html里面是相同的（句柄的方式），如下代码：

 

2.dom.addEventListener(‘事件类型‘，处理函数，false)；

• IE9以下不兼容，可以为一个事件绑定多个处理程序（W3C标准）
• 绑定同一个处理函数多次，不能执行多次
• 第三个参数指定事件是否在捕获或冒泡阶段执行

代码如下：

 

以下代码可打印2个‘a’

 

以下代码只执行一次

 

3.dom.attachEvent('on'+ 事件类型 ， 处理函数)；

• IE独有，一个事件同样可以绑定多个处理程序
• 绑定同一个处理函数多次，可以执行多次
• 示例：dom.attachEvent('onClick',function(){});

 

二.事件处理模型

1.事件冒泡

• 结构上（非视觉上）嵌套的元素，会存在事件冒泡功能，也就是说，同一事件，子元素会向父元素冒泡（自底向上）

如下代码：

效果如下：

点击红色，打印 wrapper

点击绿色，打印 content，wrapper

点击黄色，打印 box，content，wrapper

这里冒泡的意思不是视觉上，而是代码层面，如下，点击到box时，会逐渐往外冒泡到父元素；

把style该成如下：

        .wrapper{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .content{
            margin: 300px;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box{
            margin: 200px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

点击黄色图形区时，仍会打印：box，content，wrapper；这也证明这是非视觉上的冒泡

 

2.事件捕获

结构上存在嵌套的元素，会存在事件捕获，即同一事件，自window捕获至子元素（事件源元素）（自顶向下）
触发条件：ele.addEventListener(type, fn, true)

注：一个事件模型只能拥有一种事件处理模型，即要么冒泡，要么捕获（若绑两个，先捕获，后冒泡），事件捕获只在Google Chrome上好使；

把上面的代码中 false 改成 ture 即改成事件捕获；

        wrapper.addEventListener('click',function(){console.log('wrapper')},true);
        content.addEventListener('click',function(){console.log('content')},true);
        box.addEventListener('click',function(){console.log('box')},true);

点击黄色区域，log打印 wrapper，content，box；跟冒泡相反；

 

3.取消冒泡

 3.1 event.stopPropagation();  

注：IE9以下不支持

上面代码执行后，点击黄色区域，log打印 content，box；

若加上取消冒泡，则log不打印任何东西；