关于JavaScript事件的那些事儿
关于JavaScript事件的那些事儿
今天温习了一下小红书，来整理一下事件的知识点
事件：文档或浏览器窗口中发生的一些特定的交互瞬间，可以使用侦听器或者处理程序来预定事件，以便事件执行相应的逻辑代码。比如常见的按钮的点击事件等。
事件流：描述页面中接收事件的顺序的一个概念。分两种：IE的事件冒泡流，Netscape Communicator的是事件捕获流。
从总体上来说，两者都是基于DOM结构的。
IE的事件冒泡：事件是由最具体的元素接收，然后逐级往上传播至不太具体的节点(文档)
事件捕获流：从太不具体的节点(文档)接收事件，然后逐级向下传播至最具体的元素接收事件。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<ul>
<li>li1li>
<li>li2li>
ul>
body>
html>
拿上面这个栗子来说叭，点击li2时：
- 事件冒泡流：li -> ul -> body ->document
- 事件捕获流：document -> body -> ul -> li
DOM的事件流包括三个阶段：
- 事件捕获
- 目标获取
- 事件冒泡
实际的目标在捕获阶段是不会接收到事件的，还是那上面那个栗子来说，事件到ul就停止了，下一个阶段属于“处于目标”阶段，于是事件在li2上发生，并在事件处理中被看成是冒泡的一部分，然后，冒泡发生。
再来看看事件处理程序，也就是事件的定义啦：
- 直接在元素上面定义事件
<input type="text" onchange="handleChange(event)" id="inputElem" />
function handleChange(event) {
console.log('handleChange event', event)
}
- addEventListener 和 removeEventListener
var inputElem = document.getElementById('inputElem')
inputElem.addEventListener(
'change',
function (event) {
console.log('inputElem.addEventListener change', event)
},
false
)
- 海油一种
inputElem.onchange = function (event) {
console.log('inputElem.onchange', event)
}
- 最后一种是IE的attachEvent 和 detachEvent
注意：这里的event的作用域是window 海油是onchange!! 不是change
inputElem.attachEvent('onchange', function(event){
consoe.log('xxxx')
})
所以，跨浏览器的方法来啦！！
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false)
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler)
} else {
element['on' + type] = handler
}
},
removeHandle: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false)
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler)
} else {
element['on' + type] = null
}
},
}
特别注意attachEvent的on
使用：
EventUtil.addHandler(inputElem, 'change', handleChange)
事件对象：
浏览器会将一个event对象传入到事件处理程序中，在事件处理程序的内部，this始终等于currentTarget 的值，target是包含事件的实际目标。
btnElem.onclick = function (event) {
console.log(
'btnElem.onclick',
event,
this === event.target, // true
this === event.currentTarget // true
)
}
阻止特定事件的默认行为：
event.preventDefault()
取消事件进一步的捕获或者冒泡：
event.stopPropagation()