欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS事件流與事件處理程序?qū)嵗治?/h1>
 更新時(shí)間：2019年08月16日 11:18:06   作者：最騷的就是你  
這篇文章主要介紹了JS事件流與事件處理程序,結(jié)合實(shí)例形式分析了事件流與事件處理程序相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS事件流與事件處理程序。分享給大家供大家參考，具體如下：

1.事件流：從頁(yè)面中接收事件的順序

1.1 IE ：事件冒泡流
1.2 Netscape ：事件捕獲
1.3 DOM事件流 ：事件捕獲階段——事件目標(biāo)階段——事件冒泡階段
DOM2級(jí)事件規(guī)定 ：捕獲階段不會(huì)涉及目標(biāo)事件。

2.事件處理程序

事件 ：用戶或者瀏覽器自身執(zhí)行的 某種動(dòng)作
事件處理程序 ：響應(yīng)某個(gè)事件的 函數(shù) 。

2.1 HTML事件處理程序

用一個(gè)與該事件處理程序同名的HTML特性來(lái)指定。

2.1.1包含要執(zhí)行的具體動(dòng)作

<input type="button" value="Click me" onclick="alert('Clicked')"/>

2.1.2 調(diào)用其他地方定義的腳本

<input type="button" value="Click me" onclick="showMessage()"/>

2.1.3 缺點(diǎn)

  • 1.時(shí)差問(wèn)題：使用try-catch塊捕捉錯(cuò)誤。onclick="try { showMessage() ;} catch(ex) {} "
  • 2.程序的作用域鏈在不同瀏覽器中會(huì)導(dǎo)致不同結(jié)果
  • 3.HTML和JS代碼耦合緊密

2.2 DOM0級(jí)事件處理程序

將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?，例如：onclick。

為事件處理程序賦值。

btn.onclick = function() {
  alert( this.id );
};

事件處理程序在元素的作用域中運(yùn)行，this指向當(dāng)前元素。

刪除事件處理程序：

btn.onclick = null;

2.3 DOM2級(jí)事件處理程序

addEventListener(處理的事件名，事件處理程序函數(shù)，布爾值)；

removeEventListener(處理的事件名，事件處理程序函數(shù)，布爾值)；

布爾值：捕獲階段調(diào)用事件處理程序：true。冒泡階段調(diào)用：false。大多數(shù)情況下用false。

btn.addEventListener("click" , function() {
  alert(this.id);
}, false);

好處：可以添加多個(gè)事件處理程序。事件按照添加先后順序執(zhí)行。

問(wèn)題：匿名函數(shù)無(wú)法移除。

最好寫成

var handler = function(){
  alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

2.4 IE事件處理程序

attachEvent(事件處理程序名稱，事件處理程序函數(shù))；
detachEvent(事件處理程序名稱，事件處理程序函數(shù))；

通過(guò)該方法添加的事件處理程序，都會(huì)被添加到冒泡階段。

btn.attachEvent("onclick",function(){
  alert("clicked");
});

注意：使用DOM級(jí)方法時(shí)，事件會(huì)在所屬元素的作用域內(nèi)運(yùn)行；使用attachEvent()方法，事件處理程序會(huì)在全局作用域運(yùn)行，this==window。

好處：可以添加多個(gè)事件處理程序。后添加先執(zhí)行。

問(wèn)題：匿名函數(shù)無(wú)法移除。

var handler = function(){
  alert(this.id);
};
btn.attachEvent ("onclick", handler);
btn.detachEvent ("onclick", handler);

2.5跨瀏覽器事件處理程序

  • 1.創(chuàng)建一個(gè)方法addHandler():區(qū)分使用哪種方法來(lái)添加事件；
  • 2.創(chuàng)建一個(gè)對(duì)象EventUtil。擁有兩個(gè)方法。
  • 3.addHandler(要操作的元素，事件名稱，事件處理函數(shù))。
  • 4.removeHandler(要操作的元素，事件名稱，事件處理函數(shù))。
var EventUtil = {
  addHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.addEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.attachEvent("on"+type, handler);
    }else {
      element.["on"+type] =handler;
    }
  },
  removeHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.removeEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.detachEvent("on"+type, handler);
    }else {
      element.["on"+type] = null;
    }
  }
};

使用：

EventUtil.addHandler(btn ,"click",handler);
EventUtil.removeHandler(btn ,"click",handler);

PS：這里再為大家附上javascript系統(tǒng)自帶事件參考表供大家參考查詢：

javascript事件與功能說(shuō)明大全：
http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論