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之间的交互是通过事件实现的.事件,就是文档或浏览器中发生的一些特定的交互瞬间. 什么是事件流?事 ...
随机推荐
- MaltReport2：基于 OpenDocument/OpenOfficeXML 的报表引擎
MaltReport 是我几年前写的开源单据.报表引擎,最近进行了较大的更新,尤其是几年来在生产项目中应用取得了非常好的效果,特别写篇介绍文字给大家分享一下. 首先先介绍几个名词: OpenDocum ...
- 免越狱tweak应用逆向开发
对于已越狱的设备,系统默认安装了mobilesubstrate动态库,提供一个系统级的入侵管道,所有的tweak都可以依赖它来进行开发.而对于没有越狱的手机,我们需要向目标app注入libsubstr ...
- Mac和Linux系统的：Arp欺骗源码
linux系统, 简化版的ARP欺骗工具 精简版, 没有很多代码, 只要把准备好的数据, 发送给到网卡接口, 利用这个工具, 可以让局域网内的一台计算机暂时掉线: #include <stdio ...
- uml视频系列（二）——uml的概述
在与uml进行了第一次的接触后,就被uml的博学多才给迷住了,uml居然可以做这么多的东西.才思敏捷的uml是设计软件的好帮手. 你还在为自己的类图不会设计而感到无助吗?你还在为你的对象不好确定而感到 ...
- swift 运算符快速学习（建议懂ＯＣ或者Ｃ语言的伙伴学习参考）
昨晚看了swift 的运算符的知识点,先大概说一下,这个点和 c 或者oc 的算运符知识点一样,都是最基础最基础的.其他的最基本的加减乘除就不多说了.注意的有几点点..先说求余数运算: 一 :求余数运 ...
- 基于canvas和jsp的头像剪辑上传
最近在做项目时候需要一个头像长传功能,但是现在照片动不动就几兆的,都是流量的浪费. 我只是简单想要上传一个头像而已... 经过几天发愤图强..总算是略有所获.. 基本思路: 1.html部分,图片剪辑 ...
- 用《内网穿山甲》把本地IIS中的站点共享到远程访问
前言: 因为各种原因,我们常常要把本机或局域网中搭建的站点发给远方的人访问,他有可能是测试人员.客户.前端.或领导演示,或是内部系统内部论坛临时需要在远程访问,事件变得很麻烦,要么有公网IP,要么能控 ...
- iOS详解MMDrawerController抽屉效果(一)
提前说好,本文绝对不是教你如何使用MMDrawerController这个第三方库,因为那太多人写了 ,也太简单了.这篇文章主要带你分析MMDrawerController是怎么实现抽屉效果,明白 ...
- javascript名字由来
javascript是由web发展初期的网景(Netscape)公司创建的,javascript是Sun Microsystem 公司(Oracle)的注册商标,用来特指网景(现在的Mozilla)对 ...
- android shell常用命令
du -sm foldername 查看文件夹foldername 的大小,单位是兆(m),du -sk foldername单位是k adb shell rm -r /mnt/sdcard/ ...