通用事件绑定方法

最新推荐文章于 2024-08-23 20:55:13 发布

王爷的大房子

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/vscss/p/7955270.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
body{
    margin: 100px;
}
</style>
</head>
<body>
<div id="box">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p id="p3">p3</p>
    <a href="http://baidu.com" id="a1">a1</a>
    <a href="http://baidu.com" id="a2">a2</a>
    <a href="http://baidu.com" id="a3">a3</a>
</div>
</body>
</html>

<script type="text/javascript">
var box = document.getElementById("box");
addEvent(box,"click","a",function(e){
    e.preventDefault();
    console.log(123);
});
var p2 = document.getElementById("p2");
addEvent(p2,"click",function(e){
    e.preventDefault();
    console.log(e.target);
});
function addEvent(el,type,selector,fn){
    if(fn==null){
        fn = selector;
        selector = null;
    }
    el.addEventListener(type,function(e){
        var target;
        if(selector){
            // 代理
            target = e.target;
            if(target.matches(selector)){
                fn.call(target,e)
            }
        } else {
            // 不代理
            fn(e);
        }
    });
}
</script>

转载于:https://www.cnblogs.com/vscss/p/7955270.html

王爷的大房子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通用事件绑定方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css">*{ margin: 0; padding...
复制链接

扫一扫