// 封装事件代理

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事件代理方法的更多相关文章

  1. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  2. JS 事件代理

    事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...

  3. js事件代理

    需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385 一篇博客看懂  http://blog.csdn.net/maji ...

  4. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  5. js事件代理(委托)

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...

  6. js事件的方法

    事件的方法:onclick         鼠标单击ondblclick       鼠标双击onkeyup         按下并释放键盘上的一个键时触发 onchange        文本内容或 ...

  7. js事件绑定方法

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  8. 关于JS事件冒泡与JS事件代理(事件委托)

    连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...

  9. 【分享】 封装js操作textarea 方法集合(兼容很好)。

    请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下.         在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...

随机推荐

  1. O2O已死?不!美团点评们迎来新风口

    当年的千团大战,巅峰时期曾涌入了5000多家团购网站,刘旷本人也参与了此次团购大战.而就在当时很多人都唱衰团购的时候,美团和大众点评却最终脱颖而出,市值一路飙升,人人网旗下的糯米网因为卖给了百度,也得 ...

  2. JQ属性和css部分测试

    1.attr(name|properties|key,value|fn)  设置或返回被选元素的属性值. <div class="attr">设置或返回被选元素的属性值 ...

  3. asynchttpClient框架关于多文件批量上传的问题,改用xUtil

    RequestParams params = new RequestParams(); params.add("ordernum",ordernum); params.add(&q ...

  4. Android WebView Memory Leak WebView内存泄漏

    在这次开发过程中,需要用到webview展示一些界面,但是加载的页面如果有很多图片就会发现内存占用暴涨,并且在退出该界面后,即使在包含该webview的Activity的destroy()方法中,使用 ...

  5. Android SDK 国内镜像

    东软信息学院的 Android SDK 镜像,比配置代理下载快多了. 配置地址, http://mirrors.neusoft.edu.cn/configurations.we#android 启动 ...

  6. Dalvik VM (DVM) 与Java VM (JVM)之间有哪些区别?

    Dalvik虚拟机存在于Android系统,JVM是java虚拟机,两者都是虚拟机,本文就对两者进行比较,讲述它们的不同. Dalvik虚拟机是Google等厂商合作开发的Android移动设备平台的 ...

  7. quick -- 创建精灵和动作

    local imgBg = display.newSprite("666666.jpg") :pos(display.cx, display.cy) :addTo(self) , ...

  8. IE6实现图片或背景的圆角效果

    使用ie-css3.htc实现背景圆角效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  9. Redmine性能优化方案

    近来公司redmine服务器表现很糟糕,在16核,64GRAM的机器上,压测结果竟然只有每秒5~7个请求,部分页面一个都出不来. 以下是我对Redmine性能优化方案: redmine服务器性能问题排 ...

  10. Python: 无参数的函数装饰器

    写带参数的函数装饰器最纠结的是需要包好多层,最外层是接收参数的函数,它返回一个接收函数的的函数.但这样有个问题是,最终包装出来的装饰器必须加()调用一下,即使没有参数也需要这样做,因为调用这个最外层函 ...