免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

JavaScript常見事件對象與操作實例總結

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

目前創新互聯建站已為千余家的企業提供了網站建設、域名、網站空間、網站托管、服務器租用、企業網站設計、津南網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

觸發 DOM 上的事件時，會生成一個事件對象 event，它包含著所有與事件有關的信息，諸如導致事件的元素、事件的類型以及其他與特定事件相關的信息。所有的瀏覽器都支持 event 對象，但支持的方式不同。

1 DOM 中的事件對象

兼容 DOM 的瀏覽器會將 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 保存的是被觸發的事件類型。

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

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

event 對象包含著創建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：

屬性/方法類型讀/寫說明
bubblesBoolean只讀事件是否冒泡。
cancelableBoolean只讀是否可以取消事件的默認行為。
currentTargetElement只讀與當前事件處理程序相關的元素。
defaultPreventedBoolean只讀true 表示已調用 preventDefault() 方法（DOM3 新增）。
detailInteger只讀與事件相關的細節信息。
eventPhaseInteger只讀調用事件處理程序的階段；1：捕獲；2：處于目標；3：冒泡。
preventDefault()Function只讀取消事件的默認行為（如果 cancelable 為 true，就可以調用這個方法）。
stopImmediatePropagation()Function只讀阻止事件被進一步捕獲或者冒泡，同時阻止任何事件處理程序被調用（DOM3 新增）。
stopPropagation()Function只讀阻止事件被進一步捕獲或者冒泡（如果 bubbles 為 true，就可以調用這個方法）。
targetElement只讀事件的目標。
trustedBoolean只讀true：事件是由瀏覽器生成的；false：事件是通過 JavaScript 創建的（DOM3 新增）。
typeString只讀被觸發的事件類型。
viewAbstractView只讀與事件相關的抽象視圖，相當于發生事件的 window 對象。

在事件處理程序內部，this 始終等于 currentTarget，而 target 等于事件的實際目標。如果直接將事件處理程序指定給目標元素，那么這三個值相等：

<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>

如果事件處理程序指定到按鈕的父節點上，那么它們是不同的：

<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>

如果需要通過一個函數來處理多個事件，那么可以使用 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() 方法來阻止特定事件的默認行為：

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

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

stopPropagation() 會立即阻止事件在 DOM 層次的傳播。比如這里在按鈕事件中調用 stopPropagation() ，來避免觸發注冊在 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 屬性，可以確定事件當前正處于事件流的哪一個階段：

<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>

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

2 IE 中的事件對象

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

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

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

IE 的 event 對象也包含著創建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：

屬性類型讀/寫說明
cancelBubbleBoolean讀/寫默認值為 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。
returnValueBoolean讀/寫默認值為 true，false 表示取消事件默認行為（同 DOM 的 preventDefault() ）。
srcElementElement只讀事件的目標（同 DOM 中的 target）。
typeString只讀被觸發的事件類型。

因為事件處理程序的作用域是根據它指定的方式來確定的，所以最好是使用 event.srcElement 來得到事件的目標比較靠譜：

<button id="myBtn">點我</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 設置為 false，就能阻止默認行為：

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

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

因為 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 對象進行增強：

var EventUtil = {
  ...
  /**
   * 返回對 event 對象的引用
   * @param event
   * @returns {*}
   */
  getEvent: function (event) {
    return event ? event : window.event;
  },
  /**
   * 返回事件的目標
   * @param event
   * @returns {*|elem|Object}
   */
  getTarget: function (event) {
    return event.target || event.srcElement;
  },
  /**
   * 取消事件默認行為
   * @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">點我</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>

取消事件默認行為：

<a id="myLink"  rel="external nofollow" >點我</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">點我</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>

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

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

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

新聞標題：JavaScript常見事件對象與操作實例總結
本文路徑：http://m.newbst.com/article28/ijsicp.html

成都網站建設公司_創新互聯，為您提供網站排名、網站收錄、網站建設、云服務器、虛擬主機、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都定制網站網頁設計