13事件 | 小康博客

事件类型

依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的。
独立于设备的输入事件：例如cick事件等，这些事件并没有直接与设备相关
用户界面的相关事件：用户界面事件属于较高级的事件，一般多用于表单中的组件。状
变化的相关事件：这些事件与用户行为无关，而是由网络或浏览器触发的。
特定API事件：这些事件多用于特定场景的实现，例如 HTML5中提供的拖放API中的事件等
与错误处理的相关事件

注册事件

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

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

通过事件属性

<button id="btn1" onclick="fn()">按钮</button>
<script>
    function fn() {
        console.log('你终于点击了我')
    }
</script>

DOM中相关对象提供的事件属性

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

为指定元素添加事件监听器

<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元素
`srcElement`	E8及之前版本浏览器支持，表示触发当前事件的HTML元素
`returnValue`	E8及之前版本浏览器支持，表示取消当前事件的默认行为
`cancelBubble`	E8及之前版本测览器支持，表示阻止当前事件的冒泡行为
`preventDefault`	表示取消当前事件的默认行为
`stopPropagation`	表示阻止当前事件的冒泡行为

获取目标元素

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

默认行为

什么是默认行为：

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

preventDefault

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

return false

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

获取鼠标坐标

pageX和pageY
表示鼠标在整个页面中的位置。如果页面过大（存在滚动条），部分页面可能存在可视区域之外。
clientX和clientY
表示鼠标在整个可视区域中的位置。
screenX和screenY
表示鼠标在整个屏幕中的位置。从屏幕（不是浏览器）的左上角开始计算。
offsetX和offsetY
表示鼠标相对于定位父元素的位置。

事件流

捕获阶段（网景公司提出）
按照DOM树结构由 documenti对象向下的顺序传播，直到目标元素为止
目标阶段
该阶段就是指目标元素触发当前事件。
冒泡阶段
按照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')
    }
})