// 封装事件代理

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. Leetcode 111 Minimum Depth of Binary Tree 二叉树

    找出最短的从叶子到根的路径长 可以回忆Maximum Depth of Binary Tree的写法,只不过在!root,我把它改成了10000000,还有max函数改成了min函数,最后的值如果是1 ...

  2. MySQL基础操作(一)

    1. 连接数据库mysql -h localhost -u root -p 123456 2. 查看数据库版本select version(); 3. 查看数据库支持的存储引擎和当前默认存储引擎sho ...

  3. iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式

    iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...

  4. Android音频介绍

    这个世界音频设备千变万化,Android也不可能为每种设备都提供支持.Android定义了一个框架,这个框架来适配底层的音频设备.该适配层的定义位于: hardware/libhardware_leg ...

  5. Undokumentierte @Formeln/LotusScript im Lotus Notes Client/Server

    Erstellung von Replik-IDs mittels @Text-Funktion@Text( @Now; "*" )Source NoPersist option ...

  6. Andriod读取XML问题

    终于搞明白了,Andriod读取资源只能在asserts文件夹下或者scard上,其他地方是不行的. 文件加在XML后,就可以读了. 一句话就搞定了: InputStream istr = getAs ...

  7. mysql 关键字 字段 转义

    insert into tb_gps(imei,lat,lon,speed,dir,alt,atom,`signal`,batt,intime) values('46345435435345','22 ...

  8. 删除数据报ORA-00600: internal error code, arguments: [ktbesc_plugged]

    Oracle在删除数据是以下错误: ORA-00600: internal error code, arguments: [ktbesc_plugged], [], [], [], [], [], [ ...

  9. Android开发贴士集合

    Activity.startActivities()——对于从app流的中部启动会非常好. TextUtils.isEmpty()——一个普遍适用的简单工具类. Html.fromHtml()——格式 ...

  10. WPF TextBlock 绑定 换行

    最近有个小需求 需要在textblock中换行 其实textblock换行有很多写法,比如: Xaml: <TextBlock Text="AAAAA BBBBB" /> ...