今天温习了一下小红书,来整理一下事件的知识点
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,可以使用侦听器或者处理程序来预定事件,以便事件执行相应的逻辑代码。比如常见的按钮的点击事件等。
事件流:描述页面中接收事件的顺序的一个概念。分两种: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时:
DOM的事件流包括三个阶段:
实际的目标在捕获阶段是不会接收到事件的,还是那上面那个栗子来说,事件到ul就停止了,下一个阶段属于“处于目标”阶段,于是事件在li2上发生,并在事件处理中被看成是冒泡的一部分,然后,冒泡发生。
再来看看事件处理程序,也就是事件的定义啦:
<input type="text" onchange="handleChange(event)" id="inputElem" />
function handleChange(event) {
console.log('handleChange event', event)
}
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)
}
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()