事件绑定与移除

js中事件绑定

1. 在元素标签中绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id='div1' onclick="fn()"></div>
    <script type="text/javascript">
        function fn() {
            console.log(111);  // 111
        }
    </script>
</body>
</html>

2. 通过onxxx()绑定事件：这种方式绑定的事件，同一个元素的同一种事件多次绑定，后面的事件会覆盖前面的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id='div1'></div>
    <script type="text/javascript">
        var obj = document.getElementById("div1");
        obj.onclick = function() {
            console.log(11);
        };
        obj.onclick = function() {
            console.log(22);
        };

        // 只会输入22

        // 移除事件 obj.onclick = null
    </script>
</body>
</html>

 

3. obj.addEventListener()绑定事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id='div1'></div>
    <script type="text/javascript">
        // addEventListener方法在ie8及以下不支持，ie8中可以使用attachEvent()
        /*
         * 事件注册兼容写法，参数如下：
         *  ele：dom元素
         *  type：事件类型
         *  fn：处理函数
         */ 
        function addEvent(ele, type, fn) {
            if(ele.addEventListener) {
                ele.addEventListener(type, fn, false);
            }else {
                ele.attachEvent('on' + type, fn);
            }
        }

        var obj = document.getElementById("div1");
        addEvent(obj, 'click', function() {
            console.log(222);
        })

        // 移除事件
        // addEventListener --> removeEventListener
        // attachEvent --> detachEvent
    </script>
</body>
</html>

jquery中事件绑定

1. on()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 {
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id='div1'>
        <span id="span1">hello world</span>
        <span id="span2">hello world</span>
    </div>
    <script type="text/javascript">
        /*
         * 语法：$(selector).on(event,childSelector,data,function)
         * 参数如下：
         *  event：事件类型
         *  childSelector： 可选，绑定到指定子元素
         *  data： 传入到函数的额外参数
         *  function：处理函数
         */
        $('#div1').on('click', '#span1', function() {
            console.log(111)
        })

        // 移除事件 off()
    </script>
</body>
</html>

 

posted @ 2020-03-14 17:02  孟冰er  阅读(190)  评论(0)  编辑  收藏  举报