js自定义事件

最新推荐文章于 2023-06-05 18:08:09 发布

vcxiaohan2

最新推荐文章于 2023-06-05 18:08:09 发布

阅读量288

点赞数

分类专栏：原生javascript

本文链接：https://blog.csdn.net/u011500781/article/details/52177209

版权

原生javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <link rel="shortcut icon" href="images/send.png" type="/image/x-icon">
    <script src="js/jquery-1.11.3.min.js"></script>
    <title>test</title>

    <style>
        * {
            margin: 0; 
            padding: 0;
            font-size: 0.04rem;
        }
        body, html {
            width: 100%;
            height: 100%;
        }
        div {
            position: absolute;
            padding: 10px;
            border: 5px solid red;
            background: green;
        }
        .a {
            width: 80px;
            height: 100px;
            left: 50px;
            top: 100px;
        }
        .b {
            width: 40px;
            height: 60px;
            left: 150px;
            top: 100px;
        }
        .c {
            width: 40px;
            height: 60px;
            left: 10px;
            top: 140px;
        }
        
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>

<script>
    ;$(function() {
        var a = document.querySelector('.a');
        var b = document.querySelector('.b');
        bindEvent(a, 'click', function() {
            console.log(1);
        });

        bindEvent(b, 'self', function() {
            console.log(2);
        });
        bindEvent(b, 'self', function() {
            console.log(3);
        });

        bindEvent(b, 'click', function() {
            fireEvent(b, 'self');
        });


        //绑定事件
        function bindEvent(obj, event, fn) {
            //自定义事件
            obj.listener = obj.listener || {};
            obj.listener[event] = obj.listener[event] || [];
            obj.listener[event].push(fn);

            if(obj.addEventListener) {
                obj.addEventListener(event, fn);
            }else {
                obj.attachEvent('on'+ event, fn);
            }
        }

        //触发自定义事件
        function fireEvent(obj, event) {
            for(var i=0,len=obj.listener[event].length; i<len; i++) {
                obj.listener[event][i]();
            }
        }

        
        
    });
</script>
</body>
</html>