JavaScript中的事件类型以及跨浏览器事件

  事件是JavaScript的重要组成部分,但是兼容问题一直困扰我们的程序员同学,整理跨浏览器的事件相关内容,供大家参考,本文是学习高程3后总结.

事件分类

1. DOM 0 级 事件
     通俗一点就是采用 "on" + eventType 的方式为元素绑定事件,写法简单,具有跨浏览器的优势,现代浏览器全部支持,使用DOM0级方法指定事件处理程序被人为是元素的方法,事件处理程序是在元素的作用域中运行的,程序中的this指向被绑定事件的元素.
   

2. DOM 2 级 事件
     定义了两种方法,用于事件的添加和删除处理,
   即: addEventListener( type, handler, boolean )
      removeEventLisrener( type, handler, boolean ),
   第三个参数为boolean值,如果为true表示在事件的捕获阶段调用事件处理程序,反之在时在冒泡阶段调用事件处理程序. 通过addEventListener()添加的事件只能通过removerEventListener()来移除.addEventListener()主要的好处是能够添加多个事件,并且多个事件的执行书序是按照书写的顺序执行
   

3. IE 事件
      IE中实现了类似于DOM2 级中的方法,绑定事件方法attachEvent(),移除事件detachEvent(), 都接收两个参数事件名称和事件处理程序,区别于DOM2级事件,IE中的事件名称需要在事件名前面加一个"on",利用detachEvent()移除事件时需要传入相同的参数才行. !注意:通过这个方法绑定事件处理程序是在全局中运行,this执行window.并且,当使用attachEvent()多次为同一对象绑定事件时,事件的程序代码的书写顺序是相反的.

跨浏览器事件封装

    var EventUtil = {
        // 1.添加事件处理程序  参数1: 事件添加元素, 参数2: 事件类型, 参数3: 事件处理程序
        addHandler: function ( ele, type, handler) {

            // DOM2级方法
            if ( ele.addEventListener ) {

                // 第三个参数 false 表示在冒泡阶段调用处理程序,
                ele.addEventListener( type, handler, false);

            // IE事件方法
            } else if ( ele.attachEvent ) {

                ele.attachEvent( "on" + type, handler);

            // DOM 0级事件方法法
            } else {
                ele["on" + type] = handler;
            }
        },

        // 2.事件参数对象
        getEvent: function ( event ) {

            return event ? event : window.event;
        }

        // 3.事件目标

        getTarget: function ( event ) {
            return event.target || event.srcElement;
        }

        // 4.阻止默认行为

        preventDefault: function ( event ) {

            if ( event.preventDefault ) {

                event.preventDefault();
            } else {

                // 简单的写法可以是 return false
                event.returnValue = false;
            }
        }

        // 5.解绑事件
        removeHandler: function ( ele, type, handler ) {

            // DOM2 级事件解绑
            if ( ele.removeEventListener ) {

                ele.removeHandler( type, handler, false );

            } else if ( ele.detachEvent ) {

                ele.detachEvent( "on" + type, handler );

            } else {

                ele.[ "on" + type ] = null;
            }
        }

        // 6.阻止冒泡 
        stopPropagation: function ( event ) {

            // DOM 事件
            if ( event.stopPropagation ) {
                
                event.stopPropagation();

            // IE     
            } else {
                event.cancelBubble = true;
            }
        }
    }

谢谢查看,不足之处请补充!