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之间的交互是通过事件实现的.事件,就是文档或浏览器中发生的一些特定的交互瞬间. 什么是事件流?事 ...
随机推荐
- C# out的使用 函数例题
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- .Net程序员学用Oracle系列(16)：访问数据库(ODP.NET)
1..Net for Oracle 常见数据库驱动 1.1.微软提供的驱动 1.2.甲骨文提供的驱动 1.3.其它厂商提供的驱动 2.ODP.NET 常见问题分析 2.1.参数化问题 2.2.方法调用 ...
- [Netty] - Netty IN ACTION(导言)
最近没什么事儿做,刚好看到有需要网络编程的知识,java中有NIO和IO两种不同的方式,但是NIO的编写比较麻烦,刚好找到一个成熟的网络框架Netty.接下来的一个月就准备将Netty IN ACTI ...
- Linux系统（一）文件系统、压缩、打包操作总结
序言 当前的形势,.Net已经开源,.Net Core 正在跨平台,可见微软巨人在努力,在改变,在进步,在走向春天.从前被微软供作上帝的.Net从业者,如果不打开心扉面向开源,改变自己,那么很可能在不 ...
- iptables禁止ping入
iptables禁止ping入 以下设置将允许自己往外ping 不允许别人ping自己 vi /etc/sysconfig/iptables 加入如下2条规则 -A INPUT -p icmp --i ...
- Java中abstract和interface的区别
abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的面向对象能力. abstract class和inte ...
- JS实例——间歇循环滚动
间歇滚动:滚动一行后,延迟2秒后继续滚动 具体实现代码如下: <!doctype html> <html lang="en"> <head> & ...
- [多线程] Web 项目中，少有涉及到的一次多线程编程的经验
如今框架横行,Spring 已经是非常成熟的容器体系,我们在日常开发 JavaWeb 的工作中,大多已经不需要考虑多线程的问题,这些问题都已经在Spring容器中实现,框架的意义就是让程序员们可以专注 ...
- EFcore与动态模型（二）
上篇文章中介绍了如何使用ef进行动态类型的管理,比如我们定义了ShopDbContext并且注册了动态模型信息,下面的代码实现了动态信息的增加: Type modelType = IRuntimeMo ...
- eclipse不能写入classpath
问题 更改工程的Build Path,出现如下问题: Could not write file: G:\Java\myJavaPro\EJBEntityBean\.classpath. G:\ ...