为了账号安全,请及时绑定邮箱和手机立即绑定

Web前端基礎知識整理

标签:
JavaScript

請多多指教;

IE與標準瀏覽器對事件處理的區別

  a.事件監聽的區別:

       //eventName:事件名,點擊事件click,不用加on;handle函數名

       標準瀏覽器:添加事件監聽:element.addEventListener(eventName,handle);

                           刪除事件監聽:element.removeEventListener(eventName,handle);

                           刪除事件監聽和添加事件監聽的事件必須是同一個,所以我不建議在添加裡面寫函數。

     //eventName事件名,點擊事件onclick,需要加on,handle函數名

      IE瀏覽器:添加事件監聽:element.attachEvent(eventName,handle);

                      刪除事件監聽:element.detachEvent(eventName,handle);

     我之間測試這裡時:若是在標準瀏覽器中是不能使用IE的事件,IE中同樣不能使用標準裡面的事件,不讓會報錯不能執行。

     為了事件監聽兼容性合併了兩種情況:

var EventUtil = {
//element:元素;type:事件類型(不加on,click);handler:函數名或函數
    addHandler:function(element,type,handler){
        //绑定事件
        //Chrome Firefox IE9等     addEventListener
        //IE8及IE8以下的浏览器     attachEvent
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if (element.attachEvent) {
            element.attachEvent("on"+ type,handler);
        } else{
            element["on"+type] = handler
        }
    },
    removeHandler: function(element,type,handler){
        //移除事件
        //Chrome Firefox IE9等
        //IE8及IE8以下的浏览器
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if (element.detachEvent) {
            element.detachEvent("on"+type,handler);
        } else{
            element["on"+type] = handler
        }
    }
}
//調用方法:
EventUtil.addHandler(element,"click",function () {
    alert("one")
})

b.阻止事件冒泡

        標準:event.stopPropagation();

        IE:event.cancelBubble=true;

       兼容:

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则,我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

c.阻止默認事件

         標準:event.preventDefault();

         IE:event.returnValue=false;

        兼容:

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

d.對象

        標準:event;

         IE:window.event

        兼容:event=event || window.event;

e.事件源對象

         標準:event.target;

         IE:event.srcElement;

         兼容:function getTarget(event){

                     return event.target || event.srcElement;

                    }

最後的整合:

var EventUtil = {
				addHandler: function(element, type, handler) {
					//绑定事件
					//Chrome Firefox IE9等     addEventListener 
					//IE8及IE8以下的浏览器     attachEvent 
					if(element.addEventListener) {
						element.addEventListener(type, handler, false);
					} else if(element.attachEvent) {
						element.attachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler					}
				},
				removeHandler: function(element, type, handler) {
					//移除事件
					//Chrome Firefox IE9等      
					//IE8及IE8以下的浏览器     
					if(element.removeEventListener) {
						element.removeEventListener(type, handler, false);
					} else if(element.detachEvent) {
						element.detachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler					}
				},
				getTarget: function(event) {
					return event.target || event.srcElement;
				},
				preventDefault: function(event) {
					if(event.preventDefault) {
						event.preventDefault();
					} else {
						event.returnValue = false;
					}
				},
				stopPropagation: function(event) {
					if(event.stopPropagation) {
						event.stopPropagation()
					} else {
						event.cancelBubble = true;
					}
				}
          }



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消