填坑-十万个为什么?(14)

240 阅读3分钟

简介:很多概念不清或忘记,重新构建自己的知识体系。每天问自己1~多个问题。我是菜鸟 成为大神之路!

1. 事件,事件捕获和事件冒泡理解?

①有哪些事件?

菜鸟教程中的事件手册:www.runoob.com/jsref/dom-o…
W3school事件手册:www.w3school.com.cn/jsref/dom_o…

②DOM事件流

"DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后阶段是冒泡阶段。

(1)捕获阶段(Capture Phase)
事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。
(2)目标阶段(Target Phase)
当事件到达目标节点的,事件就进入了目标阶段。事件在目标节点上被触发,然后会逆向回流,直到传播至最外层的文档节点。
(3)冒泡阶段(Bubble Phase)
事件在目标元素上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,回溯到根节点。 冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件。

③如何阻止捕获和冒泡?

调用 event.stopPropagation()。阻止冒泡
调用event.preventDefault()。阻止捕获

④如何添加事件监听?

JavaScript中事件监听的方法总共有三种,分别如下:

element.addEventListener(type, listener,[useCapture]);  //IE6~8不支持
element.attachEvent('on' + type, listener)     //支持IE6~10,IE11不支持
element['on' + type] = function(){}     //支持所有浏览器

参数解释:
    type:事件类型
    listener:事件出发后的回调函数
    useCapture:是否使用捕获,如果值为true,useCapture表示用户希望发起捕获。
    在发起捕获之后,只要DOM子树下发生了该事件类型,都会先被该事件监听器捕获,然后再被派发到DOM子树中的事件监听器中。
    并且向上冒泡的事件不会触发那些发起捕获的事件监听器。useCapture默认值是true。

例子:
function funEven(){
    console.log("添加事件");
}

element.addEventListener('click', funEven, false);
element.attachEvent('onclick', funEven);
element.onclick = funEven;

2.委托(代理)事件理解?

一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表中间还有未知数个 li

我们来实现把#list下的li元素的事件代理委托到它的父层元素也就是#list上:

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'LI') {
    console.log('the content is: ', target.innerHTML);
  }
});

在上述代码中, target元素则是在#list元素之下具体被点击的元素,然后通过判断 target 的一些属性(比如:nodeName,id等等)可以更精确地匹配到某一类#list li元素之上;

参考文章:
JavaScript 事件委托详解
JS的事件处理机制以及事件代理(事件委托)