DOM进阶

注册事件

传统方式： onclick, onmouseover...

特点：同一个元素只能绑定一个回调函数，新的回调会覆盖前面的回调函数，但是兼容性强

监听方式(常用，w3c推荐)： addEventListener(type, listener, [useCaptures]);

特点：不兼容IE9以前的浏览器，一个元素可以绑定多个回调函数

• ele.addEventListener('click', ()=>{return true});
• ele.addEventListener('click', ()=>{return false});

 

删除事件

传统：

ele.onclick = null;

监听：

ele.removeEventListener('click', fn); fn是要移除的函数，假设已定义

 

DOM事件对象event

event是系统自动创建的，不需要写实参

• div.onclick = event => { event = event || window.event; }
• div.addEventListener('click', event=>{ event = event || window.event; });

event的属性包含事件信息，如绑定的元素，鼠标坐标，键盘按键等.

不兼容ie 678, 因此需要window.event来处理兼容性。

常见的属性

• event.type
• event.target
• event.preventDefault(); 阻止默认行为，如阻止<a>的跳转
• 直接在回调函数里return false可以阻止默认行为，但是不支持eventListenr
• event.returnValue;  IE的阻止默认行为方法
• event.stopPropogation(); 阻止冒泡

 

 

DOM事件流

事件发生的传播过程成为事件流。

分为三个阶段：

1. 捕获阶段：从document -》html -》 ... 找到绑定执行事件的元素(由上向下)
2. 目标阶段：执行事件
3. 冒泡阶段：从最底端元素向上检测找到绑定执行事件的元素(由下向上)

在JS中，事件绑定只能支持捕获阶段和冒泡阶段其中的一个。

传统的onclick和attachclick属性只支持冒泡阶段；addEventListener()默认只支持捕获阶段，当参数为false时，支持冒泡阶段。

冒泡阶段比较常用。

 

阻止事件冒泡

•  event.stopPropogation(); 这是正常浏览器的做法
•  event.cancelBubble = true; 这是IE9之前的做法

 

*事件委托

 *原理：不单独给单个子节点添加监听器，而是放在父结点上，然后利用冒泡原理影响每个子节点。

这样只需要操作一个DOM(父节点)，点击它的任意子节点都会有事件发生。

点击的子元素会被事件event对象记录，可以用event.target来获取。（对然event绑定在父元素，但是event记录的是鼠标事件而不是元素信息，因此保留的是被点击的元素）

可以理解为，把子节点的事件委托给父节点执行，然后父节点阻止冒泡即可(如果父节点不需要再向上进行委托)。