JS中的事件绑定-蒲公英云

JS中的事件绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){ 
                /* * 点击按钮以后弹出一个内容 */
                //获取按钮对象
                var btn01 = document.getElementById("btn01");
                /* * 使用 对象.事件 = 函数 的形式绑定响应函数， * 它只能同时为一个元素的一个事件绑定一个响应函数， * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的 */
                //为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(this);
                });
            };
            //定义一个函数，用来为指定元素绑定响应函数
            /* * addEventListener()中的this，是绑定事件的对象 * attachEvent()中的this，是window * 需要统一两个方法this */
            /* * 参数： * obj 要绑定事件的对象 * eventStr 事件的字符串(不要on) * callback 回调函数 */
            function bind(obj , eventStr , callback){ 
                if(obj.addEventListener){ 
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr , callback , false);
                }else{ 
                    /* * this是谁由调用方式决定 * callback.call(obj) */
                    //IE8及以下
                    obj.attachEvent("on"+eventStr , function(){ 
                        //在匿名函数中调用回调函数
                        callback.call(obj);
                    });
                }
            }
        </script>
    </head>
    <body>
        <button id="btn01">点我一下</button>
    </body>
</html>