绑定事件、阻止默认事件、阻止冒泡

一、绑定事件
ie6-8 :attachEvent (事件名,函数名);事件名+on
ie9以上也支持addEventListener

标准下:addEventListener(事件名,函数名,false);事件名无on,false表示冒泡阶段调用事件处理函数,true则是捕获阶段

绑定事件的问题:1、参数不一样
2、是否加on
3、执行顺序
4、this指向问题(ie6-10,this指向window;addEventListener中指向所属元素)

利用call和apply改变this指向:
call()第一个参数是函数中this的指向,第二个参数开始就是函数的实际参数。
例子:

oDiv.οnclick=function(){
    show.call(oDiv,'red')
}
function show(val){
    this.style.background=val
}

如果是用apply(this,[‘red’]),第一个参数与call一样,第二个参数是一个数组

兼容处理:

 function bindEvent(obj,events,fn){
    if(obj.addEventListener){
        obj.addEventListener(events,fn,false)
    }else{
        obj[fn]=function(){
            fn.call(obj)
        }
        obj.attachEvent('on'+events,obj[fn])
      }

}

二、阻止默认事件

function preDefault(ev){  //是传进来的,ev=ev || window.event;
        if(ev.preventDefault){
            ev.preventDefault();  //(w3c绑定事件)
        }else{
            ev.returnValue=false;  //ie6-8
            return false;  //普通事件
        }

    }

三、阻止冒泡

ev.cancelbubble=true //非标准的方法
ev.stopPropagation(); //非标准方法,有兼容问题,不兼容ie8及以下

发布了61 篇原创文章 · 获赞 2 · 访问量 5万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章