关于javaScript事件委托的那些事
今天是第一次写稿,还是有那么一丢丢小鸡冻。。。回归正题啦。。。
关于javaScript事件委托不得不说的那些事,为什么要使用事件委托?
我们可以这么说,假设老板要分配一项任务,首先要秘书叫A君来到办公室,任务分配结束后老板要秘书叫B君。。。以此类推。这样严重浪费了老板的时间,降低了工作效率。我们现在可以将这项任务委托秘书,由秘书统一分配给员工。这样工作效率明显提高了很多。由此我们引出了事件委托。
使用事件委托的原因:添加到页面上的事件处理程序数量直接关系到页面整体运行的性能。
函数对象占用内存,内存越多,性能越差。
事先指定所有事件处理程序导致DOM访问次数过多,延迟页面的交互就绪时间。
解决方案:利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
使用方法:在DOM树尽量最高的层次上添加一个事件处理程序。触发执行效果。
方法一:由于事件目标是一个项,因此可以通过检查id属性决定采取适当操作。
var lists = document.getElementById('lists');
lists.addEventListener('onclick',function(event){
var target = event.target;
switch (target.id){
case "li1":alert("我是第一个li"); break;
case "li2":alert("我是第二个li"); break;
case "li3":alert("我是第三个li"); break;
}
},false);
方法二:父级处理函数包含在页面函数中,选中元素处理函数单独调用页面函数,在该函数中写被选元素的处理程序。(该方法适合给同类的子元素添加相同的效果)
结构:
页面函数(父级元素,事件类型,被选元素,被选元素的处理函数名){
获取父级的id;
页面处理函数(对父级元素了的子元素进行筛选);
对父级元素绑定页面处理函数(或事件);
}
//调用页面函数
页面函数(父级元素,事件类型,被选元素,被选元素处理函数(){
被选元素事件;}
代码:
function pagefn(parentid,eventType,selector,elementfn){
var parent = document.getElementById(parentid);
console.log(parent)
function handler(event){
var target =event.target;
if(target.id === selector){
elementfn.call(target);
}
}
parent[eventType] = handler;
}
pagefn('lists','onclick','li',function(){
this.style.backgroundColor = 'red';
});
优点:
1.document对象很快就可以访问,可以在页面生命周期任何时点添加事件处理程序;
2. 在页面设置事件处理程序所需时间更少;
3.页面占有的内存更少,提升性能。
适合使用事件委托的事件:click、mousedown、mouseup、keydowm、keyup、keypress。虽然mouseover和mouseout事件也冒泡,但要适当处理它们不容易,而且需经常计算元素位置(当元素从一个元素移到其子节点,或当鼠标移出该元素,都会触发mouseout事件)。
作为前端菜鸟第一次写博客还请大神多指教。
关于javaScript事件委托的那些事的更多相关文章
- JavaScript 事件委托的技术原理
如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...
- JavaScript事件委托的技术原理
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
- javascript事件委托机制详解
以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...
- JavaScript 事件委托
JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- Javascript事件委托
事件委托利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件未使用事件委托之前: <!DOCTYPE html> <html> <head> &l ...
- javascript事件委托和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- javascript 事件委托 和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
随机推荐
- ARDUINO W5100 WebClient 测试
基础工作:W5100扩展板插在ARDUINO上.用网线把W5100和自己家的路由器连接.插上网线能看到侧面网口指示灯变亮.路由器开启DHCP服务(一般都是开启的). 1.打开官方例程里面的Ethern ...
- 牛客练习赛13 B 幸运数字Ⅱ 【暴力】【二分】
题目链接 https://www.nowcoder.com/acm/contest/70/B 思路 没有代码限制 先打表 打出 幸运数字的表 然后 二分查找 第一个 大于 r 的幸运数字 然后 往 L ...
- 牛客练习赛13 A 幸运数字Ⅰ 【暴力】
题目链接 https://www.nowcoder.com/acm/contest/70/A 思路 暴力每一个子串 用 MAP 标记一下 然后 最后 遍历一遍 MAP 找出 出现次数最多 并且 字典序 ...
- PHP新写的大转盘抽奖源码
中奖概率 抽奖大转盘演示:http://www.sucaihuo.com/php/3301.html function getRand($proArr, $proCount) { $result = ...
- hd acm 1465
问题:某人写了n封信和n个信封,如果所有的信都装错了信封.求所有的信都装错信封,共有多少种不同情况. 思路:由这道题引入错排公式:f(n)=(n-1)*[f(n-1)+f(n-2)]. 当N=1和2时 ...
- POJ 1611并查集
我发现以后写题要更细心,专心! #include<iostream>#include<algorithm>#include<stdio.h>#include< ...
- hadoop集群增加新节点
上次hadoop集群一块数据盘报警, 提交工单后维修人员更换硬盘 服务器是dell r720的, 8盘位, 蛋疼的是这些硬盘都是做的单盘raid1,维修人员说必须关机导入硬盘才能正常使用 (服务器就这 ...
- HDU 4267 A Simple Problem with Integers(2012年长春网络赛A 多颗线段树+单点查询)
以前似乎做过类似的不过当时完全不会.现在看到就有点思路了,开始还有洋洋得意得觉得自己有不小的进步了,结果思路错了...改了很久后测试数据过了还果断爆空间... 给你一串数字A,然后是两种操作: &qu ...
- css 采集下载
软件应用范围: 看到喜欢的网页,另存为的话,并不能直接保存css中引用的图片. 那么就有了本软件的用武之地. 亮点:自动匹配文件内的相对路径.css内图片地址值md5保存,用来避免不同文件夹同名文件的 ...
- cocos2d-x在android真机上设置帧率无效的问题
通过setAnimationInterval设置帧频时,发现在android下没有效果的 在Cocos2dxRenderer .java文件里面找到了onDrawFrame这个函数.里面有句注释 : ...