JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JavaScript给事件委托批量添加事件监听详细流程

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript给事件委托批量添加事件监听详细流程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.什么是事件委托

事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：

  • 减少DOM操作，提高性能。
  • 随时可以添加子元素，添加的子元素会自动有相应的处理事件。

2.事件委托的原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

3.事件委托的实现

通过一个案例来实现事件委托。
案例：批量添加事件监听。使用JavaScript实现：点击哪个li，哪个li元素的背景变红。

在这里插入图片描述

结构层+样式层代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        float: left;
        width: 800px;
        margin-top: 50px;
    }
    ul li {
        list-style: none;
        float: left;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin-right: 20px;
    }
    ul li:First-child {
        margin-left: 20px;
    }
</style>
<body>
	<ul id="list">
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
	</ul>
</body>

3.1 方法1：循环添加事件

不使用事件委托，使用for循环添加点击事件，内存消耗大。

VAR oList = document.getElementById('list');
var lis = oList.getelementsbytagname('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        this.style.backgroundColor = 'red';
    }
}

3.2&nbsp;方法2：使用事件委托

使用事件委托。

var oList = document.getElementById('list');
oList.onclick = function (e) {
	e.target.style.backgroundColor = 'red';
}

该案例中，e.target表示用户真正点击到的那个元素。

到此这篇关于JavaScript给事件委托批量添加事件监听详细流程的文章就介绍到这了,更多相关JavaScript 事件委托内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript给事件委托批量添加事件监听详细流程全部内容，希望文章能够帮你解决JavaScript给事件委托批量添加事件监听详细流程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：事件委托
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程