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

关于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. Redis持久化——问题定位与优化(三)

    核心知识点: 1.fork操作 a.在RDB或AOF重写时,会执行fork操作创建子进程,fork操作是一个重量级操作. b.改善fork操作耗时的手段:避免使用Xen.配置Redis实例最大使用内存 ...

  2. ubuntu vim退出时出错

    E505: "vimrc" is read-only (add ! to override) wq退出时加!强制保存退出 "vimrc" E212: Can't ...

  3. Spring MVC 通过反射将数据导出到excel

    直接上代码 // 导出excel方法 @RequestMapping("exportExcel") public void exportExcel(HttpServletReque ...

  4. [GUI] QT事件与X11的关系

    做了一段时间linux下与QT事件相关的工作,经常会遇到X11,总是苦于无法完全理解其与linux以及QT事件之间的关系,所以用两篇文章来简单总结下linux中的图形管理和QT事件与X11的关系. & ...

  5. 【Flask模板】宏的概念和基本使用

    # 宏:模板中的宏跟python中的函数类似,可以传递参数,但是不能有返回值,可以将一些经常用到的代码片段放到宏中,然后把一些不固定的值抽取出来当成一个变量.使用宏的时候,参数可以为默认值.相关示例代 ...

  6. vim打开多个文件方式及操作

    格式如下: #vim file*.txt 或者 #vim file file2 file3 查看当前编程的是那个文件,在冒号命令行下 :args 命令,类似:file [file2],以中括号里面为当 ...

  7. IntelliJ IDEA Sringboot 项目部署到外部Tomcat服务器

    <packaging>war</packaging> 添加依赖 <dependency> <groupId>org.springframework.bo ...

  8. linux shell编程(三) if 和 for

    if 条件判断: 单分支的if语句if 判断条件: then statement1fi双分支的if语句if 判断条件;then statement1 statementelse statement3f ...

  9. matlab画折线

    figure(721);hold on;x=1:1:5;%x轴上的数据,第一个值代表数据开始,第二个值代表间隔,第三个值代表终止 a=[203.024,113.857,256.259,244.888, ...

  10. 修改myEclipse2014web项目名称

    重命名项目名称后 右键点击你的项目,然后选择属性---->然后点击myeclipse—>Project Facets—> web 选项,修改web context-root名称为你要 ...