js添加事件 attachEvent 和addEventListener的用法

一般我们在JS中添加事件，是这样子的：

obj.onclick = method

　　这种绑定事件的方式，兼容主流浏览器，但是如果一个元素上添加多次同一个事件呢？？？

obj.onclick = method1;

obj.onclick = method2;

obj.onclick = method3;

　　如果这样写，那么只有绑定的事件，这里是method3会被执行，这个时候我们就不能用onclick这样的写法了，主角该登场了，在IE中我们可以使用attachEvent方法

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);

　　使用格式前面是事件类型，注意的是需要加on，比如onclick,onsubmit,onchange,执行顺序是method3 --> method2 --> method1

可惜这个微软的私人方法，火狐和其他浏览器都不支持，幸运的是他们都支持W3C标准的addEventListener方法

btn1Obj.addEventListener('click',method1,false);

btn1Obj.addEventListener('click',method2,false);

btn1Obj.addEventListener('click',method3,false);

　　执行顺序是method1 --> method2 --> method3，

作为前端开发工程师，最悲剧的莫过于浏览器的兼容问题，上面有两种添加事件的方法，为了同一添加事件的方法，我们不得不再重新写一个通用的添加事件函数，幸亏有前人帮我们做了这件事

<script>

    function addEvent(elem,evType,fn,useCapture){

        if (elem.addEventListener) {

            elem.addEventListener(evType,fn,useCapture);//DOM 2.0

            return true;

        }else if(elem.attachEvent){

            var r = elem.attachEvent('on'+evType,fn); //IE5+

            return r;

        }else{

            elem['on'+evType] = fn; //DOM 0

        }

    }

</script>

　　转载：http://www.oschina.net/question/54100_25614

巴特西

js添加事件 attachEvent 和addEventListener的用法

最新文章

热门文章