13事件

事件类型

• 依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的。
• 独立于设备的输入事件：例如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)
}

获取目标元素

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 }

获取鼠标坐标

• pageX和pageY 表示鼠标在整个页面中的位置。如果页面过大（存在滚动条），部分页面可能存在可视区域之外。

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

• screenX和screenY 表示鼠标在整个屏幕中的位置。从屏幕（不是浏览器）的左上角开始计算。

• offsetX和offsetY 表示鼠标相对于定位父元素的位置。

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('city', function (event) {
    var target = event.target
    if (target.nodeName === 'LI') {
        console.log('666')
    }
})