关于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事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
随机推荐
- Redis持久化——问题定位与优化(三)
核心知识点: 1.fork操作 a.在RDB或AOF重写时,会执行fork操作创建子进程,fork操作是一个重量级操作. b.改善fork操作耗时的手段:避免使用Xen.配置Redis实例最大使用内存 ...
- ubuntu vim退出时出错
E505: "vimrc" is read-only (add ! to override) wq退出时加!强制保存退出 "vimrc" E212: Can't ...
- Spring MVC 通过反射将数据导出到excel
直接上代码 // 导出excel方法 @RequestMapping("exportExcel") public void exportExcel(HttpServletReque ...
- [GUI] QT事件与X11的关系
做了一段时间linux下与QT事件相关的工作,经常会遇到X11,总是苦于无法完全理解其与linux以及QT事件之间的关系,所以用两篇文章来简单总结下linux中的图形管理和QT事件与X11的关系. & ...
- 【Flask模板】宏的概念和基本使用
# 宏:模板中的宏跟python中的函数类似,可以传递参数,但是不能有返回值,可以将一些经常用到的代码片段放到宏中,然后把一些不固定的值抽取出来当成一个变量.使用宏的时候,参数可以为默认值.相关示例代 ...
- vim打开多个文件方式及操作
格式如下: #vim file*.txt 或者 #vim file file2 file3 查看当前编程的是那个文件,在冒号命令行下 :args 命令,类似:file [file2],以中括号里面为当 ...
- IntelliJ IDEA Sringboot 项目部署到外部Tomcat服务器
<packaging>war</packaging> 添加依赖 <dependency> <groupId>org.springframework.bo ...
- linux shell编程(三) if 和 for
if 条件判断: 单分支的if语句if 判断条件: then statement1fi双分支的if语句if 判断条件;then statement1 statementelse statement3f ...
- matlab画折线
figure(721);hold on;x=1:1:5;%x轴上的数据,第一个值代表数据开始,第二个值代表间隔,第三个值代表终止 a=[203.024,113.857,256.259,244.888, ...
- 修改myEclipse2014web项目名称
重命名项目名称后 右键点击你的项目,然后选择属性---->然后点击myeclipse—>Project Facets—> web 选项,修改web context-root名称为你要 ...