事件
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。
事件处理程序/事件侦听器
我们用户在页面中进行的点击这个动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即:click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序,或者叫做事件侦听器。
事件类型
常用事件类型有以下这些:
事件绑定
绑定多个事件:绑定事件最好用句柄形式,目的是为了方便好移除事件。
绑定是捕获或者冒泡事件,则移除也要对应。
// 事件绑定
element.addEventListener("事件名称", 句柄/匿名函数, true/false) // true 为事件捕获 false事件冒泡
// 事件移除
element.removeEventListener("事件名称", 句柄, true/false)
IE下绑定事件
IE下没有捕获事件,只有冒泡事件。默认false
对于IE8-,则使用的是IE专有的事件处理程序:两个类似的方法——attachEvent()与detachEvent()
// 事件绑定
element.attachEvent("事件名称", 句柄)
// 事件移除
element.detachEvent("事件名称", 句柄)
一般在早期,需要兼容IE的时候,开发会封装一个函数,兼容不同浏览器。
// 兼容TE与其他浏览器原生绑定
function addEventHandle(ele,eventName,eventHandle){
if(document.addEventListener){
ele.addEventListener(eventName,eventHandle,false)
} else if(document.attachEvent){
ele.attachEvent("on"+eventName,eventHandle)
} else {
ele["on"+eventHandle] = eventName
}
}
事件流(事件冒泡 事件捕获)
事件流:描述的是从页面中接收事件的顺序
捕获阶段(IE没有捕获阶段) 处于目标阶段 冒泡阶段
事件委托
给元素的父级或者祖级,甚至页面绑定事件,然后利用事件冒泡的基本原理,通过事件目标对象进行检测,然后执行相关操作.
Element.onclick = function(event){ // 在父级上绑定
const e = event || window.event
if(e.target.tagName == 'LI'){ // 判断点击标签
// do something
}
}