<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事件的綁定的幾種方式總匯

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

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


          直接在DOM元素綁定事件

          <div id="btn" onclick="clickone()"></div> //直接在DOM里綁定事件
          <script>
              function clickone(){ alert("hello"); }
          </script>


          在JavaScript代碼中綁定  

          <div id="btn"></div>
          <script>
            document.getElementById("btn").onclick = function(){ alert("hello"); } //腳本里面綁定
          </script>


          綁定事件監聽函數

          <div id="btn"></div>
          <script>
           document.getElementById("btn").addeventlistener("click",clickone,false); //通過偵聽事件處理相應的函數,
          

          //第三個參數設置為true就在捕獲過程中執行,反之就在冒泡過程中執行處理函數。

           function clickone(){ alert("hello"); } </script>

          IE下使用attachEvent/detachEvent:addEventListener 只支持到 IE 9,所以為了兼容性考慮,在兼容 IE 8 以及以下瀏覽器可以用 attachEvent 函數,和 addEventListener 函數表現一樣,除了它綁定函數的 this 會指向全局這個缺點以外,使用為了考慮兼容性,我們在使用前,可以添加下面這段代碼(下面使用采用惰性加載的方法):

              var addListener = null,
                  removeListener = null;
              if (typeof window.addEventListener === 'function') {
                  addListener = function(el, type, fn) {
                      el.addEventListener(type, fn, false);
                  };
                  removeListener = function(el, type, fn) {
                      el.removeEventListener(type, fn, false);
                  };
              } else if (typeof doc.attachEvent === 'function') {  //'IE'
                  addListener = function(el, type, fn) {
                      el.attachEvent('on'+type, fn);
                  };
                  removeListener = function(el, type, fn) {
                      el.detachEvent('on'+type, fn);
                  };
              } else {
                  addListener = function(el, type, fn) {
                      el['on'+type] = fn;
                  };
                  removeListener = function(el, type, fn) {
                      el['on'+type] = null;
                  };
              }

          最后,進行事件綁定時可以這么寫: 

          addListener(dom, "click", EventHandler.confirmBtnClickEvent);
          var EventHandler = {
                 confirmBtnClickEvent: function(e){}
                 //其他事件的回調函數...
          };


          區別說明:

          方式1和方式2是我們經常用到的,那么既然已經有兩種綁定事件的方法為什么還要有第三種呢?答案是這樣的:

          用 "addeventlistener" 可以綁定多次同一個事件,且都會執行,而在DOM結構如果綁定兩個 "onclick" 事件,只會執行第一個;在腳本通過匿名函數的方式綁定的只會執行最后一個事件。

          方式3注冊了事件監聽,還可以通過“removeListener”使用來取消監聽。



          站長推薦

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

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

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

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

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

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

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

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

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

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