javascript 原生实现 jquery live/delegate

最新推荐文章于 2020-04-21 15:33:37 发布

kongjiea

最新推荐文章于 2020-04-21 15:33:37 发布

阅读量2.3k

点赞数

分类专栏：常用js函数 javascript 文章标签： js事件委托

javascript 同时被 2 个专栏收录

87 篇文章 2 订阅

订阅专栏

常用js函数

24 篇文章 0 订阅

订阅专栏

原理：都是利事件冒泡实现事件委派

　　　live方法是固定把事件都绑定在了document上，而delegate 把事件绑定了提供的父元素上

　　　delegate减少了冒泡次数，效率会更高些

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<div id="container">
    <input type="button" id="btn" class="listener" value="button"  />
</div>
<a href="###" id="btnadd" class="listener">添加一个按钮</a>

</body>
</html>
<script>

window.onload = function(){

    /**
    @para parentId 包裹容器的id
    @para selector 容器内元素的选择器，支持id和className
    @para fn 元素上要执行的函数
    */
    function delegate(parent, eventType, selector, fn)
    {
        //参数处理
        if(typeof parent === 'string')
        {
            var parent = document.getElementById(parent);
            !parent && alert('parent not found');
        }

        if(typeof selector !== 'string')
        {
            alert('selector is not string');
        }
        
        if(typeof fn !== 'function')
        {
             alert('fn is not function');
        }
        
        function handle(e){
            //获取event对象
            //标准DOM方法事件处理函数第一个参数是event对象
            //IE可以使用全局变量window.event
            var evt = window.event ? window.event : e;
        
            //获取触发事件的原始事件源
            //标准DOM方法是用target获取当前事件源
            //IE使用evt.srcElement获取事件源
            var target = evt.target || evt.srcElement;
        
            //获取当前正在处理的事件源
            //标准DOM方法是用currentTarget获取当前事件源
            //IE中的this指向当前处理的事件源
            var currentTarget= e ? e.currentTarget : this;
        
            //在IE 9下  window.event 与 e 不同 evt没有currentTarget属性,e才有currentTarg 
            alert("src id==="+target.id+"\n\ncurent target id=="+currentTarget.id);

            if(target.id === selector || target.className.indexOf(selector) != -1){
                fn.call(target);
            }
        }
        
        parent[eventType]=handle;
    }
    
    delegate('container', 'onclick', 'listener', function(){
        alert(this);    
    });
    
    //新增一个元素
    document.getElementById("btnadd").οnclick=function(){
        var btn = document.createElement("input");
        btn.setAttribute("value","点击我试试");
        btn.setAttribute("type","button");
        btn.setAttribute("id","newbutton");
        btn.className =  'class="listener"';
        
        //没有监听新按钮的onclick事件
        document.getElementById("container").appendChild(btn);
    }
}

</script>