js中事件的绑定三种方法

最新推荐文章于 2024-04-16 19:44:59 发布

LiM .YOon A

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量305

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45716607/article/details/116206151

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

一、在DOM中直接绑定（ontType ）

两个特点：
1 兼容性非常好
2 如果调用两次，后面的回调会清除前面的回调
Type指的是事件的名字

<!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">
        div {
            width:100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <!-- 事件：如果某一件事情发生在了某一个元素身上以后，允许JS引擎自动的回调函数(Callback) -->
    <div id="the-d"></div>
    <script type="text/javascript">
    //          假定事件的名字时click

    var d=document.querySelector('#the-d'); 

    d.onclick=function(){
        console.log('我被点击了，clcik');
    }

    d.onclick=function(){
        console.log('我又被点击了，为什么要用又');
    }
      <script/>

二、JavaScript代码中直接绑定

在JavaScript中通过查找DOM对象，对其绑定，elementObject.οnclick=function(){} 的格式，举例如下：

<input type="button" value="点我呦"  id="demo">
<script type="text/javascript">

   document.getElementById("demo").onclick=function testAlert(){
      alert("hello world!");
   }
</script>

三、通过事件监听函数绑定

使用 attachEvent(IE方式) 和 addEventListenter(W3C方式) 的好处就是，可以多次的进行事件的绑定，不向原始的方法那样，前面绑定的事件将会被后面的绑定的事件所覆盖，最后只能执行后面所绑定的函数。
1 addEventListener(‘type’ function)
两个特点：
（1）如果调用两次，都有效
（2）IE8及以下不支持
2 attachEvent(‘onType’,function)
特点；
（1）chrome不支持
（2）在这不会调用，this->window

<!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">
        div {
            width:100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <!-- 事件：如果某一件事情发生在了某一个元素身上以后，允许JS引擎自动的回调函数(Callback) -->
    <div id="the-d"></div>
    <script type="text/javascript">
    //          假定事件的名字时click
    var d=document.querySelector('#the-d'); 
      //2 addEventListener('type' function)
    //  两个特点：1 如果调用两次，都有效
    //           2 IE8及以下不支持 
    
    d.addEventListener('click',function(){
            console.log('我被点击了，click');
    });

    d.addEventListener('click',function(){
            console.log('我又被点击了，为什么要用又呢？click');
    });


    //3 attachEvent('onType',function)
    //  特点； 1 chrome不支持
    //         2 在这不会调用，this->window
    
    // d.attachEvent('onclick',function(){
    //         console.log('我又被点击了');
    //         console.log(this);
    //     });


    //问题：是否可以写一个同时兼容IE和Chrome事件的函数？
    function divClick(){
            console.log('我又被点击了！');
    }

    // 兼容模式
    //addEvent函数自己写的
    function addEvent(element, type, func){
        //如果要判断一个对象是否有个成员函数，用这个方法
        if(element.addEventListener){
            element.addEventListener(type,func);
        }else if(element.attachEvent){
           //先变成加上on 变成ontype
            element.attachEvent('on'+type,function(){
                func.call(element);
            });
        }else {
            element['on'+type]=func;
        }
    }

    addEvent(d,'click',divClick);

    //我们希望通过原型的方式
    //对象，都有一个prototype原型对象,任何挂在这个对象上的函数，对象都可以

//     var obj=new Object();
//     console.log(Object.prototype);
//     Object.prototype.wangxiaozhang=function(){
//         console.log('wangxiaozhang says hello');
//     }

//    d.document('click',divClick);
    </script>
</body>
</html>