事件的绑定

Posted sspofa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件的绑定相关的知识,希望对你有一定的参考价值。

事件的绑定

<!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>

以上是关于事件的绑定的主要内容,如果未能解决你的问题,请参考以下文章

有没有更聪明的方法将布局绑定到片段?

Vue数据绑定原理及简单实现

Kotlin Android Studio - setContenView - 绑定(片段)

vuejs学习笔记--属性,事件绑定,ajax

vuejs学习笔记--属性,事件绑定,ajax

实用代码片段将json数据绑定到html元素 (转)