溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript常見事件對象與操作實(shí)例總結(jié)

發(fā)布時(shí)間：2020-10-21 21:23:29 來源：腳本之家 閱讀：166 作者：deniro_li 欄目：web開發(fā)

本文實(shí)例講述了JavaScript常見事件對象與操作。分享給大家供大家參考，具體如下：

觸發(fā) DOM 上的事件時(shí)，會(huì)生成一個(gè)事件對象 event，它包含著所有與事件有關(guān)的信息，諸如導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。所有的瀏覽器都支持 event 對象，但支持的方式不同。

1 DOM 中的事件對象

兼容 DOM 的瀏覽器會(huì)將 event 對象傳入事件處理程序（DOM0 級與 DOM2 級都支持）：

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
  console.log(event.type);//"click"
};
btn.addEventListener("click",function(event){
  console.log(event.type);//"click"
,false};

event.type 保存的是被觸發(fā)的事件類型。

通過 HTML 屬性指定事件處理程序時(shí)， event 中保存的是 event 對象：

<input type="button" value="Click Me" onclick="alert(event.type)"/>

event 對象包含著創(chuàng)建它的特定事件相關(guān)的屬性和方法，所以可能每個(gè)特定事件都有自己所特有的屬性和方法，不過所有事件都會(huì)有這些屬性和方法：

屬性/方法 類型 讀/寫 說明
bubbles Boolean 只讀 事件是否冒泡。
cancelable Boolean 只讀 是否可以取消事件的默認(rèn)行為。
currentTarget Element 只讀 與當(dāng)前事件處理程序相關(guān)的元素。
defaultPrevented Boolean 只讀 true 表示已調(diào)用 preventDefault() 方法（DOM3 新增）。
detail Integer 只讀 與事件相關(guān)的細(xì)節(jié)信息。
eventPhase Integer 只讀 調(diào)用事件處理程序的階段；1：捕獲；2：處于目標(biāo)；3：冒泡。
preventDefault() Function 只讀 取消事件的默認(rèn)行為（如果 cancelable 為 true，就可以調(diào)用這個(gè)方法）。
stopImmediatePropagation() Function 只讀 阻止事件被進(jìn)一步捕獲或者冒泡，同時(shí)阻止任何事件處理程序被調(diào)用（DOM3 新增）。
stopPropagation() Function 只讀 阻止事件被進(jìn)一步捕獲或者冒泡（如果 bubbles 為 true，就可以調(diào)用這個(gè)方法）。
target Element 只讀 事件的目標(biāo)。
trusted Boolean 只讀 true：事件是由瀏覽器生成的；false：事件是通過 JavaScript 創(chuàng)建的（DOM3 新增）。
type String 只讀 被觸發(fā)的事件類型。
view AbstractView 只讀 與事件相關(guān)的抽象視圖，相當(dāng)于發(fā)生事件的 window 對象。

在事件處理程序內(nèi)部，this 始終等于 currentTarget，而 target 等于事件的實(shí)際目標(biāo)。如果直接將事件處理程序指定給目標(biāo)元素，那么這三個(gè)值相等：

<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function (event) {
    console.log(event.currentTarget === this);//true
    console.log(event.target === this);//true
  }
</script>

如果事件處理程序指定到按鈕的父節(jié)點(diǎn)上，那么它們是不同的：

<script type="text/javascript">
  document.body.onclick = function (event) {
    console.log(event.currentTarget === document.body);//true
    console.log(this === document.body);//true
    console.log(event.target === document.getElementById("myBtn"));//true
  }
</script>

如果需要通過一個(gè)函數(shù)來處理多個(gè)事件，那么可以使用 type 屬性：

<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  var handler = function (event) {
    switch (event.type) {
      case "click":
        console.log("Clicked");
        break;
      case "mouseover":
        event.target.style.backgroundColor = "red";
        break;
      case "mouseout":
        event.target.style.backgroundColor = "";
        break;
    }
  };
  btn.onclick = handler;
  btn.onmouseover = handler;
  btn.onmouseout = handler;
</script>

使用 preventDefault() 方法來阻止特定事件的默認(rèn)行為：

<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點(diǎn)我</a>
<script type="text/javascript">
  var link = document.getElementById("myLink");
  link.onclick = function (event) {
    event.preventDefault();
  }
</script>

注意：只有 cancelable 屬性值為 true 的事件，才可以使用 preventDefault() 阻止特定事件的默認(rèn)行為！

stopPropagation() 會(huì)立即阻止事件在 DOM 層次的傳播。比如這里在按鈕事件中調(diào)用 stopPropagation() ，來避免觸發(fā)注冊在 document.body 上的事件處理程序：

<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function (event) {
    console.log("Clicked");
    event.stopPropagation();
  };
  document.body.onclick = function (event) {
    console.log("Body clicked");
  };
</script>

eventPhase 屬性，可以確定事件當(dāng)前正處于事件流的哪一個(gè)階段：

<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function (event) {
    console.log(event.eventPhase);//2
  };
  document.body.addEventListener("click", function (event) {
    console.log(event.eventPhase);//1
  }, true);//true 表示捕獲階段
  document.body.onclick = function (event) {
    console.log(event.eventPhase);//3
  };
</script>

注意： 只有在事件處理程序執(zhí)行期間，event 對象才會(huì)存在；一旦事件處理程序執(zhí)行結(jié)束，event 對象就會(huì)被銷毀！

2 IE 中的事件對象

在使用 DOM0 級方法添加事件處理程序時(shí)，event 對象是作為 window 對象的一個(gè)屬性存在：

var btn = document.getElementById("myBtn");
btn.onclick = function () {
  var event = window.event;
  console.log(event.type);//"click"
};

如果是通過 HTML 屬性指定的事件處理程序，也跟 DOM一樣，可以通過 event 變量來訪問 event 對象。

IE 的 event 對象也包含著創(chuàng)建它的特定事件相關(guān)的屬性和方法，所以可能每個(gè)特定事件都有自己所特有的屬性和方法，不過所有事件都會(huì)有這些屬性和方法：

屬性 類型 讀/寫 說明
cancelBubble Boolean 讀/寫 默認(rèn)值為 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。
returnValue Boolean 讀/寫 默認(rèn)值為 true，false 表示取消事件默認(rèn)行為（同 DOM 的 preventDefault() ）。
srcElement Element 只讀 事件的目標(biāo)（同 DOM 中的 target）。
type String 只讀 被觸發(fā)的事件類型。

因?yàn)槭录幚沓绦虻淖饔糜蚴歉鶕?jù)它指定的方式來確定的，所以最好是使用 event.srcElement 來得到事件的目標(biāo)比較靠譜：

