欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

事件的绑定

程序员文章站 2022-06-16 21:23:05
事件的绑定 ~~~javascript btn01 ~~~ ......

事件的绑定

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var btn01=document.getelementbyid("btn01");
                /*
                使用对象.事件=函数 的形式绑定响应函数
                她只能同时为一个元素的一个事件绑定一个响应事件
                */
                // btn01.onclick=function(){
                //  alert("123");
                // }
                // addeventlistener();  通过这个方法  也可以为元素绑定事件
                /*
                  参数
                     1.事件的字符串，不要on
                     2.回掉函数，当事件触发时该函数会被调用
                     3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
                     
                */
               // btn01.addeventlistener("click",function(){alert(1);},false);
               // btn01.addeventlistener("click",function(){alert(2);},false);
               
               /*
               attachecent()
                 - 在ie8中可以使用attachevent()来绑定事件
                 - 参数
                   1.事件的字符串，要on
                   2.回调函数
                   
                   可以同时为一个事件绑定多个处理函数
                      不同的是他是后绑定先执行，执行顺序和addeventlistener()相反
               */
              bind(btn01,"click",function(){
                  alert(this);
              })
            }
            // 定义一个函数，用来为指定元素绑定响应函数？
            // addeventlistener()中的this，是绑定事件的对象？
            // attachevent()中的this，是window
            /*
               参数
                 obj  要绑定事件的字符串
                 eventstr 事件的字符串
                 callback  回调函数
            */
            function bind(obj,eventstr,callback){
                if(obj.addeventlistener){
                    // 大部分浏览器兼容的方式
                    obj.addeventlistener(eventstr,callback,false);
                }else{
                    /*
                    this是谁由调用方式决定的
                    callbank.call(obj)
                    */
                    // ie8及以下
                    obj.attachevent("on"+eventstr,function(){
                        // 在匿名函数中调用回掉函数
                        callback.call(obj);
                    });
                }
                
                
                
            }
        </script>
    </head>
    <body>
        <button type="button" id="btn01">btn01</button>
    </body>
</html>

上一篇： 农村创业做什么好，8个特色创业项目推荐

下一篇： 100万创业做什么好（2020创业项目大全）

推荐阅读