发现在写事情的时分，有许多零星的知识点傻傻分不清除，由此记录一下学习进程

事情（Event）

事情（Event）是由DOM元素产生的资源，它能够由 JavaScript 代码操作，这样说很笼统，其实能够举一些常见的事情例子：

  • 当用户单击鼠标时
  • 网页加载后
  • 加载图像后
  • 当鼠标移到元素上时
  • 更改输入字段时
  • 提交 HTML 表单时
  • 当用户按下某个键时

事情流（Event flow）

事情流描绘的是页面接受事情的次序

事情会在元素节点之间依照特定的次序进行传达，这个传达进程就叫做DOM事情流

事情流的进程

考虑这样一个状况，三个div嵌套，且三个div都注册了鼠标点击事情，假如点击赤色区域的部分，会依照什么次序履行呢？

  • 蓝->绿->红（从外层到内层，Netscape Navigator提出，也便是事情捕获）
  • 红->绿->蓝（从内层到外层，IE提出，也便是事情冒泡）
  • 蓝->绿->红->绿->蓝 （先捕获，到达事情目标赤色元素开端冒泡，W3C提出的中立说法）

【浏览器】浅谈事件冒泡和事件捕获

   <style>
        #grandpa{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        #father{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        #son{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
<body>
    <div id="grandpa">                                
        <div id="father">                              
              <div id="son">
                在赤色区域到底是谁先被触发点击事情？
                </div>      
        </div>
    </div>
</body>

依照W3C的说法，dom事情流分为3个进程

  1. 捕获阶段 document先接收到点击（监听）事情 但没有绑定事情，就会略过，再到html 相同没有绑定略过，再到body同理，但是蓝色和绿色的div有绑定点击事情会触发
  2. 当时目标阶段 找到了赤色div，以及它的绑定点击事情
  3. 冒泡阶段 事情由最具体的元素接收到了以后又逐层往上传达到dom最顶层的进程
【浏览器】浅谈事件冒泡和事件捕获

而咱们能够经过element1.addEventListener(type, listener, useCapture)来指定事情处理程序在哪个阶段履行

假如其最后一个参数为 true，则为捕获阶段设置事情处理程序，假如为 false，则为冒泡阶段设置事情处理程序。

但实践中咱们更多关注的是冒泡阶段，所以用 element1.onclick = doSomething2能够直接设定为冒泡阶段

留意：

  1. js代码中只能履行捕获或许冒泡其间的一个阶段
  2. onclick和attachEvent只能得到冒泡阶段
  3. addEventListener（type，function，true/false）
  4. 实践使用中更关注的是事情冒泡
  5. 有些事情是没有冒泡的 onblur onfocus onmousenter onmouseleave

官方是引荐使用addEventListener()来注册一个事情监听器的，理由如下（引自MND原文）：

  • 它答应为一个事情增加多个监听器。特别是对库、JavaScript 模块和其他需要兼容第三方库/插件的代码来说，这一功能很有用。
  • 相比于onXYZ特点绑定来说，它供给了一种更精细的手法来操控listener的触发阶段。（即能够选择捕获或许冒泡）。
  • 它对任何事情都有用，而不仅仅是 HTML 或 SVG 元素。

事情目标

var div = document.querySelector("div");
div.onclick = function(event) {}

1 event也便是一个事情目标，写到咱们侦听函数的小括号里边，当成形参来看

2 事情目标只有有了事情才会存在，是系统主动给创立的，不需要咱们传递参数

3 事情目标 便是一个目标，里边有咱们事情一系列相关数据的集合 跟事情相关的 比如按下鼠标的坐标 按下键盘的keyCode

4 这个事情目标能够自己命名，比如event, e ,evt等

5 事情目标有兼容性问题，ie 678经过window.event来辨认 兼容性处理方式 e = e || window.event

事情目标的常见特点和办法

e.target

回来触发事情的目标

e.target回来的是触发事情的目标（元素）谁触发了这个事情

Event.currentTarget总是指向事情绑定的元素

Event.target则是事情触发的元素

比如触发事情是绑定在ul上的，我点击里边的li的时分，Event.currentTarget始终指向的是ul

但是由于点击的是li，所以Event.target会指向li。

 function hide(e){
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // 该函数用作事情处理器时：this === e.currentTarget
}
var ps = document.getElementsByTagName('p');
for(var i = 0; i < ps.length; i++){
  // console: 打印被点击的 p 元素
  ps[i].addEventListener('click', hide, false);
}
// console: 打印 body 元素
document.body.addEventListener('click', hide, false);

e.type

回来触发事情的类型 hover click

e.cancelBubble

取消冒泡特点

e.preventDefault()

阻止默许的跳转链接

e.stopPropagation()

阻止冒泡

事情托付（派遣）

不是按班里的人发东西，而是把东西交给班长，让班长去发

事情托付的原理：

不是每个子节点单独设置事情监听器，而是事情监听器设置在父节点上，然后使用冒泡原理影响设置每个子结点

给ul注册点击事情，使用事情目标target来找到当时点击的li，由于点击li，事情会冒泡到ul上，ul有注册事情，就会触发事情监听器，这样相当于ul里边的所有li都绑定了事情处理程序

事情托付的作用：

只操作了一次DOM，提高了程序的性能