注意:
-
JS代码只能执行捕获或者冒泡其中的一个阶段
-
onclick 和 attachEvent 只能得到冒泡阶段
-
addEventListener (type, listener[, useCapture]) 第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件
冒泡阶段
电泳事件处理程序。 -
在实际开发中,我们很少使用事件捕获(低版本ie不兼容),我们更关注事件冒泡
-
有些事件是没有冒泡的,比如
onblur、onfocus、onmouseover、onmouseleave
-
虽然事件冒泡有时候会带来麻烦,但是有时候又会巧妙的做某些事情,我们后面讲解
-
event 就是一个事件对象,写道我们的侦听函数的小括号里面,当形参来看
-
事件对象只有有了事件才会存在,他是系统给我们自动创建的,不需要我们传递参数
-
事件对象是我们的事件的一系列相关数据的集合,比如鼠标点击里面就包含了鼠标的相关信息
-
这个事件对象我们可以自己命名,比如 event、evt 、e 等
-
事件对象也有兼容性问题。 IE 6、7、8通过 window.event 实现
兼容性写法:
event = event || windoe.event;
事件对象常见额属性和方法
| 事件对象属性方法 | 说明 |
| — | — |
| e.target
| 返回触发事件的对象 标准 |
| e.scrElement | 返回触发事件的对象 非标准 IE 6 7 8 使用 |
| e.type | 返回事件的类型,比如click、mouseover等,不带 on |
| e.cancelBubble | 该属性阻止冒泡,非标准,IE 6 7 8 使用 |
| e.returnValue | 该属性阻止默认事件(默认行为)非标准 ,IE 6 7 8 使用,比如不让链接跳转 |
| e.preventDefaule()
| 该方法阻止默认事件(默认行为)标准 ,比如不让链接跳转
|
| e.stopPropagation()
| 阻止冒泡,标准
|
e.target 和 this 的区别
this 返回的是绑定事件的对象(元素)
e.target 返回的是点击的那个对象,就是谁触发了这个事件,如点击事件->谁被点了
var ul = document.querySelector(‘ul’);
ul.addEventListener(‘click’, function (e) {
console.log(this);
console.log(e.target);
})
//
- …
//
- 123
-
阻止对象默认行为(重)
三种方法:
e.preventDefaule();
是一个方法,适合普通浏览器
-
e.returnValue; 是一个属性,适用于 IE 6 7 8
-
return false;
没有兼容性问题,但是需要注意后面的语句就不执行了,直接跳出
阻止冒泡(重)
-
event.stopPropagation(); // 一般浏览器停止冒泡
-
event.cancelBubble; // IE 6 7 8 的停止冒泡
var father = document.querySelector(‘.father’);
var son = document.querySelector(‘.son’);
father.addEventListener(‘click’, alertName, false);
son.addEventListener(‘click’, alertName, false);
document.addEventListener(‘click’,function () {
alert(‘document’);
}, false);
function alertName (event) {
alert(this.getAttribute(“class”));
event.stopPropagation(); // 停止冒泡
event.cancelBubble; // IE 6 7 8 的停止冒泡
}
事件委托的原理(重)
事件委托的原理:不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点。
例如: 给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li ,然后事件冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。
事件委托的作用
只操作了一次 DOM ,提高了程序的性能。
为什么要事件委托?(重)
在JavaScript中,添加到页面上的事件处理程序
数量将直接关系到页面的整体运行性能
,因为需要不断的操作dom
,那么引起浏览器重绘和回流
的可能也就越多,页面交互的事件也就变的越长,这也就是为什么要减少dom操作的原因
。每一个事件处理函数,都是一个对象,那么多一个事件处理函数,内存中就会被多占用一部分空间。如果要用事件委托,就会将所有的操作放到js程序里面,只对它的父级(如果只有一个父级)这一个对象进行操作,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能
;事件委托小案例
需求:鼠标放到li上,对应的li背景颜色变为灰色
- 111
- 222
- 333
- 444
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!