JS学习之DOM高级事件

事件高级

注册事件（绑定事件）

注册事件概述

给元素添加事件，称为注册事件或绑定事件

注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

• 利用on开头的时间onclick

• <button onclick="alert(hi~)"></button>

• btn.onclick = function() {}

• 特点：注册时间的唯一性

• 同一个元素同一个事件只能设置一个处理函数、最后注册的处理函数将会覆盖前面注册的处理函数

口述：不能处理多个函数

监听事件注册方式

• W3C标准推荐方式

• addEventListener()他是一个方法

• IE9之前的IE不支持此方法，可使用attachEvent() 代替

• 特点：同一个元素同一个事件可以注册多个监听器

• 按注册顺序依次执行

addEventListener 事件监听方式

eventTarget.addEventListener(type,litsener[,useCapture])

eventTarget.addEventListener(type,litsener[,useCapture]) 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数

该方法接受三个参数：

• type 事件类型字符串 click mouseover注意不要带on

• listener 事件处理函数，事件发生时，会调用该监听函数

• useCapture 可选参数，是一个布尔值 默认false 学完DON事件流后再进一步学习

attachEvent 事件监听方式

ie678浏览器支持 了解即可

eventTarget.attachEvent(eventNameWithOn,callback)

eventTarget.attachEvent(eventNameWithOn,callback)方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发事件时，指定的回调函数就会被执行

• eventNameWithOn :事件类型字符串，比如onclick onmouseover 这里带on

• callback 事件处理函数，当目标触发事件时回调函数被调用

注册事件兼容性解决方案

function addEventListenerlement, eventName, fn) { //判断当前浏览器是否支持addEventListener方法 if(element.addEventListener){ element.addEventListener(eventName，fn); // 第三个参数默认是false}elseif(elementattachEvent){ element.attachEvent('on'+ eventName,fn);} else { //相当于element.onclick=fn; element['on'+ eventName] =fn;

}

兼容性处理原则：首先照顾大多浏览器，在处理特殊浏览器

addEventListener使用最频繁

删除事件（解绑事件）

删除事件的方式

1. 传统注册方式

eventTarget.onclick = null;

2.方法监听

eventTarget.removeEventListener(type,listener[,useCapture]);

event