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的不同功能实 ...
随机推荐
- springBoot系列教程08:拦截器(Interceptor)的使用
拦截器intercprot 和 过滤器 Filter 其实作用类似 在最开始接触java 使用struts2的时候,里面都是filter 后来springmvc时就用interceptor 没太在意 ...
- C#语言和SQL Server第十三 十四章笔记
十三章 使用ADO.NET访问数据库 十四章使用ADO.NET查询和操作数据库 十三章: ...
- 一种laravel特有的serviceProvider的加载方式
这里的laravel版本5.5. 我是使用到dingo这个包的时候,觉得很奇怪,我们一般的包使用的时候都需要加载一个serviceProvider,提供服务,dingo/api这里也有ServiceP ...
- MicroPython开发板:TPYBoard v102 播放音乐实例
0x00前言 前段时间看到TPYBoard的技术交流群(群号:157816561,)里有人问关于TPYBoard播放音乐的问题.最近抽空看了一下文档介绍,着手做了个实验.更多MicroPython的教 ...
- 微信小程序实现简易留言板
微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...
- Java学习笔记5(类的入门以及ArrayList)
1.类的概念:将现实生活中的事物抽象成了代码(类),我们可以使用自定义的数组类型(类)来描述现实生活中的事物. 2.分析:用一部手机来分析,手机可以打电话,上网,听音乐,这些就是方法,手机有型号,颜色 ...
- 【二分图】P3386洛谷模板
题目背景 二分图 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+1行,每行两个正整数u,v,表示u,v有一条连边 ...
- 机器学习笔记4-Tensorflow线性模型示例及TensorBoard的使用
前言 在上一篇中,我简单介绍了一下Tensorflow以及在本机及阿里云的PAI平台上跑通第一个示例的步骤.在本篇中我将稍微讲解一下几个基本概念以及Tensorflow的基础语法. 本文代码都是基于A ...
- .NET技术面试题系列(1) 基础概念
这是.NET技术面试题系列第一篇,今天主要分享基础概念. 1.简述 private. protected. public.internal 修饰符的访问权限 private : 私有成员, 在类的内部 ...
- [UWP]如何使用Fluent Design System (下)
4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall C ...