javaScript绑定事件委托 demo
事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存， 而且不是每个事件都会被 点击执行。
由此 事件委托 可以优化事件绑定行为、。
事件逐层冒泡 直到被父级元素捕获。 事件代理 给外层元素绑定一个处理事件， 就可以处理子元素上出发所有事件。
DOM 标准 事件三个阶段：
捕获
到达目标、
冒泡
IE 不支持捕获， 但冒泡够用了。
event.currentTarget 事件处理程序当前正在处理事件的那个元素
event.target 事件真正的目标
event.type 出发事件类型 // click mouseover mouseout
this 始终等于currentTarget, 而 target 则只包含事件的 实际目标
var btn = document.getElementById('myBtn');
btn.onclick = function ( event ) {
alert( event.currentTarget === this ); //true
alert( event.target == this ); // true
}
//如果事件处理程序 存在 按钮的父节点中 这些值 不同
document.body.onclick = function ( event ) {
alert( event.currentTarget === document.body ); // true;
alert( this === document.body );// true
alert( event.target === document.getElementById( 'myBtn') ); //true;
}
例如：
<body>
<div> <a href="">btn</a></div>
<div> <a href="" id="doSomething">btn</a></div>
<div> <a href="" id="goWhere">btn</a></div>
</body>
-----------------------------------------------
document.getElementByTagName('body').onclick = function (e) {
//浏览器 target
e = e || window.event;
var target = e.target || e.srcElement;
if ( target.nodeName !== 'A'){ return; }
if (target.id == 'doSomething') {
alert('doSomething');
} else if (target.id == 'goWhere') {
alert('goWhere');
} else {
alert('other A click');
}
if (typeof e.preventDefault === 'function') {
e.preventDefault();
e.stopPropagation();
} else {
e.returnValue = false;//IE 默认true false 取消事件的默认行为
e.cancelBubble = true;//IE 默认false, 但设置true 可以取消事件冒泡
}
}
javaScript绑定事件委托 demo的更多相关文章
- JavaScript绑定事件的方法[3种]
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HT ...
- javascript使用事件委托
事件委托是javascript中一个很重要的概念,其基本思路就是利用了事件冒泡的机制,给上级(父级)元素触发事件的dom对象上绑定一个处理函数.在当有需要很多dom对象要绑定事件的情况下,可以使用事件 ...
- JavaScript / JQuery事件委托如何实现？
一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...
- JavaScript之事件委托（附原生js和jQuery代码）
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- JavaScript中事件委托(事件代理)详解
在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...
- JavaScript, JQuery事件委托
1.引言 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工 ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- day51—JavaScript绑定事件
转换学开发,代码100天——2018-05-06 今天学习JavaScript的绑定事件.因为浏览器的原因绑定事件需要考虑兼容性问题. attachEvent IE浏览器 ,ie9以上事件执行 ...
- Javascript的事件委托
在谈js的事件委托之前,先来简单说说js事件的一些基础知识吧. 什么是事件?Javascipt与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器中发生的一些特定的交互瞬间. 什么是事件流?事 ...
随机推荐
- Salesforce的Auto Number
在Salesforce中新建Object的时候,可以对Name选择Auto Number,即自动编号.如果没有仔细阅读说明的话,会有一个很容易让人迷惑的地方. 在选择时候,Salesforce提供的示 ...
- java_JDBC字段对应
地址: http://otndnld.oracle.co.jp/document/products/oracle10g/102/doc_cd/java.102/B19275-03/datacc.htm ...
- Surface Dial 与 Windows Wheel UWP应用开发
随着微软发布 Surface Studio 在演示视频中非常抢眼的一个配件就是 Surface Dial,Dial 是Windows输入设备大家庭中的新成员我们把它归类为Windows Wheel 类 ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- java udp (使用类调用双通信)1
项目需要就使用了UDP通信,做了java的双方通信,其实代码还是来自之前的udp学习代码,自己加了注释,并且优化的使用类来封装关于通信类库的使用代码 目的是为了在安卓项目中使用时,可以通过实例化,调用 ...
- 用手机或外部设备在同一局域网下访问虚拟主机wampsever的方法版本号是2.4.9
1,首先在虚拟服务器电脑上可以打开http://localhost/ 2,在外部设备访问时报错为:You don't have permission to access / in on this se ...
- java集合框架02——Collection架构与源码分析
Collection是一个接口,它主要的两个分支是List和Set.如下图所示: List和Set都是接口,它们继承与Collection.List是有序的队列,可以用重复的元素:而Set是数学概念中 ...
- asp.net MVC4总结
MVC4构建例子 新建MVC4项目 在项目工程下面的App_Data文件夹下面添加新建项->数据-> Sql server 数据库文件Movies.mdf 新建movies.cs模型类 ...
- MASMPlus编译出错：error LNK2001: unresolved external symbol _WinMainCRTStartup
初学汇编,感觉很多不懂.不过那也是,如果懂了的话就不用学了,从无到有学习一门编程语言果然不是那么容易的一件事. 学习汇编总得要有一款汇编软件才行,没理由只是使用Windows自带的DEBUG.于是上了 ...
- 包装一个php的验证码类
验证码是我们开发的时候经验到的功能,所以在此本人包装了一个验证码类,应该可以作为php的类插件用,在此分享给各位博客园的读友. 实现的原理也是很简单,就是利用画布的几个元素,再加上一些字符串的获取,东 ...