JQuery專題(四)-JQuery事件操作

文章目錄

1.jQuery事件和傳統js事件的差別
2.jQuery的事件綁定和解除

2.1.使用jQuery的事件方法進行綁定
2.2.使用事件處理方法bind()方式進行綁定

3.jQuery的事件委派和解除
4.擴充
5.事件預設動作和冒泡傳播機制
6.一次性事件和自動觸發事件
7.事件切換

1.jQuery事件和傳統js事件的差別

jQuery提供的事件與傳統JS是相同的，但使用的方法卻是不同的！下面是onload事件的對比：

不同之處：傳統的js的一個事件隻能綁定一個函數，而jQuery一個事件可以綁定多個函數。

【示例練習】

<input type="button" value="Click me!" id="mybtn" />

【需求】

分别使用傳統方式和jQuery方式對按鈕綁定多次單擊事件，看事件是否會被覆寫

【腳本代碼】

是以：傳統js同名事件會有覆寫效果，但jquery不會，内部的機制不同

2.jQuery的事件綁定和解除

回顧傳統DOM綁定事件：

寫法一：

<input type="button" onclick="clickme();" />
 function clickme(){….}

寫法二：

<input type="button" id="mybtn" />
document.getElementById("mybtn").onclick= function(){….}

寫法三：

document.getElementById("mybtn").onclick = clickme ;
function clickme() {… }

前端開發原則：将html代碼和js腳本代碼分離

jQuery的事件綁定的幾種方式：

2.1.使用jQuery的事件方法進行綁定

如onclick事件，使用click()方法進行綁定； onblur事件，使用blur()等等

【示例】

2.2.使用事件處理方法bind()方式進行綁定

【示例】

提示：效果與事件方法實際是一樣的。

解除事件綁定，使用事件處理函數unbind()方法

多個事件解除使用空格分隔

3.jQuery的事件委派和解除

我們先不解釋什麼是事件的委派，先來設想一個場景：在頁面加載完成之後，給頁面上所有的div綁定一個單擊事件，然後再在頁面上添加一個div，那麼當單擊這個後來添加的div時，是否會觸發單擊事件？

我們按照上面設想的場景做一個簡單測試：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
  $(function(){
    //給頁面上的所有div元素綁定單擊事件 
    $("div").click(function(){
      alert("click綁定");
    }).bind("click",function(){
      alert("bind綁定");
    });
    //在頁面上添加一個div
    $("body").append("<div> 我是新來的 </div>")
    //我們得出的結論是，通過click和bind的方式綁定的事件，不适用于綁定之後添加的元素！
    //即後來添加的元素不會觸發綁定的事件！
  });
</script>

我們得出的結論是，通過click和bind的方式綁定的事件，不适用于綁定之後添加的元素！即後來添加的元素不會觸發綁定的事件！

那麼，我們如何解決上述問題呢，這就需要使用事件委派機制，其原理是：

事件不直接綁定到給定的選擇器上，而是綁定到祖先元素（如body）上，當單擊祖先元素時，先判斷單擊的具體元素是否符合給定的選擇器，如果符合，則觸發事件，否則不觸發。

參考API：

事件委派綁定事件的方法有兩個：

live()和delegate()，他們的實作原理都是一樣的，差別在于，live是将事件委派給了根元素，即document上。而delegate可以指定事件委派的具體父元素，縮小了委派的範圍，是以delegate的效率高于live，jQuery推薦使用delegate來代替live。

【示例】：頁面初始化3條資料，通過事件委派，讓後來添加的行也能删除

頁面：

