封装Js事件代理方法
// 封装事件代理
function delegateEvent(element, tag, event, listener) {
// 判断是否支持addEventlistener
if(element.addEventListener){
// 给父元素添加事件
element.addEventListener(event,function(e){
// 获取当前触发的元素
var target = e.target;
// 判断当前元素是否是我需要的
if(target.nodeName.toLowerCase()===tag){
listener(target);
}
})
}else{
// 兼容IE
element.attachEvent("on"+event,function(){
var target = window.event.srcElement;
if(target.nodeName.toLowerCase()===tag){
listener(target);
}
})
} }
var ul = document.getElementById("ul"); delegateEvent(ul,"li","mouseover",function(target){
target.style.backgroundColor = "red";
})
封装Js事件代理方法的更多相关文章
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS 事件代理
事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...
- js事件代理
需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385 一篇博客看懂 http://blog.csdn.net/maji ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件代理(委托)
JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...
- js事件的方法
事件的方法:onclick 鼠标单击ondblclick 鼠标双击onkeyup 按下并释放键盘上的一个键时触发 onchange 文本内容或 ...
- js事件绑定方法
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
- 关于JS事件冒泡与JS事件代理(事件委托)
连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...
- 【分享】 封装js操作textarea 方法集合(兼容很好)。
请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...
随机推荐
- Oracle数据库建表+添加数据练习
SQL脚本: --建表 --student表+注释 create table student( sno ) not null, sname ) not null, ssex ) not null, s ...
- RTX的api開發實例
RTX的api開發實例 最近接觸了RTX的接口開發部份,RTX其实有很多玩法,除了可以用自帶的客戶端發消息之外還可以用PHP調用API的方式來做一些事情,下邊整理了一下分享給大家 值得提醒的是这些接口 ...
- 在Windows下使用Nodist进行Node版本控制
完全卸载Node.js 首先卸载Node.js应用程序 确认在C:\Program Files中没有Nodejs目录 确认在C:\Program Files (x86)没有Nodejs目录 删除C:\ ...
- 【转】iOS超全开源框架、项目和学习资料汇总
iOS超全开源框架.项目和学习资料汇总(1)UI篇iOS超全开源框架.项目和学习资料汇总(2)动画篇iOS超全开源框架.项目和学习资料汇总(3)网络和Model篇iOS超全开源框架.项目和学习资料汇总 ...
- [算法导论]迪克斯特拉算法 @ Python
class Graph: def __init__(self): self.V = [] self.w = {} class Vertex: def __init__(self, x): self.k ...
- Linux下GCC和Makefile实例(从GCC的编译到Makefile的引入) 转
http://www.crazyant.net/2011/10/29/linux%E4%B8%8Bgcc%E5%92%8Cmakefile%E5%AE%9E%E4%BE%8B%EF%BC%88%E4% ...
- MVC使用基架添加控制器出现的错误:无法检索XXX的元数据
环境 vs2012 框架 mvc3 数据库 sqlservercompact4.0 出现的错误如下: “ ---------------------------Microsoft Visual St ...
- 使用Microsoft.Office.Interop.Excel.Application xlApp 生成Excel
object filePath = @"C:\" + DateTime.Now.ToShortDateString().Replace("-", "& ...
- 无法import的原因(ImportError: No module named *****)
python中,每个py文件被称之为模块,每个具有__init__.py文件的目录被称为包.只要模块或者包所在的目录在sys.path中,就可以使用import 模块或import 包来使用. 如果想 ...
- WCF实例上下文模式与并发模式对性能的影响
实例上下文模式 InstanceContextMode 控制在响应客户端调用时,如何分配服务实例.InstanceContextMode 可以设置为以下值: •Single – 为所有客户端调用分配一 ...