js事件委托

最新推荐文章于 2025-05-05 00:30:00 发布

转载最新推荐文章于 2025-05-05 00:30:00 发布 · 187 阅读

29 篇文章

订阅专栏

<!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>


        /**
         @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;
                console.log(evt)

                //获取触发事件的原始事件源
                //标准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(){
            console.log(this)
        });

        //新增一个元素
        document.getElementById("btnadd").onclick=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>