事件类型

  • 依赖于设备的输入事件:键盘事件和鼠标事件,这些事件都是直接和设备相关的。

  • 独立于设备的输入事件:例如cick事件等,这些事件并没有直接与设备相关

  • 用户界面的相关事件:用户界面事件属于较高级的事件,一般多用于表单中的组件。状

  • 变化的相关事件:这些事件与用户行为无关,而是由网络或浏览器触发的。

  • 特定API事件:这些事件多用于特定场景的实现,例如 HTML5中提供的拖放API中的事件等

  • 与错误处理的相关事件

注册事件

注册事件指:就是将 Javascript函数与指定的事件相关联。

句柄:被绑定的函数成为该事件的句柄。

  1. 通过事件属性

    <button id="btn1" onclick="fn()">按钮</button>
    <script>
        function fn() {
            console.log('你终于点击了我')
        }
    </script>
  2. DOM中相关对象提供的事件属性

    <button id="btn2">按钮</button>
    <script>
        var btn2 = document.getElementById('btn2')
        btn2.onclick = function () {
            console.log('你终于点击了我')
        }
        // 如果为某个事件指定的处理函数是已定义好的,只写函数名,不能有小括号
        btn2.onclick = fn
    </script>
  3. 为指定元素添加事件监听器

    <button id="btn3">按钮</button>
    <script>
        var btn3 = document.getElementById('btn3')
        // 添加事件
        btn3.addEventListener('click', fn)
        // 移除事件
        btn3.removeEventListener('click', fn)
    </script>

    其中addEventListener(eventName,functionName,capture),参数分别如下:

    • eventName

      为元素指定具体的事件名称(例如单击事件是 clicke等)

    • functionName

      注册事件的句柄

    • capture

      设置事件是捕获阶段还是冒泡阶段。 false为默认值,表示冒泡阶段

    IE8中提供的事件监听器为:element.attachEvent(eventName,functionName)

    • eventName:为元素指定具体的事件名称(例如单击事件是 click等)
    • functionName:注册事件的句柄

事件中的this,当使用 addeventlistener()方法为某个HTML页面元素注册事件的时候,this就指代注册事件的元素。

移除注册事件

移除事件只有removeEventListener(),DOM标准规范提供的 removeEvenListener()方法,调用该方法表示向指定元素移除事件监听器。

element.removeEvenListener(eventName,functionName,capture)

  • eventName

    表示移除的事件名称(例如单击事件是 click等)

  • functionName

    注册事件的句柄(之前使用 addeventlistener0方法定义的)

  • capture

    设置事件是捕获阶段还是冒泡阶段。flkc为默认值,表示冒泡阶段

Even事件对象

为HTML页面中的元素注册事件时,事件的处理函数具体一个参数,该参数就是 Event事件对象Event事件对象中包含了该事件的信息,以及该事件发生在哪个元素上

var liElement = document.getElementById('link')
liElement.onclick = function (event) {
    /*
                target属性:触发当前事件的目标元素
                currentTarget属性:绑定当前事件的目标元素
                this:与currentTarget属性一致
            */
    console.log(event.target, event.currentTarget, this)
}
属性或方法描述
target表示触发当前事件的HTML元素
currentTarget表示注册当前事件的HTML元素
srcElementE8及之前版本浏览器支持,表示触发当前事件的HTML元素
returnValueE8及之前版本浏览器支持,表示取消当前事件的默认行为
cancelBubbleE8及之前版本测览器支持,表示阻止当前事件的冒泡行为
preventDefault表示取消当前事件的默认行为
stopPropagation表示阻止当前事件的冒泡行为

获取目标元素

  1. target

    用于获取触发当前事件的HTML元素

  2. currentTarget

    用于获取当前事件的HTML元素

默认行为

什么是默认行为:

  • <a>标签跳转功能
  • <form>元素中点击<input type='submit'>提交按钮时,提交表单功能
  • 输入框的输入文本内容功能
  • 单选框或复选框的切换选项功能。
  1. preventDefault

    var link = document.getElementById('link')
        // 1. Event事件对象preventDefault()方法
        link.onclick = function (event) {
        event.preventDefault();
    }
  2. return false

    // 2. 函数return语句
    link.onclick = function () {
        return false
    }

获取鼠标坐标

  • pageXpageY

    表示鼠标在整个页面中的位置。如果页面过大(存在滚动条),部分页面可能存在可视区域之外。

  • clientXclientY

    表示鼠标在整个可视区域中的位置。

  • screenXscreenY

    表示鼠标在整个屏幕中的位置。从屏幕(不是浏览器)的左上角开始计算。

  • offsetXoffsetY

    表示鼠标相对于定位父元素的位置。

    image-20200423194615616

事件流

  1. 捕获阶段(网景公司提出)

    按照DOM树结构由 documenti对象向下的顺序传播,直到目标元素为止

  2. 目标阶段

    该阶段就是指目标元素触发当前事件。

  3. 冒泡阶段

    按照DOM树结构由目标元素向上的顺序传播,直到document对象为止。

取消事件冒泡

var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
// 第三个参数:默认值 false 表示冒泡阶段;true 表示捕获阶段
box1.addEventListener('click', function () {
    console.log('this is box1')
})
box2.addEventListener('click', function () {
    console.log('this is box2')
})
box2.addEventListener('click', function (event) {
    console.log('this is box3')
    event.stopPropagation()
})

事件委托

当为大量的HTML元素注册相同事件,并且事件的句柄逻辑完全相同时,会造成页面速度下降。不过,事件流允许在这些HTML元素的共同父级元素注册事件。这种方式被称为事件委托

  • 适用于新创建的元素

    如果向DOM树结构中添加新的元素,那么不需要再向这个新元素注册相同事件。因为注册事件已经委托给了该元素的祖先元素完成。

  • 简化逻辑代码

    这种方式只需要祖先元素一次注册事件,而不需要分别为大量元素注册事件。使得逻辑代码的性能提高,也更加容易维护

city.addEventListener('click', function (event) {
    var target = event.target
    if (target.nodeName === 'LI') {
        console.log('666')
    }
})