国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Javascript Event事件中IE與標準DOM的比較

2019-11-21 00:33:24
字體:
來源:轉載
供稿:網友
1.事件流的區別

IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件
示例:
復制代碼 代碼如下:

<body>
<div>
<button>點擊這里</button>
</div>
</body>


冒泡型事件模型: button->div->body (IE事件流)

捕獲型事件模型: body->div->button (Netscape事件流)

DOM事件模型: body->div->button->button->div->body (先捕獲后冒泡)

2.事件偵聽函數的區別

IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定

DOM使用:
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定

bCapture參數用于設置事件綁定的階段,true為捕獲階段,false為冒泡階段。

示例代碼:
復制代碼 代碼如下:

function addEventHandler(object,eventType,fnHandler){
if(object.addEventListener){ //DOM
object.addEventListener(eventType, fnHandler, false);
}else if(object.attachEvent){ //IE
object.attachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=fnHandler;
}
}
function removeEventHandler(object,eventType,fnHandler){
if(object.removeEventListener){ //DOM
object.removeEventListener(eventType, fnHandler, false);
}else if(object.detachEvent){ //IE
object.detachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=null;
}
}
addEventHandler(oDiv,"click",function(){alert("clicked")});


3.事件對象定位(獲取)

IE:事件對象是window對象的一個屬性event,event只能在事件發生時訪問,事件處理函數執行完畢,事件對象被銷毀。

示例:
復制代碼 代碼如下:

document.onclick=function(){
alert(window.event.type);
}

DOM:event對象必須作為唯一的參數傳遞給事件處理函數,且必須為第一個參數。

示例:
復制代碼 代碼如下:

document.onclick=function(){
alert(arguments[0].type);
}


4.獲取目標(target)
IE:var oTarget=oEvent.srcElement;
DOM:var oTarget=oEvent.target;

5.阻止事件默認行為

IE:oEvent.returnValue=false;
DOM:oEvent.preventDefault();

示例:
復制代碼 代碼如下:

//屏蔽網頁右鍵菜單
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}


6.停止事件復制(冒泡)
IE:oEvent.cancelBubble=true;
DOM:oEvent.stopPropagation();

示例:

復制代碼 代碼如下:

button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}

附一個代碼測試窗口:(感覺有些時候這種方式比alert()還好用)

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 临清市| 察隅县| 特克斯县| 女性| 靖远县| 井研县| 法库县| 乐昌市| 崇礼县| 娄底市| 军事| 清苑县| 双城市| 灌云县| 海盐县| 曲周县| 治多县| 龙陵县| 沾化县| 滦平县| 稻城县| 闽侯县| 古交市| 景德镇市| 五家渠市| 青浦区| 如东县| 南丰县| 华容县| 邵阳县| 陆良县| 聂拉木县| 玛曲县| 梧州市| 岱山县| 桂平市| 高阳县| 承德市| 卢龙县| 富阳市| 新沂市|