封装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";
})
时间: 2024-10-10 16:25:14

封装Js事件代理方法的相关文章

简述:js事件代理的7种方法

以为buttton元素绑定单击事件,来探讨事件绑定的几种方式: 1.最原始的方法:在button元素里面添加onclick事件,代码如下: <button onclick=function(){}></button> 这种方法虽然使用简单,但是有一个缺点就是:页面显示和事件处理混在一起,不符合网页开发设计的理念. 2.事件监听(addEventListener) 获取button元素,绑定事件监听 .addEventListener('click',fn,[true/false])

js事件代理理解

说到事件代理,首先得知道js的事件冒泡机制. 事件冒泡是指在一个dom节点触发一个事件比如onclick事件以后,这个事件会继续往节点的父节点传递,若父节点也绑定了onclick事件,则同样会触发父节点的onclick事件,然后继续往父节点的父节点传递....由内层往外层传递. 事件代理就是利用了事件冒泡机制,将一个节点的事件处理,交给它的父级去处理.举个栗子:若为多个li标签绑定事件. 1.一般的事件绑定方法: 1 <ul id="list"> 2 <li>1

js事件代理

事件代理: html代码: <ul id="ul1"> <li><a>目标1</a></li> <li><a>目标2</a></li> </ul> js代码: var ul1=document.getElementById("ul1");ul2.addEventListener('click',function(e){ var e=e||windo

js事件代理(委托)

JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前一直用各种js库的事件代理,如 jQuery,非常方便实用.今天尝试用原生 js 实现该功能. 1 var addEvent = (function () { 2 if (document.addEventListener) { 3 return function (element, type, h

Js - 事件代理

事件代理是利用了事件冒泡,制定一个事件处理程序,就可以管理某一类的所有事件.例如,click事件会一直冒泡到document层次(就是不断地向父元素传递至最上层的document).就是说可以为整个页面指定一个onclick事件处理程序,而不必单个元素分别添加处理程序. <ul id="ul1"> <li >item1</li> <li >item2</li> <li >item3</li> </

js事件代理(事件委托)最简单的理解

1事件代理:当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 例如:点击按钮删除对应的条目. 如果给每一个按钮添加事件,极为繁琐,这时候需要用到事件代理. 事件代理是基于浏览器的事件冒泡机制. 下面是对应的代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <

js事件技巧方法整合

(function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveTo(0,0);//设置浏览器位置 })() screen.availHeight;//显示屏最高高度 screen.availWidth;//显示屏最宽宽度 /*窗口改变大小 事件*/ //js window.onresize = function() { if(resizeTimer==null) { resizeTimer = setTimeout("doResize()",300);

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

请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari.兼容没问题. 注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. var TT = { /* * 获取光标位置 * @Method g

浅谈事件代理

1.什么是事件代理 意思:代理.委托.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 2.运用场景 当子元素被频繁添加或者删除时,给子元素绑定事件,需要在每次添加或者删除时重新绑定,这就造成了非常不方便,那么此时此刻:事件代理,能帮你轻松解决这个麻烦的问题. 3.下面是我实现的一个简单的事件代理方法 1 /** 2 * 事件处理对象 3 * @type {{addHandler: addHa