<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          js事件冒泡和事件捕獲詳解

          時間:?2017-11-28閱讀:?962標簽:?js事件

          Javascript與HTML之間的交互是通過事件實現。

          一、事件流

          事件,是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。事件流,描述的是頁面中接受事件的順序。IE9,chrome,Firefox,Opera,Safari均實現了DOM2級規范中定義的標準DOM事件,而IE8和IE8以下版本仍然保留專有的事件處理方式。

          事件冒泡

          事件冒泡是由IE開發團隊提出來的,即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收,然后逐級向上傳播。

          <!DOCTYPE html>
          <html>
              <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  <title>Event Bubbling Example</title>
              </head>
              <style type="text/css">
                  #myDiv{
                      width:100px;
                      height:100px;
                      background-color:#FF0000;
                  }
              </style>
              <body>
                  <div id="myDiv"></div>
              </body>    
          </html>

          當用戶點擊了<div>元素,click事件將按照<div>—><body>—><html>—>document的順序進行傳播。若在<div>和<body>上都定義了click事件,如下:

          <script type="text/javascript">
                  var div=document.getElementById("myDiv");
                  div.onclick=function(event){
                      alert("div");
                  };
                  document.body.onclick=function(event){
                      alert("body");
                  };    
          </script>

          點擊<div>,將先輸出“div”,再輸出“body”。

          IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并將事件冒泡到window對象。

          事件捕獲

          事件捕獲是由Netscape Communicator團隊提出來的,是先由最上一級的節點先接收事件,然后向下傳播到具體的節點。當用戶點擊了<div>元素,采用事件捕獲,則click事件將按照document—><html>—><body>—><div>的順序進行傳播。

          若在<div>和<body>上都定義了click事件,如下:

          <script type="text/javascript">
                  var div=document.getElementById("myDiv");    
                  div.addEventListener("click",function(event){
                      alert("div");
                  },true);
                  document.body.addEventListener("click",function(event){
                      alert("body");
                  },true);
                  
              </script>

          (注:addEventListener具體使用見本文DOM2級事件處理)

          點擊<div>,將先輸出“body”,再輸出“div”。

          IE9,chrome,Firefox,Opera,Safari都支持事件捕獲,但是IE8和IE8以下的版本只支持事件冒泡。盡管DOM2規范要求事件應該從document對象開始傳播,但是現在的瀏覽器實現都是從window對象開始捕獲事件。

          DOM事件流

          "DOM2級事件”規定的事件流包含三個階段:事件捕獲階段,處于目標階段和事件冒泡階段。首先發生的是事件捕獲,然后是實際的目標接收到事件,最后階段是冒泡階段。以上面的HTML頁面為例,單擊<div>元素將按照下圖觸發事件:


          若在<div>和<body>上都定義了click事件,如下:

          <script type="text/javascript">
                  var div=document.getElementById("myDiv");    
                  div.onclick=function(event){
                      alert("div");
                  };
                  document.body.addEventListener("click",function(event){
                      alert("event bubble");
                  },false);
                  document.body.addEventListener("click",function(event){
                      alert("event catch");
                  },true);
                  
              </script>

          點擊<div>,將先輸出“event catch”,再輸出“div”,最后輸出“event bubble”。


          二、事件處理程序

          事件是用戶或瀏覽器自身執行的某種動作,而響應某個事件的函數叫做事件處理程序。HTML事件處理程序、DOM0級事件處理程序和IE事件處理程序均以“on”開頭,DOM2級事件處理程序不需要加“on”。

          HTML事件處理程序

          通過將事件作為HTML元素的屬性來實現,包含以下兩種方法:

          <input type="button" value="confirm" onclick="alert('confirm')" />

          或者調用其他地方定義的腳本:

          <script type="text/javascript">
                  function showMessage() {
                      alert("confirm");
                  }
          </script>
          <input type="button" value="confirm" onclick="showMessage()"/>

          (注:函數定義必須放在調用之前)

          DOM0級事件處理程序

           通過Javascript指定事件處理程序的傳統方式,所有瀏覽器均支持。每個元素(包括window,document)都有自己的事件處理程序屬性,但是必須在DOM節點加載完之后才會有效。如下所示:

          <script type="text/javascript">
                  var div = document.getElementById("myDiv");
                  div.onclick = function(event) {
                      alert("div");
                  };
              </script>

          使用DOM0級方法指定的事件處理程序被認為是元素的方法,在元素的作用域中運行。this引用當前元素,如下:

          <script type="text/javascript">
                  var div = document.getElementById("myDiv");
                  div.onclick = function(event) {
                      alert(this.id);
                  };
              </script>

          輸出“myDiv”。

          刪除通過DOM0級方法指定的事件處理程序:div.onclick=null;

          DOM2級事件處理程序

          IE9,chrome,Firefox,Opera,Safari均實現了DOM2級事件處理程序,綁定事件方法addEventListener()接收三個參數:事件名稱,事件處理函數和一個布爾值。布爾值為true,則表示在捕獲階段調用事件處理程序;如果為false,則表示在冒泡階段調用事件處理程序。addEventListener允許在同一個元素上添加多個事件處理程序,如下所示:

              <script type="text/javascript">
                  var div = document.getElementById("myDiv");
                  div.addEventListener("click", function(event) {
                      alert("event bubble");
                  }, false);
                  div.addEventListener("click", function(event) {
                      alert("event catch");
                  }, true);
              </script>

          先輸出“event bubble”,后輸出“event catch”,說明addEvenListener綁定的處理程序執行順序和綁定順序相同。

          通過DOM2級事件處理程序指定的方法,this也引用當前元素,如下:

          <script type="text/javascript">
                  var div = document.getElementById("myDiv");
                  div.addEventListener("click", function(event) {
                      alert(this.id);
                  }, false);
              </script>

          輸出“myDiv”。

          刪除DOM2級事件處理程序,采用removeEventListener(),刪除時傳入的參數必須和綁定時傳入的參數相同,不能傳入匿名函數。如下所示:

          <script type="text/javascript">
                  var div = document.getElementById("myDiv");
                  var handler=function(event){
                      alert("delete");
                  };        
                  div.addEventListener("click",handler,false);
                  div.removeEventListener("click",handler,false);
              </script>

          IE事件處理程序

          IE8和IE8以下的版本不支持addEventListener(),而是采用attachEvent()來實現事件綁定。目前只有IE和Opera支持attachEvent()。IE9支持addEventListener(),同時也兼容IE8的attachEvent()方法,但是IE9和IE8對attachEvent()的實現有點不同。如下所示:

              <script type="text/javascript">
                  var div = document.getElementById("myDiv");
                  div.attachEvent("onclick", function(event) {
                      alert("1");
                  });
                  div.attachEvent("onclick", function(event) {
                      alert("2");
                  });
              </script>

          IE9和IE10先輸出“1”,再輸出“2”,而IE8和IE7先輸出“2”,再輸出“1”。

          刪除IE事件處理程序,采用detachEvent(),刪除時傳入的參數必須和綁定時傳入的參數相同,不能傳入匿名函數。如下所示:

          <script type="text/javascript">
                  var div = document.getElementById("myDiv");
                  var handler = function(event) {
                      alert("delete");
                  };
                  div.attachEvent("onclick",handler);
                  div.detachEvent("onclick",handler);
              </script>

          總結:attachEvent()采用冒泡方式,而addEventListener()可以采用冒泡或事件捕獲方式。

          先按由上往下的順序執行事件捕獲的執行程序,再執行目標元素的執行程序,最后按由下往上的順序執行冒泡事件。代碼如下所示:

          <!DOCTYPE html>
          <html>
              <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  <title>Event Bubbling Example</title>
              </head>
              <style type="text/css">
                  #child {
                      width: 100px;
                      height: 100px;
                      background-color: #FF0000;
                  }
              </style>
              <body>
                  <div id="parent">
                      <div id="child"></div>
                  </div>
              </body>
              <script type="text/javascript">
                  var parent = document.getElementById("parent");
                  var child = document.getElementById("child");
                  child.onclick = function(event) {
                      alert("child");
                  };
                  document.body.addEventListener("click", function(event) {
                      alert("body:event bubble");
                  }, false);
                  parent.attachEvent("onclick", function(event) {
                      alert("parent:event bubble");
                  });
                  document.body.addEventListener("click", function(event) {
                      alert("body:event catch");
                  }, true);
                  parent.addEventListener("click", function(event) {
                      alert("parent:event catch");
                  }, true);
              </script>
          </html>

          輸出順序:body:event catch—>parent:event catch—>child—>parent:event bubble—>body:event bubble

           

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/185

          vue自定義移動端touch事件,點擊、滑動、長按事件

          vue自定義指令_監聽移動端touch事件,包括:點擊、滑動、長按等事件,加強對Touch的一些理解。Vue.directive指令封裝的使用

          js 按鍵監聽_JS實現監聽組合按鍵

          有些時候,我們需要在網頁上,增加一些快捷按鍵,方便用戶使用一些常用的操作,比如:保存,撤銷,復制、粘貼等等。下面簡單梳理一下思路,我們所熟悉的按鍵有這么集中類型:

          js動態元素綁定事件_jquery、原生js實現動態添加新元素_監聽事件

          在實現click綁定事件的時候,發現只能對已經加載好的元素進行綁定,如果后來通過js動態插入的元素則無法綁定事件

          你知道哪些html事件不能冒泡?

          我們都知道一般事件的流程是:事件捕捉——>目標元素發生事件——>事件冒泡。但是不是所有的事件和click事件都一樣是冒泡的,那么如何判斷給事件是否不能冒泡呢?

          Javascript - 事件順序

          “假設一個元素及其祖先元素的事件句柄指向了同一事件,哪個先觸發?”不出意料,這取決于瀏覽器。

          js中的事件委托或是事件代理詳解

          事件委托就是利用事件冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。適合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

          js操作DOM事件中event的target和currentTarget的區別

          target在事件流的目標階段;currentTarget在事件流的捕獲,目標及冒泡階段。只有當事件流處在目標階段的時候,兩個的指向才是一樣的, 而當處于捕獲和冒泡階段的時候,target指向被單擊的對象而currentTarget指向當前事件活動的對象。

          通過原生js對DOM事件的綁定的幾種方式總匯

          在網頁開發中經常會有交互操作,比如點擊一個dom元素,需要讓js對該操作做出相應的響應,這就需要對Dom元素進行事件綁定來進行處理,js通常有三種常用的方法進行事件綁定:在DOM元素中直接綁定;在JavaScript代碼中綁定;綁定事件監聽函數。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网