事件传播机制、阻止传播、取消默认事件、事件代理

一、事件

A、定义

某个行为或者触发

B、表现形式

(1) 当用户点击鼠标时

(2) 当网页已加载时

(3) 当图像已加载时

(4) 当鼠标移动到元素上时

(5) 当用户触发按键时

二、事件流

(1) 事件冒泡

事件冒泡.jpg

事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的元素

(2) 事件捕获

事件捕获.jpg

不太具体的节点更早接受事件，而最具体的元素最后接受事件，和事件冒泡相反

(3) DOM事件流

DOM事件流.jpg

DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，时间冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接受事件，最后是冒泡阶段

注：Opera、Firefox、Sarfari都支持DOM事件流，IE不支持事件流，只支持时间冒泡

三、阻止传播

stopPropagation()

A、定义和用法

不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

B、说明

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

C、语法

event.stopPropagation()

注意： IE浏览器的后面几个版本都支持了W3C标准，之前有个别版本不支持
event在IE不支持的版本中，是无法接收到事件的，并且没有stopProgapation方法
火狐、google及最新的IE版本的结束事件都支持stopPropagation()方法来结束默认行为
老版本的IE如想结束默认行为，须要使用window.event.cancelBubble = true;方法

四、取消默认事件

A、事件默认行为定义

(1) a链接默认跳转

(2) type =submit默认提交表单

(3) 其他浏览器默认行为...

B、preventDefault定义

阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）

preventDefault()

示例: 阻止a链接进行跳转，并输出a链接

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
   <a href="http://baidu.com">百度</a>
<script type="text/javascript">
   document.querySelector('a').onclick = function(e) {
     e.preventDefault()
     console.log(this.href)
   }
</script>
</html>

五、事件代理

A、定义

事件代理就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数统一处理多个子元素的事件，这种方法叫做事件的代理。

B、案例

试想一下:假设公司里每次收快递的时候员工都跑到公司门口去收自己的快递,如果同时多个人也同样去收自己快递这样公司就秩序混轮了!如果委托给前台妹子去收快递然后由妹子去派发快递这个过程就叫委托事件!(备注:冒泡思想也有点相仿只不过是由父节点往子节点传递信息)。

var ul = document.querySelector('ul');
ul.addEventListener('click', function(event){
    if(event.target.tagName.toLowerCase() === 'li'){
        //...
    }
})

上面代码的click事件的监听函数定义在<ul>节点，但是实际上，它处理的是子节点<li>的click事件。

C、优点、缺点

(1) 优点

定义一个监听函数，就能处理多个子节点的事件。比如ul上代理所有li的click事件就很不错。
可以实现当新增子对象时，无需再对其进行事件绑定，监听函数依然有效，对于动态内容部分尤为合适

(2) 缺点

事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

事件传播机制、阻止传播、取消默认事件、事件代理