发现在写事情的时分,有许多零星的知识点傻傻分不清除,由此记录一下学习进程
事情(Event)
事情(Event)是由DOM元素产生的资源,它能够由 JavaScript 代码操作,这样说很笼统,其实能够举一些常见的事情例子:
- 当用户单击鼠标时
- 网页加载后
- 加载图像后
- 当鼠标移到元素上时
- 更改输入字段时
- 提交 HTML 表单时
- 当用户按下某个键时
事情流(Event flow)
事情流描绘的是页面接受事情的次序
事情会在元素节点之间依照特定的次序进行传达,这个传达进程就叫做DOM事情流
事情流的进程
考虑这样一个状况,三个div嵌套,且三个div都注册了鼠标点击事情,假如点击赤色区域的部分,会依照什么次序履行呢?
- 蓝->绿->红(从外层到内层,Netscape Navigator提出,也便是事情捕获)
- 红->绿->蓝(从内层到外层,IE提出,也便是事情冒泡)
- 蓝->绿->红->绿->蓝 (先捕获,到达事情目标赤色元素开端冒泡,W3C提出的中立说法)
<style>
#grandpa{
width: 400px;
height: 400px;
background-color: blue;
}
#father{
width: 300px;
height: 300px;
background-color: green;
}
#son{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div id="grandpa">
<div id="father">
<div id="son">
在赤色区域到底是谁先被触发点击事情?
</div>
</div>
</div>
</body>
依照W3C的说法,dom事情流分为3个进程
- 捕获阶段 document先接收到点击(监听)事情 但没有绑定事情,就会略过,再到html 相同没有绑定略过,再到body同理,但是蓝色和绿色的div有绑定点击事情会触发
- 当时目标阶段 找到了赤色div,以及它的绑定点击事情
- 冒泡阶段 事情由最具体的元素接收到了以后又逐层往上传达到dom最顶层的进程
![【浏览器】浅谈事件冒泡和事件捕获 【浏览器】浅谈事件冒泡和事件捕获](https://www.6hu.cc/storage/2023/05/1685020404-0f1070a60c41c99.png)
而咱们能够经过element1.addEventListener(type, listener, useCapture)
来指定事情处理程序在哪个阶段履行
假如其最后一个参数为 true,则为捕获阶段设置事情处理程序,假如为 false,则为冒泡阶段设置事情处理程序。
但实践中咱们更多关注的是冒泡阶段,所以用
element1.onclick = doSomething2
能够直接设定为冒泡阶段
留意:
- js代码中只能履行捕获或许冒泡其间的一个阶段
- onclick和attachEvent只能得到冒泡阶段
- addEventListener(type,function,true/false)
- 实践使用中更关注的是事情冒泡
- 有些事情是没有冒泡的 onblur onfocus onmousenter onmouseleave
官方是引荐使用addEventListener()来注册一个事情监听器的,理由如下(引自MND原文):
- 它答应为一个事情增加多个监听器。特别是对库、JavaScript 模块和其他需要兼容第三方库/插件的代码来说,这一功能很有用。
- 相比于
onXYZ
特点绑定来说,它供给了一种更精细的手法来操控listener
的触发阶段。(即能够选择捕获或许冒泡)。 - 它对任何事情都有用,而不仅仅是 HTML 或 SVG 元素。
事情目标
var div = document.querySelector("div");
div.onclick = function(event) {}
1 event也便是一个事情目标,写到咱们侦听函数的小括号里边,当成形参来看
2 事情目标只有有了事情才会存在,是系统主动给创立的,不需要咱们传递参数
3 事情目标 便是一个目标,里边有咱们事情一系列相关数据的集合 跟事情相关的 比如按下鼠标的坐标 按下键盘的keyCode
4 这个事情目标能够自己命名,比如event, e ,evt等
5 事情目标有兼容性问题,ie 678经过window.event来辨认 兼容性处理方式 e = e || window.event
事情目标的常见特点和办法
e.target
回来触发事情的目标
e.target回来的是触发事情的目标(元素)谁触发了这个事情
Event.currentTarget
总是指向事情绑定的元素
Event.target
则是事情触发的元素
比如触发事情是绑定在ul上的,我点击里边的li的时分,Event.currentTarget
始终指向的是ul
但是由于点击的是li,所以Event.target
会指向li。
function hide(e){
e.currentTarget.style.visibility = "hidden";
console.log(e.currentTarget);
// 该函数用作事情处理器时:this === e.currentTarget
}
var ps = document.getElementsByTagName('p');
for(var i = 0; i < ps.length; i++){
// console: 打印被点击的 p 元素
ps[i].addEventListener('click', hide, false);
}
// console: 打印 body 元素
document.body.addEventListener('click', hide, false);
e.type
回来触发事情的类型 hover click
e.cancelBubble
取消冒泡特点
e.preventDefault()
阻止默许的跳转链接
e.stopPropagation()
阻止冒泡
事情托付(派遣)
不是按班里的人发东西,而是把东西交给班长,让班长去发
事情托付的原理:
不是每个子节点单独设置事情监听器,而是事情监听器设置在父节点上,然后使用冒泡原理影响设置每个子结点
给ul注册点击事情,使用事情目标target来找到当时点击的li,由于点击li,事情会冒泡到ul上,ul有注册事情,就会触发事情监听器,这样相当于ul里边的所有li都绑定了事情处理程序
事情托付的作用:
只操作了一次DOM,提高了程序的性能