JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
AI+设计
软件测试
新媒体+短视频
集成电路应用开发
更新时间:2019年07月26日 10时53分47秒 来源:黑马程序员论坛
|
事件委托： 是本应该给子元素绑定点击事件，但是却委托给父元素代替自己执行方法的一种办法。 一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？ 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能； 每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如100个li，就要占用100个内存空间，如果是1000个，10000个呢，那就非常尴尬了。 但是如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了。 那么事件委托他的原理是什么呢？ 举个栗子 在e中呢，有e.target属性，就是当前点击的元素。 那么我们console.dir一下打印当前dom对象，这里面有当前dom元素的所有属性以及方法。可以发现e.target.tagName正好是我们当前点击的元素的名字li 那么我们就可以进行判断，如果点击的是li就可以执行一些自己的逻辑代码。 那么为什么是LI呢？不是li或者<li></li>，由于内部封装的缘故，我们只能打印出来按照他的值去进行一个判断。 至此，我们就已经了解了原生的事件委托。后面jq中还会有更加方便的事件委托供我们使用，最后再总结一下事件委托的原理。 事件委托是利用事件冒泡的原理，我们点击事件（无论是onclick还是addEventListener（默认第三个参数为false，代表事件冒泡绑定，为true代表事件捕获绑定）），都是事件冒泡去触发事件的，我们在点击了li之后，冒泡到父元素ul上，触发事件，然后在触发的函数中判断是不是我们点击的这个元素，再执行后续操作。 这就是事件委托，让父元素代替执行事件。 最后附上源码： [AppleScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script>
/* 点击某个li让他添加上一个背景颜色。
原始做法我们是采用一个for循环给每一个li绑定一个点击事件
那么在上面我们也说过了，每一个点击事件都会占用一个内存，所以我们要使用事件委托的方式来完成这个需求。
我们现在把原本要给li的事件委托给父元素（ul）执行
*/
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
// 我们都知道li也是属于ul当中的，那么我们点击li的时候，也会触发这里的代码。
// e是事件源参数，我们打印一下。
console.dir(e.target)
// 进行点击元素的判断，如果是li那么就执行操作逻辑
if (e.target.tagName == 'LI') {
e.target.style.backgroundColor = 'red';
}
})
</script>
</html>
 点击查看更多精彩前端资源点击有惊喜 |
推荐了解热门学科
| java培训 | Python人工智能 | Web前端培训 | PHP培训 |
| 区块链培训 | 影视制作培训 | C++培训 | 产品经理培训 |
| UI设计培训 | 新媒体培训 | 产品经理培训 | Linux运维 |
| 大数据培训 | 智能机器人软件开发 |
传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。
传智播客从未停止思考
传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”
中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。
何为中高级程序员课程?
传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。
黑马程序员热门视频教程【点击播放】
| Python入门教程完整版（懂中文就能学会） | 零起点打开Java世界的大门 |
| C++| 匠心之作 从0到1入门学编程 | PHP|零基础入门开发者编程核心技术 |
| Web前端入门教程_Web前端html+css+JavaScript | 软件测试入门到精通 |