<button id="myBtn">點(diǎn)我</button>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function () {
    console.log(window.event.srcElement === this);//true
  };
  btn.attachEvent("onclick", function (event) {
    console.log(event.srcElement === this);//false
  });
</script>

將 returnValue 設(shè)置為 false，就能阻止默認(rèn)行為：

<a id="myLink" href="163.com" rel="external nofollow" rel="external nofollow" >點(diǎn)我</a>
<script type="text/javascript">
  var link = document.getElementById("myLink");
  link.onclick = function () {
    window.event.returnValue = false;
  }
</script>

與 DOM 不同的是，這里沒有辦法確定事件是否能被取消。

因?yàn)?IE 不支持事件捕獲，所以只能取消事件冒泡：

<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function () {
    console.log("Clicked");
    window.event.cancelBubble = true;
  };
  document.body.onclick = function (event) {
    console.log("Body clicked");
  };
</script>

3 跨瀏覽器的事件對象

我們把之前的 EventUtil 對象進(jìn)行增強(qiáng)：

var EventUtil = {
  ...
  /**
   * 返回對 event 對象的引用
   * @param event
   * @returns {*}
   */
  getEvent: function (event) {
    return event ? event : window.event;
  },
  /**
   * 返回事件的目標(biāo)
   * @param event
   * @returns {*|elem|Object}
   */
  getTarget: function (event) {
    return event.target || event.srcElement;
  },
  /**
   * 取消事件默認(rèn)行為
   * @param event
   */
  preventDefault: function (event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  /**
   * 阻止事件流
   * @param event
   */
  stopPropagation: function (event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  }
}

這樣使用：

<button id="myBtn">點(diǎn)我</button>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function (event) {
    event = EventUtil.getEvent(event);//確保所有瀏覽器都能使用 event 對象
    var target = EventUtil.getTarget(event);
    console.log(target);
  }
</script>

取消事件默認(rèn)行為：

<a id="myLink"  rel="external nofollow" >點(diǎn)我</a>
<script type="text/javascript">
  var link = document.getElementById("myLink");
  link.onclick = function (event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
  }
</script>

阻止事件傳播：

<button id="myBtn">點(diǎn)我</button>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function (event) {
    console.log("Clicked");
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
  };
  document.body.onclick = function (event) {
    console.log("Body clicked");
  };
</script>

因?yàn)?IE 不支持事件捕獲，所以 EventUtil 的 stopPropagation() 的方法只能阻止事件冒泡。

PS：關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手