事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
</head>
<body>
    <!-- 结构 -->
    <p onclick="alert(this.innerHTML)">DOM0</p>
    <p id="dom1">DOM1</p>
    <p id="page">DOM2</p>
</body>
    <script>
        // 获取元素
        var dom1=document.getElementById('dom1');
        // DOM1级事件的添加方法
        dom1.onclick=function(){
            alert(this.id);//dom1
        }

        /*
            事件绑定的三种对象
            1.DOM事件，将事件添加到DOM元素对象上
            2.window事件，将事件添加到window对象上
            3.其他事件，将事件添加到ajax中的事件


            添加事件的三种方式
            1.DOM0级事件，在标签元素上直接添加事件
            2.DOM1级事件，为某个元素对象添加事件
            3.DOM2级事件，为某个元素对象添加事件
                    参数1：事件名称，例如click，mouseover
                    参数2：事件的方法，例如匿名函数/有名函数
                    参数3：事件流，有两个值，分别是true和false，
        */ 

        var page=document.getElementById('page');

        // DOM2级事件，IE9以下版本不支持

        // 添加事件监听者  注意:第一个一定是字符串而且没有on
        // page.addEventListener("click",function(){
        //  alert(this.innerHTML);
        // },false);

        // page.addEventListener("click",function(){
        //  this.innerHTML="DOM4";
        // },false);

        // //移出事件监听者 注意:事件不会被移出，因为参数2不一致
        // page.removeEventListener("click",function(){
        //  // 匿名函数虽然长的一样，但本质上是有区别的，所以不能这样移出
        //  alert(this.id);
        // },false);

        // 绑定有名函数事件
        // var handler=function(){
        //  alert(this.id);
        // }
        // DOM1&DOM2的区别 前者只能添加一个方法，而后者可以添加多个
        // var handler2=function(){
        //  alert(this.innerHTML);
        // }
        // 添加事件
        // page.addEventListener("click",handler,false);
        // page.addEventListener("mouseover",handler2,false);


        // 移出事件
        // page.removeEventListener("click",handler,false);
        // page.removeEventListener("mouseover",handler2,false);
        /*
            DOM2级事件方法：可以为某个对象添加不同的事件名称以及不同的方法
        */ 

        /*
            事件流===>事件冒泡/事件捕获
            1.IE认为事件触发是由最具体的元素，逐层向外到不具体元素，则称为事件冒泡
            2.Netscape网景认为事件触发是由最外层(最不具体的元素)逐层向内层最具体的元素，则称为事件捕获

            true代表事件捕获
            false代表事件冒泡
            为了最大限度的兼容各大浏览器，多数情况下使用的都是事件冒泡
            非特殊情况，不建议使用事件捕获，所以监听者的第三个参数始终是false。
        */ 

        // IE事件添加 有两个参数 事件名称(有 on)和事件方法
        // page.attachEvent("onclick",function(){
        //  alert(this.innerHTML);
        // });
        // // IE事件移出
        // apge.detachEvent("onclick",function(){
        //  alert(this.id);
        // });

        /*
            注意:在IE中使用attachEvent(),事件处理会在全局作用域中执行,所以this将会指向window.

            IE中事件的执行顺序,在正常浏览器中的执行顺序是先添加先执行,IE则是相反.

            IE移出事件和标准浏览器的移出方式一样方法不一样
            IE移出事件使用datachEvent();参数要和添加的参数一致;
        */ 


        // 跨浏览器事件的处理方法(兼容写法)
        var eventUtil={
            addHandler:function(element,type,handler){
                // 判断监听方法
                if (element.addEventListener) {
                    // 标准浏览器
                    element.addEventListener(type,handler,false);
                }else if (element.attachEvent) {
                    // IE浏览器
                    element.attachEvent("on"+type,handler);
                }else{
                    // 其他情况
                    element["on"+type]=handler;
                }
            },

            removeHandler=function(element,type,handler){
                if (element.removeEventListenere) {
                    // 标准浏览器
                    element.removeEventListener(type,handler,false);
                }else if (element.detachEvent) {
                    // IE浏览器
                    element.detachEvent("on"+type,handler);
                }else{
                    // 其他情况
                    element["on"+type]=null;
                }
            }

        };


        var handler=function(){
            alert(this.innerHTML);
        }
        // 添加事件
        eventUtil.addHandler(page,"click",handler);
        eventUtil.removeHandler(page,"click",handler);
    </script>
</html>
推荐阅读更多精彩内容
