1. 程式人生 > >jQuery的事件委托和this、$(this)

jQuery的事件委托和this、$(this)

get 事件委托 構造 解決 觸發 innertext pan window his

  首先什麽是事件委托,一般我們設置事件監聽的時候都是在需要觸發事件的節點上設置。假設一個nav節點下有幾十上百個li標簽,就算使用循環綁定都是相當耗費內存,使頁面速度下降。為了解決這個問題可以使用事件委托,將事件委托給他們共同的父元素節點ul上,通過事件的冒泡將事件傳遞到點擊節點的父節點ul上,從而觸發事件。

//需要綁定事件的nav標簽
<nav>
            <a href="jq_load.html">HOME</a>
            <a href="jq_load2.html">ROUTE</a>
            <
a href="jq_load3.html">TOYS</a> <a href="index.html">TIMETABLE</a> </nav>
//jQuery文件
$(function(){
    $(‘nav‘).on(‘click‘,function(e){
        console.log(e.target.innerText);    //HOME,發生點擊事件的DOM元素
        console.log(this);   //<nav>...</nav>,綁定事件的對象
        console.log($(this
)); //jQuery.fn.init [nav, context: nav],nav對象 }); });

  每個事件處理函數都會獲得一個事件對象,該對象中包含和此事件相關的方法及屬性。on方法的最後一個參數是一個函數,當觸發事件時執行這個函數,該函數會自動傳入事件對象作為其參數。

  寫這個是因為今天寫代碼,將e.target和this、$(this)弄混淆了

  e.target 獲取的是當前觸發的那個對象,並不是綁定事件的那個對象。且不可以使用jQuery方法

  this 在全局下默認指向window對象,對象中指向這個對象,構造函數中指向實例對象,在這裏則指向綁定事件的nav元素對象,且不可以使用jQuery方法

  $(this) 可以創建一個包含當前元素的jQuery對象,我理解為this的封裝(水平有限),和this一樣指向nav元素對象,可以使用jQuery方法。

jQuery的事件委托和this、$(this)