JS入门 — 说一说“事件”

496 阅读2分钟

事件


指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。

事件处理程序/事件侦听器


我们用户在页面中进行的点击这个动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即: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
    }
}