machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        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);

            /**
             * attachEvent()
             *  -在IE8中可以使用attachEvent()来绑定事件
             *  -参数：
             *      1.事件的字符串，要on
             *      2.回调函数
             *  -这个方法也可以同时为一个事件绑定多个处理函数，
             *      不同的是它是后绑定先执行，执行顺序和addEventListener()相反
             * 
             * （此方法在Edge已不可用）
            */
            // btn01.attachEvent("onclick", function () {
            //     alert(1);
            // });
            // btn01.attachEvent("onclick", function () {
            //     alert(2);
            // });

            // btn01.addEventListener("click", function () {
            //     alert(this);//button
            // }, false);
            // btn01.attachEvent("onclick", function () {
            //     alert(2);//IE8中测试为window
            // });

            bind(btn01,"click",function(){
                alert(this);
            });            
            // bind(btn01,"click",function(){
            //     alert(2);
            // });


        };

        //定义一个函数，用来为指定元素绑定响应函数
        /**
         * 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):call方法可以修改this
                */
                //IE8及以下
                obj.attachEvent("on" + eventStr, function(){
                    //在匿名函数中调用回调函数
                    callback.call(obj);
                });
            }
        }

    </script>
</head>

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

</html>