今天是第一次写稿,还是有那么一丢丢小鸡冻。。。回归正题啦。。。

关于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事件委托的那些事的更多相关文章

  1. JavaScript 事件委托的技术原理

    如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...

  2. JavaScript事件委托的技术原理

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  3. javascript事件委托机制详解

    以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...

  4. JavaScript 事件委托

    JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...

  5. javascript 事件委托,jq,js模拟事件

    <!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...

  6. Javascript事件委托

      事件委托利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件未使用事件委托之前: <!DOCTYPE html> <html> <head> &l ...

  7. javascript事件委托和jQuery事件绑定on、off 和one

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  8. javascript 事件委托 和jQuery事件绑定on、off 和one

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  9. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

随机推荐

  1. ARDUINO W5100 WebClient 测试

    基础工作:W5100扩展板插在ARDUINO上.用网线把W5100和自己家的路由器连接.插上网线能看到侧面网口指示灯变亮.路由器开启DHCP服务(一般都是开启的). 1.打开官方例程里面的Ethern ...

  2. 牛客练习赛13 B 幸运数字Ⅱ 【暴力】【二分】

    题目链接 https://www.nowcoder.com/acm/contest/70/B 思路 没有代码限制 先打表 打出 幸运数字的表 然后 二分查找 第一个 大于 r 的幸运数字 然后 往 L ...

  3. 牛客练习赛13 A 幸运数字Ⅰ 【暴力】

    题目链接 https://www.nowcoder.com/acm/contest/70/A 思路 暴力每一个子串 用 MAP 标记一下 然后 最后 遍历一遍 MAP 找出 出现次数最多 并且 字典序 ...

  4. PHP新写的大转盘抽奖源码

    中奖概率 抽奖大转盘演示:http://www.sucaihuo.com/php/3301.html function getRand($proArr, $proCount) { $result = ...

  5. hd acm 1465

    问题:某人写了n封信和n个信封,如果所有的信都装错了信封.求所有的信都装错信封,共有多少种不同情况. 思路:由这道题引入错排公式:f(n)=(n-1)*[f(n-1)+f(n-2)]. 当N=1和2时 ...

  6. POJ 1611并查集

    我发现以后写题要更细心,专心! #include<iostream>#include<algorithm>#include<stdio.h>#include< ...

  7. hadoop集群增加新节点

    上次hadoop集群一块数据盘报警, 提交工单后维修人员更换硬盘 服务器是dell r720的, 8盘位, 蛋疼的是这些硬盘都是做的单盘raid1,维修人员说必须关机导入硬盘才能正常使用 (服务器就这 ...

  8. HDU 4267 A Simple Problem with Integers(2012年长春网络赛A 多颗线段树+单点查询)

    以前似乎做过类似的不过当时完全不会.现在看到就有点思路了,开始还有洋洋得意得觉得自己有不小的进步了,结果思路错了...改了很久后测试数据过了还果断爆空间... 给你一串数字A,然后是两种操作: &qu ...

  9. css 采集下载

    软件应用范围: 看到喜欢的网页,另存为的话,并不能直接保存css中引用的图片. 那么就有了本软件的用武之地. 亮点:自动匹配文件内的相对路径.css内图片地址值md5保存,用来避免不同文件夹同名文件的 ...

  10. cocos2d-x在android真机上设置帧率无效的问题

    通过setAnimationInterval设置帧频时,发现在android下没有效果的 在Cocos2dxRenderer .java文件里面找到了onDrawFrame这个函数.里面有句注释 : ...