DOM事件总结

Posted 2020-11-21 jingmi-coding

1.DOM事件：

DOM0： element.onclick=function(){}

DOM2： element.addEventListener(‘click’,function(){}) 

addEventer接受三个参数：

• type：事件名称，大小写敏感。
• listener：监听函数。事件发生时，会调用该监听函数。
• useCapture：布尔值，表示监听函数是否在捕获阶段（capture），默认为false（监听函数只在冒泡阶段被触发）。该参数可选。

DOM3： element.addEventListener(‘keyup,function(){}) 与DOM2添加事件的方式一致，知识增加了鼠标、键盘事件

2.DOM事件模型：捕获和冒泡，IE只有冒泡

3.事件流：即事件是怎么触发的，分为三个阶段

• 第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
• 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
• 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）

DOM事件的捕获过程：window ->document->html(document.documentElement)->body(document.body)->…

4.event对象的常用方法

event.preventDefault() 阻止默认事件

stopPropagation():阻止事件的传播

stopImmediatePropagation() 如果某个元素有多个相同类的事件监听函数,则当事件触发时,多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 event.stopImmediatePropagation,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

event.target:当前事件目标，即触发事件的节点

event.currentTarget:当前绑定的事件

示例：使用事件代理，点击li标签时，e.target=li 而e.currentTarget始终是ul

<ul>
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
</ul>

var ul = document.querySelector(‘ul‘);

ul.addEventListener(‘click‘, function (event) {
  if (event.target.tagName.toLowerCase() === ‘li‘) {
    // some code
  }
});

5.事件代理

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

6.自定义事件

var event = new CustomEvent(‘build‘, { ‘detail‘: ‘hello‘ }); 
//也可以用 var event = new Event（‘build‘）来自定义事件
document.body.addEventListener(‘build‘, function (e) { 
　　console.log(e.detail);
});
document.body.dispatchEvent(event); //触发事件

customEvent API接口 https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent

7.IE事件模型和普通事件模型的区别

	IE事件模型	DOM事件模型
监听事件	element.atachEvent ("on"+type,handler);	element.addEventListener(type,handler); element["on"+type]=handler;
取消事件	element.detachEvent("on"+type,handler);	element.removeEventListener (type,handler);  element["on"+type]=null;
获取事件对象	window.event	event
获取事件目标	event.target	event.srcElement
取消事件的默认行为	event.preventDefault();	event.returnValue=false;
取消事件的传播	event.stopPropagation();	event.cancelBubble=true;     //IE的event事件，阻止冒泡

参考资料：http://javascript.ruanyifeng.com/dom/event.html