事件的绑定 

<!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>
        window.onload=function(){

            /* 
                点击按钮以后弹出一个内容
            */
            // 获取按钮对象
            var btn01=document.getElementById("btn01");

            /* 
                使用 对象.事件=函数的i形式绑定响应函数，
                它只能同时为一个元素的一个事件绑定一个响应函数，
                不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
            */

            // 为btn01绑定一个单击响应函数
           /*  btn01.onclick=function(){
                alert(1);
            }; */
            // 为btn01绑定第二个单击响应函数
           /*  btn01.onclick=function(){
                alert(2);
            };
 */

            /* 
                addEventListener()
                 -通过这个方法也可以先为元素绑定响应函数
                 -参数：
                    1.事件的字符串，不要on 
                    2.回调函数，当事件触发时该函数会被调用
                    3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

                使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
                这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

                这个方法不支持IE8及以下的浏览器
            */
          /*  btn01.addEventListener("click",function(){
               alert(1);
           },false);
           btn01.addEventListener("click",function(){
               alert(2);
           },false);
           btn01.addEventListener("click",function(){
               alert(3);
           },false); */
           
           /* 
           attachEvent()
                -在IE8中可以使用attachEvent()来绑定事件
                -参数：
                    1.事件的字符串，要on
                    2.回调函数

                -这个方法也可以同时为一个事件绑定多个处理函数，
                不同是它是后绑定先执行，执行顺序和addEventListener()相反
           */
            /*btn01.attachEvent("onclick",function(){
               alert(1);
           });
           btn01.attachEvent("onclick",function(){
               alert(2);
           });
           btn01.attachEvent("onclick",function(){
               alert(3);
           }); */
           /* btn01.addEventListener("click",function(){
               alert(this);
           },false); */
           /* btn01.attachEvent("onclick",function(){
               alert(this); 
                });*/
            bind(btn01,"click",function(){
                alert(1);
            })
            };
        // 定义一个函数，用来为指定元素绑定响应函数
        /* 
         addEventListener()中的this，是绑定事件的对象
         attachEvent()中的this，是window
         需要统一两个方法this
        */
        /* 
           参数：
           obj 要绑定事件的对象
           eventStr 事件的字符串
           callback 回调函数
        */

        function bind(obj,eventStr,callback){
            if(obj.addEventListener){
            // 大部分浏览器兼容的方式
            obj.addEventListener(eventStr,callback,false);
            }else{
            // IE8及以下
            obj.attachEvent("on"+eventStr,callback);

                
            }


        }
        
    </script>
</head>
<body>
    

    <button id="btn01">点我一下</button>
</body>
</html>

 

 

 

posted @ 2020-12-21 09:42  Hhhr  阅读(80)  评论(0)    收藏  举报