JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。
使用事件委托的优点
1、操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作
dom结构如下:
<ul id = "oUl">
<li class = "item"></li>
<li class = "item"></li>
<li class = "item"></li>
<li class = "item"></li>
<li class = "item"></li>
</ul>
当li被点击时,打印该li的值。
在我们还没有学事件委托的时候我们会遍历所有li并给它们添加一个click事件,比如这样:
var aLi = document.getElementsByTagName('li'); for(var i = 0; i < aLi.length; i++) // 遍历li
aLi[i].addEventListener('click', function() { //给每个li添加事件
console.log(this.innerHTML);
});
学了事件委托之后js原生代码如下:
var oUl = document.getElementById('oUl'); oUl.addEventListener('click', function(ev) {
ev = ev||window.event;
var tag = ev.target; // 触发事件的对象保存在事件的target里面
console.log(tag.innerHTML);
})
jQuery代码如下:
$('#oUl').on('click', '.item', function() {
console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})
相比之下,事件委托只需要获取父元素并且不需要遍历li,效率提高了不少。
2、将事件委托给父元素后,动态创建(删除)的子元素不用重新绑定(解绑)事件,实现了元素与事件的同步更新
在以往的js事件监听中,用js动态创建的子元素是没有事件的,必须重新为它们绑定事件,但是用事件委托就不用这么麻烦了,不需要重新绑定事件依旧可以实现事件监听。
当然事件绑定也是有弊端的,因为它依赖于事件冒泡,如果不支持冒泡那么就不能实现事件绑定了,不过我认为这种几率还是不高的。还有就是会发生事件误判,比如页面中的button1和button2的作用是点击时弹出值,而button3的作用是点击是页面变色,这三个button的同一个事件实现功能不同,当你将click事件委托给它们共同的父元素那么就会出现事件误判。
所以我认为事件委托是发生在一个子集合的事件功能相同的情况下,如果不相同则不要使用事件委托,以免弄巧成拙。
在实际开发中,掌握事件绑定对于代码的规范性以及效率会有一定提高,总的来说利大于弊。
欢迎大家在评论区与我交流,感谢,共勉。
JavaScript之事件委托(附原生js和jQuery代码)的更多相关文章
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
- 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)
想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...
- onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
- JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js替换jQuery各种方法-中文版
原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 原生js 与 jQuery对比
1.原生JS与jQuery操作DOM对比 : https://www.cnblogs.com/QianBoy/p/7868379.html 2.比较jQuery与JavaScript的不同功能实 ...
随机推荐
- Python学习_06_文件、IO
文件对象 python中的文件操作和c语言比较类似,包括一些缓冲.偏移量的方式. 文件对象可以通过open().file()两个内建方法创建,两个方法并没有什么不同,使用方法和c语言中的fopen() ...
- Wechat 微信端调用“微信支付接口”的正确方式
微信端的项目中,比如微信商城之类的,肯定会涉及到微信支付这一块: 下面直接上详细的代码: var data = {--}; // 调用微信支付需要的数据 function onBridgeReady( ...
- 在Ubuntu14.04上搭建自己的OpenVPN服务器并通过它上网
背景 学校宿舍端口可以配置静态IP连校内网,也可以连到实验室的服务器:实验室的服务器可以连外网:但宿舍要连外网就要花钱买PPPoE账号了.作为壮哉我大计院的一员,本着发扬专(neng)业(sheng) ...
- 自学Aruba2.3-Aruba Web UI --Configuration面板介绍
点击返回:自学Aruba之路 自学Aruba2.3-Aruba Web UI --Configuration面板介绍 此文只展示重要面板,大部分通俗易懂就不过多语言介绍, 后期配置实例中再结合理论知识 ...
- 【知了堂学习笔记】/JavaScript对象--/暖妮
JavaScript对象 1.什么是JavaScript对象? JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. ...
- hive入门(一)、什么是hive
1.Hive 基本概念 Hive是基于Hadoop的一个 数据仓库工具,可以将结构化的数据文件映射成一张表,并提供类SQL查询功能: Hive是构建在Hadoop 之上的数据仓库: 使用HQL作为查询 ...
- Java学习笔记21---内部类之对成员内部类的补充说明(二)
上篇文章--笔记20补充说明了前四点,这里接着来说剩下的两点. 要点如下: 5.访问权限修饰符可以修饰成员内部类 1).访问权限修饰符对内部类的访问限制与外部类的一般成员遵循一样的规则,具体请参考笔记 ...
- HTTPS协议开通,Apache服务器CSR签名申请
登录您的服务器终端 (SSH). 在命令提示符下,键入以下命令: openssl req -new -newkey rsa:2048 -nodes -keyout yourdomain.key -ou ...
- 从Unity中的Attribute到AOP(七)
本章我们将依然讲解Unity中的Attribute,继续命名空间在UnityEngine里的. PropertyAttribute,这个特性主要来控制变量或者类在Inspector里面的显示方式.和P ...
- spring使用之旅(一) ---- bean的装配
基础配置 启用组件扫描配置 Java类配置文件方式 package com.springapp.mvc.application; import ...