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之间的交互是通过事件实现的.事件,就是文档或浏览器中发生的一些特定的交互瞬间. 什么是事件流?事 ...
随机推荐
- WinForm 文件操作
文件及文件夹操作 C/S:WinForm可以操作客户端文件 Client ServerB/S:浏览器服务 Brower Server 命名空间:using system .IO; 1. File类:文 ...
- 蓝桥网试题 java 基础练习 特殊回文数
------------------------------------------------------------------------------------- 简单点,对话的方式简单点 有 ...
- JavaScript嗅探执行神器-sniffer.js，你值得拥有！
一.热身--先看实战代码 a.js 文件 // 定义Wall及内部方法 ;(function(window, FUNC, undefined){ var name = 'wall'; Wall.say ...
- iOS 开发之Block
iOS 开发之Block 一:什么是Block.Block的作用 UI开发和网络常见功能的实现回调,按钮事件的处理方法是回调方法. 1. 按钮事件 target action 机制. 它是将一 ...
- PLSQL游标使用
游标是一个指针,它指向一块SQL区域,该区域用于存储处理过来的SELECT或者其他的DML操作返回的数据.由PLSQL创建并管理的游标成为隐式游标,用户创建并管理的成为显示游标.游标可以看做是指向记录 ...
- 【安装eclipse, 配置java环境教程】 编写第一个java程序
写java通常用eclipse编写,还有一款编辑器比较流行叫IJ.这里我们只说下eclipse编写java的前期工作. 在安装eclipse之前要下载java的sdk文件,即java SE:否则无法运 ...
- APC注入
0X01 注入原理 当线程被唤醒时APC中的注册函数会被执行的机制,并依此去调用我们的DLL加载代码,进而完成注入的目的 具体的流程: 1 当EXE里的某个线程执行到sleepEX(),或者waitF ...
- PAT---完美数列
由于数值比较大,选用long型的 先用快速排序方法对数组进行排序,然后进行查找. 用一个问题是所要查找的数可能不在数组中,因此不能用现成的二叉查找法.试着对二叉查找法进行改进,单没调通. 在查找过程中 ...
- MegCup 2017 极客挑战赛 初赛试题
看着像八卦,数数不是八卦,是29卦 每卦又有29个小弧 所以是29×29个bit 这29×29个bit怎么理解呢?并且从哪一卦开始到哪一卦结束?是先环向层层向里走还是先径向逐卦走? 我想不出来. 我猜 ...
- xcode升级到8.1
一.JPush集成: 1. xcode7在iOS10以上的真机上运行接收不到通知的问题,把xcode升级到8.1,在build phases -> link binary with librar ...