<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操作DOM事件中event的target和currentTarget的區別

          時間:?2017-11-29閱讀:?1171標簽:?js事件

          事件指的是文檔或者瀏覽器窗口中發生的一些特定交互瞬間,通過偵聽器(或者處理程序)來預定事件,以便事件發生的時候執行相應的代碼的過程。在觸發DOM上的某個事件時,會產生一個事件對象event,這個對象中包含著所有與事件有關的信息。其中event下的currentTarget與target是我們比較常用的屬性,兩個屬性看上去挺相似的,兩個屬性的解釋是:


          target在事件流的目標階段;currentTarget在事件流的捕獲,目標及冒泡階段。只有當事件流處在目標階段的時候,兩個的指向才是一樣的, 而當處于捕獲和冒泡階段的時候,target指向被單擊的對象而currentTarget指向當前事件活動的對象(注冊該事件的對象)(一般為父級)。this指向永遠和currentTarget指向一致(只考慮this的普通函數調用)。

            

          <div id="outer" style="background:#099">  
           click outer  
           <p id="inner" style="background:#9C0">click inner</p>  
           <br>  
          </div>  
          
          <script type="text/javascript">  
          function G(id){  
              return document.getElementById(id);      
          }  
          function addEvent(obj, ev, handler){  
              if(window.attachEvent){  
                  obj.attachEvent("on" + ev, handler);  
              }else if(window.addEventListener){   
                  obj.addEventListener(ev, handler, false);  
              }  
          }  
          function test(e){  
              alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);  
          }  
          var outer = G("outer");  
          var inner = G("inner");  
          //addEvent(inner, "click", test);  
          addEvent(outer, "click", test);  
          </script>

          解析:

          當點擊inner對象的時候,先觸發inner綁定的事件,再觸發outer綁定的事件,(因為outer是在事件冒泡階段綁定的,如果outer是在捕獲階段綁定的,就會先觸發out的事件程序,即便inner事件也綁定在捕獲階段。因為捕獲流從根部元素開始)。 
          事件流:捕獲(自頂而下)——目標階段——冒泡(自下而頂)

          在事件處理程序內部,對象this始終等于currentTarget的值(換個角度理解,DOM上的方法this指向都為該DOM-方法調用模式),而target則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素,則this、currentTarget和target包含相同的值。


          站長推薦

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

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

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

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

          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事件冒泡和事件捕獲詳解

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

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

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

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

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

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

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