jQuery 事件註冊、事件處理

時間 2020-10-09

標籤 javascript css html java app ide 函數 this spa code 欄目 JQuery 简体版

原文原文鏈接

1. jQuery 事件註冊

jQuery 爲咱們提供了方便的事件註冊機制，是開發人員抑鬱操做優缺點以下：javascript

優勢: 操做簡單，且不用擔憂事件覆蓋等問題。css
缺點: 普通的事件註冊不能作事件委託，且沒法實現事件解綁，須要藉助其餘方法。html

語法java

element.事件(function(){}) 
$(「div」).click(function(){  事件處理程序 })

其餘事件和原生基本一致。
好比mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等app

演示代碼ide

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 單個事件註冊
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

2. jQuery 事件處理

由於普通註冊事件方法的不足，jQuery又開發了多個處理方法，重點講解以下：函數

on(): 用於事件綁定，目前最好用的事件綁定方法this
off(): 事件解綁spa
trigger() / triggerHandler(): 事件觸發code

2.1 事件處理 on() 綁定事件

由於普通註冊事件方法的不足，jQuery又建立了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

on() 方法在匹配元素上綁定一個或多個事件的事件處理函數

語法

element.on(events,[selector],fn)

1. events:一個或多個用空格分隔的事件類型，如"click"或"keydown" 。
2. selector: 元素的子元素選擇器。
3. fn:回調函數即綁定在元素身上的偵聽函數。

on() 方法優點1：

能夠綁定多個事件，多個處理事件處理程序。

 $(「div」).on({   
　　mouseover: function(){},    
　　mouseout: function(){},   c
　　lick: function(){}  
});

若是事件處理程序相同

 $(「div」).on(「mouseover mouseout」, function() {    
　　$(this).toggleClass(「current」);   
});

on() 方法優點2：
能夠事件委派操做。事件委派的定義就是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素

$('ul').on('click', 'li', function() {     
　　alert('hello world!'); 
});

在此以前有bind(), live() delegate()等方法來處理事件綁定或者事件委派，最新版本的請用on替代他們。

on() 方法優點3：

動態建立的元素，click() 沒有辦法綁定事件， on() 能夠給動態生成的元素綁定事件

 $(「div").on("click",」p」, function(){     
     alert("俺能夠給動態生成的元素綁定事件")  
});

 $("div").append($("<p>我是動態建立的p</p>"));

演示代碼

<body>
    <div></div>
    <ul>
        <li>咱們都是好孩子</li>
        <li>咱們都是好孩子</li>
        <li>咱們都是好孩子</li>
    </ul>
    <ol></ol>

    <script>
        $(function() {
            // (1) on能夠綁定1個或者多個事件處理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on能夠實現事件委託（委派）
            // click 是綁定在ul 身上的，可是 觸發的對象是 ul 裏面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on能夠給將來動態建立的元素綁定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是後來建立的</li>");
            $("ol").append(li);
        })
    </script>
</body>

2.2. 案例：發佈微博案例

1.點擊發布按鈕，動態建立一個小li，放入文本框的內容和刪除按鈕，而且添加到ul 中。2.點擊的刪除按鈕，能夠刪除當前的微博留言。

代碼實現

<script>
      $(function () {
        // 1.點擊發布按鈕， 動態建立一個小li，放入文本框的內容和刪除按鈕， 而且添加到ul 中
        $(".btn").on("click", function () {
          var li = $("<li></li>");
          li.html($(".txt").val() + "<a href='javascript:;'>刪除</a>");
          $("ul").prepend(li);
          li.slideDown(); // 讓小li 滑動出來
          $(".txt").val(); // 發佈後把以前文本框裏輸入的內容清空
        });
        // 2.點擊的刪除按鈕，能夠刪除當前的微博留言li
        // 原來的方法 此時的click不能給動態建立的a標籤添加事件  由於上面添加的a尚未觸發 這個查詢不到
        // $("ul a").click(function () {
        //   $("li").remove();
        // });
        // on能夠給動態建立的元素綁定事件
        $("ul").on("click", "a", function () {
          $(this)
            .parent()
            .slideUp(function () {
              $(this).remove();
            });
        });
      });
    </script>

2.3. 事件處理 off() 解綁事件

當某個事件上面的邏輯，在特定需求下不須要的時候，能夠把該事件上的邏輯移除，這個過程咱們稱爲事件解綁。jQuery 爲咱們提供了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有隻觸發一次的事件綁定方法 one()，在這裏咱們重點講解一下 off() ;

語法

off() 方法能夠移除經過 on() 方法添加的事件處理程序。

$("p").off() // 解綁p元素全部事件處理程序 
 
$("p").off( "click")  // 解綁p元素上面的點擊事件 後面的 foo 是偵聽函數名 
 
$("ul").off("click", "li");   // 解綁事件委託

若是有的事件只想觸發一次，可使用 one() 來綁定事件。

演示代碼

<body>
    <div></div>
    <ul>
        <li>咱們都是好孩子</li>
        <li>咱們都是好孩子</li>
        <li>咱們都是好孩子</li>
    </ul>
    <p>我是一個P標籤</p>
    <script>
        $(function() {
              // 事件綁定
            $("div").on({
                click: function() {
                    console.log("我點擊了");
                },
                mouseover: function() {
                    console.log('我鼠標通過了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解綁 off 
            // $("div").off();  // 這個是解除了div身上的全部事件
            $("div").off("click"); // 這個是解除了div身上的點擊事件
            $("ul").off("click", "li");
  
            // 2. one() 可是它只能觸發事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

2.4. 事件處理 trigger() 自動觸發事件

有些時候，在某些特定的條件下，咱們但願某些事件可以自動觸發, 好比輪播圖自動播放功能跟點擊右側按鈕一致。能夠利用定時器自動觸發右側按鈕點擊事件，沒必要鼠標點擊觸發。由此 jQuery 爲咱們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;

有些事件但願自動觸發, 好比輪播圖自動播放功能跟點擊右側按鈕一致。能夠利用定時器自動觸發右側按鈕點擊事件，沒必要鼠標點擊觸發。

語法

element.click()  // 第一種簡寫形式

element.trigger("type") // 第二種自動觸發模式

$("p").on("click", function () {   
alert("hi~"); 
});  
 
$("p").trigger("click"); // 此時自動觸發點擊事件，不須要鼠標點擊

element.triggerHandler(type)  // 第三種自動觸發模式

triggerHandler模式不會觸發元素的默認行爲，這是和前面兩種的區別。

演示代碼

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 綁定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自動觸發事件
      // 1. 元素.事件()
      // $("div").click();會觸發元素的默認行爲
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");會觸發元素的默認行爲
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不會觸發元素的默認行爲
      $("input").on("focus", function() {
        $(this).val("你好嗎");
      });
      // 一個會獲取焦點，一個不會
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>