<div align="center">
  <h2>添加使用者</h2>
  <form>
    <table>
      <tr>
        <td align="right">姓名：</td>
        <td><input name="username" /></td>
      </tr>
      <tr>
        <td align="right">郵箱：</td>
        <td><input name="email" /></td>
      </tr>
      <tr>
        <td align="right">電話：</td>
        <td><input name="tel" /></td>
      </tr>
      <tr>
        <td align="right" colspan="2">
          <input id="addBtn" type="button" value=" 添 加 " />
          <input type="reset" value=" 重 置 " />
        </td>
      </tr>
    </table>
  </form>
  <hr/><br/>
  <style type="text/css">
    body{background-color: #f1f1f1;}div{margin-top:50px;}
    #list {width: 500px;border-collapse: collapse;}
    td,th{font-size: 14px;}
    #list th,#list td {text-align: center;border:1px solid black;}
  </style>
  <table id="list">
    <tr>
      <th width="100px">姓名</th>
      <th width="180px">郵箱</th>
      <th width="130px">電話</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>伊一</td>
      <td>[email protected]</td>
      <td>11111111111</td>
      <td><a href="javascript:;">删除</a></td>
    </tr>
    <tr>
      <td>牛二</td>
      <td>[email protected]</td>
      <td>22222222222</td>
      <td><a href="javascript:;">删除</a></td>
    </tr>
    <tr>
      <td>張三</td>
      <td>[email protected]</td>
      <td>33333333333</td>
      <td><a href="javascript:;">删除</a></td>
    </tr>
  </table>
</div>

jQuery代碼：

<script type="text/javascript">
  // jQuery核心函數1：$(callback);
  jQuery(function($) {
    // 選中的右移：在對節點進行追加的時候，如果追加的元素在頁面中已經存在，會發生剪切效果
    /* $("div").click(function() {
      alert("事件方法綁定");
    });
    $("body").append("<div>我是新來的！</div>"); */
    //1．在添加按鈕上綁定單擊事件
    $("#addBtn").click(function() {
      //2．在事件中，先擷取表單的資料
      var uname = $("input[name=username]").val();
      var email = $("input[name=email]").val();
      var tel = $("input[name=tel]").val();
      // js中，在字元串中使用\進行字元串的折行，html的拼接更加清晰
      var tr = "<tr>\
            <td>" + uname + "</td>\
            <td>" + email + "</td>\
            <td>" + tel + "</td>\
            <td><a href='javascript:;'>删除</a></td>\
           </tr>";
      //3．将資料拼成tr，并轉成jQuery對象
      $(tr)
      //4．找到tr中的删除連結，并綁定單擊事件：讓tr自殺
      /* .find("a").click(function() {
        //$(this).parent().parent().remove();
        $(this).closest("tr").remove();
      })
      // 傳回上一個jQuery對象
      .end() */
      //5．将tr添加到id為list的table中
      .appendTo("#list")
      ;
    });
    
    // 進入頁面時，給删除按鈕綁定删除事件：普通方式
    /* $("#list").find("a").click(function() {
      $(this).closest("tr").remove();
    }); */
    
    // 委派方式綁定事件
    /* $("a").live("click", function() {
      $(this).closest("tr").remove();
    })
    .die("click") // 解除委派
    .die("click mousedown") // 解除委派
    .die() // 解除委派
    ; */
    
    // 使用delegate來代理live：将事件委派給具體的父元素
    /*
      #list: 将事件委派給哪個父元素：這個元素一定是一直都存在的
      "a": 觸發事件的元素的選擇器 
      "click"：事件名
      fn:事件
    */
    $("#list").delegate("a", "click", function() {
      $(this).closest("tr").remove();
    })
    .undelegate("a", "click")
    .undelegate("a", "click mouseup")
    .undelegate("a")
    ;
  });
</script>

總結：

普通方式（事件函數和bind）綁定的事件，隻能綁定到頁面中已存在的元素上；

通過事件委派的方式綁定，可以綁定到頁面中本來不存在後來添加的元素上。

解除事件委派，使用die方法：

live ----die

delegate — undelegate

4.擴充

大家可能會有這樣的感覺：jQuery事件的方法太多了，太亂了！

自jQuery1.7以後，官方推薦使用on | off 方法進行事件的綁定和解除，既支援普通方式，也支援委派方式

用法：

注意：如果指定可選參數selector(選擇器)，表示委派綁定，否則相當于普通方式綁定

【示例】：

<script type="text/javascript">
  /*頁面加載完成事件：相當于jQuery(document).ready(fn);****/
  jQuery(function($) {
    /* $("div").bind("click", function() {
      alert(this.innerHTML);
    })
    ;
    $("body").append("<div>我是新來的！</div>"); */
    //1．在添加按鈕上綁定單擊事件
    $("#addBtn").click(function() {
      //2．在事件中，先擷取表單的資料
      var username = $("input[name=username]").val();
      var email = $("input[name=email]").val();
      var tel = $("input[name=tel]").val();
      //3．将資料拼成tr，并轉成jQuery對象
      $(
        "<tr>\
          <td>" + username + "</td>\
          <td>" + email + "</td>\
          <td>" + tel + "</td>\
          <td><a href='javascript:;'>删除</a></td>\
        </tr>"
      )
      //4．找到tr中的删除連結，并綁定單擊事件：讓tr自殺
      /* .find("a").click(function() {
        $(this).closest("tr").remove();
      })
      .end() */
      //5．将tr添加到id為list的table中
      .appendTo("#list");
    });
    
    /* $("#list a")
    // 使用on完成普通事件綁定 
    .on("click", function() {
      $(this).closest("tr").remove();
    })
    .off("click") // 解除單擊事件
    .off("click mouseup") // 解除多個事件用空格分隔
    .off() // 解除所有事件
    ; */
    $("#list").on("click", "a", function() {
      $(this).closest("tr").remove();
    })
    .off("click", "a") // 解除事件的委派
    ;
  });
</script>

5.事件預設動作和冒泡傳播機制

事件的預設動作：

很多元素當被單擊或滑鼠按下或光标移入或鍵盤按下等等時，會執行一些預設動作，例如：
單選框、複選框被單擊時，選中狀态會改變；
輸入框被滑鼠按下時會擷取焦點；
下拉框被滑鼠按下時會展開選項；
超連結被點選時，頁面會跳轉；
......
在實際開發中，有時候需要阻止預設事件發生。

事件的冒泡傳播：

如果父元素注冊一個事件，那麼子元素也會擁有這個事件，原因就是事件的冒泡傳播機制：
當觸發子元素自己的事件後，會自動逐級向上尋找其父輩、乃至祖宗的同類事件，繼續執行，直到根元素。

用法有些特殊：e:event

【示例練習】

<form action="javascript:alert('表單送出了！');">
  姓名：<input /><br/>
  性别：<input type="radio" value="男" />男
    <input type="radio" value="女" />女<br/>
  愛好：<input type="checkbox" value="籃球" />籃球
    <input type="checkbox" value="足球" />足球
    <input type="checkbox" value="排球" />排球<br/>
  城市：<select>
      <option>北京</option>
      <option>上海</option>
      <option>廣州</option>
    </select><br/>
  <input type="submit" value="送出" />
</form>

【需求】

阻止表單元素的預設行為。
阻止表單元素事件的冒泡傳播。

【腳本代碼】

【小結】

preventDefault()    阻止預設行為但是允許事件的冒泡傳播。
stopPropagation() 阻止事件的冒泡傳播但是允許預設行為。

【擴充】

如何既阻止事件冒泡又阻止預設行為？有3種方式：

重點：第二種方式！

6.一次性事件和自動觸發事件

相關API：

one(type, [data], fn)     綁定的事件隻觸發一次，一般用于防止表單重複送出
trigger(type, [data])     通過代碼來觸發指定的事件，元素的預設行為會執行，例如$("div"). trigger("click")   $("div").click();
triggerHandler(type, [data])  通過代碼來觸發指定的事件，元素的預設行為被取消

【示例】

<form action="javascript:alert('Form has be submited!');">
  <input type="button" id="submitBtn" value="Submit" />
</form>
<input value="To Be Focused" /><br /><br />
<button id="trigger">$("input").trigger("focus")</button>
<button id="triggerHandler">$("input").triggerHandler("focus")</button>

【需求】

給"送出"按鈕綁定一次性單擊事件，讓表單隻能送出一次
給輸入框綁定一個擷取焦點事件：在輸入框後面添加一個元素，并在1秒内淡出
點選ID為trigger的按鈕，使用trigger函數觸發輸入框的擷取焦點事件
點選ID為triggerHandler的按鈕，使用triggerHandler函數觸發輸入框的擷取焦點事件

7.事件切換

hover(mouseenter, mouseleave)

當光标移入元素時，執行第一個函數，移出元素時執行第二個函數，相當于mouseenter事件和mouseleave事件的組合，而不是mouseover事件和mouseout事件的組合，mouseenter和mouseover都表示光标移入事件，他們的差別在于，mouseenter和mouseleave會忽略事件的冒泡傳播，而mouseover和mouseout不會，請看下圖：

JQuery專題(四)-JQuery事件操作

JQuery專題(四)-JQuery事件操作

<div style="border:1px solid red;height:300px;width:300px;margin: 200px auto auto 300px;">
    <input value="來呀來呀" type="button" style="width:100px; height:100px;margin:100px;" />
</div>

JQuery專題(四)-JQuery事件操作

文章目錄

1.jQuery事件和傳統js事件的差別

2.jQuery的事件綁定和解除

2.1.使用jQuery的事件方法進行綁定

2.2.使用事件處理方法bind()方式進行綁定

3.jQuery的事件委派和解除

4.擴充

5.事件預設動作和冒泡傳播機制

6.一次性事件和自動觸發事件

7.事件切換

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條