從零開始學 Web 之 jQuery(六)為元素繫結多個相同事件,解綁事件
一、為元素繫結多個相同事件
1、方式一
$("#btn").click(function () {
console.log("click1");
}).click(function () {
console.log("click2");
}).click(function () {
console.log("click3");
});
2、方式二
$("#btn").bind("click",function () { console.log("bind:click1"); }).bind("click",function () { console.log("bind:click2"); }).bind("click",function () { console.log("bind:click3"); });
注意:下面使用 bind 物件的方式,只會執行最後一個相同的繫結事件。
$("#btn").bind({ "click": function () { console.log("bind-obj:click1"); }, "click": function () { console.log("bind-obj:click2"); }, "click": function () { console.log("bind-obj:click3"); } });
二、元素繫結事件的區別
先說結論:通過呼叫事件名的方式和 bind 的方式只能繫結之前存在的元素,後新增的元素不能繫結事件;而 delegate 和 on 的方式繫結元素的方式可以。
示例1:
// 事件名 $("#btn").click(function () { $("#dv").append($("<p>p標籤</p>")); $("p").click(function () { alert("p被點了"); }); $("#dv").append($("<p>p標籤2</p>")); }); // bind $("#btn").click(function () { $("#dv").append($("<p>p標籤</p>")); $("p").bind("click", function () { alert("p被點了"); }); $("#dv").append($("<p>p標籤2</p>")); });
點選 p標籤2 的時候不會彈出對話方塊。
示例2:
// delegate
$("#btn").click(function () {
$("#dv").append($("<p>p標籤</p>"));
$("#dv").delegate("p", "click", function () {
alert("p被點了");
});
$("#dv").append($("<p>p標籤2</p>"));
});
// on
$("#btn").click(function () {
$("#dv").append($("<p>p標籤</p>"));
$("#dv").on("click", "p", function () {
alert("p被點了");
});
$("#dv").append($("<p>p標籤2</p>"));
});
後新增的 p 標籤也會被繫結點選事件。
三、解綁事件
用什麼方式繫結的事件,最好用什麼方式解綁事件。
1、bind 解綁事件
語法:
// 解綁單個或多個事件
繫結事件的元素.unbind("事件名1 事件名2 ...");
// 解綁所有的事件
繫結事件的元素.unbind();
PS:unbind 也可以解綁
元素.事件名(事件處理函式)
方式的繫結事件。
2、delegate 解綁事件
語法:
// 解綁子元素單個或多個事件
父元素.undelegate("子元素", "事件1 事件2 ...");
// 解綁子元素的所有事件
父元素.undelegate();
下面的寫法是無效的:
父元素.undelegate("子元素");
,不能移除子元素的所有事件。
3、on 解綁事件
語法:
// 父元素和子元素的所有事件都會解綁
父元素.off();
// 父元素和子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...");
// 子元素的所有事件解綁
父元素.off("", "子元素");
// 子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...", "子元素");
// 父元素中所有的子元素的所有事件解綁
父元素.off("", "**");
// 父元素中所有的子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...", "**");
注意:子元素的所有事件解綁 。下面的寫法是無效的。
父元素.off("子元素");
相關推薦
從零開始學 Web 之 jQuery(六)為元素繫結多個相同事件,解綁事件
一、為元素繫結多個相同事件 1、方式一 $("#btn").click(function () { console.log("click1"); }).click(function () { console.log("click2"); }).cli
從零開始學 Web 之 DOM(六)為元素繫結與解綁事件
大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... +------------------------------------------------------------ github:https://github.com/Daotin/Web 微信公眾號:Web前端之
從零開始學 Web 之 jQuery(六)為元素綁定多個相同事件,解綁事件
png 好用 添加 方式 執行 存在 區別 也會 地址 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:http://ww
從零開始學 Web 之 jQuery(五)操作元素其他屬性,為元素繫結事件
一、操作元素的寬和高 1、方法一 元素.css("width"); 元素.css("height"); 最後得到的是字串型別的,比如 200px。 如果我們在設定為原來寬高2倍的時候,就要先把獲取的寬高轉換成數字型別,再乘以2,這樣操作比較麻煩,有沒有簡單的方法呢? 2、方法二 元素.width(屬性
從零開始學 Web 之 jQuery(二)獲取和操作元素的屬性
eight images idt 隱藏 lis 屬性 ner master lin 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔
從零開始學 Web 之 jQuery(七)事件冒泡,事件參數對象,鏈式編程原理
eval uri turn 定位 return 也會 否則 ont sele 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客
從零開始學 Web 之 Ajax(六)jQuery中的Ajax
var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web
從零開始學 Web 之 jQuery(三)元素操作,鏈式程式設計,動畫方法
一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20
從零開始學 Web 之 jQuery(八)each,多庫共存,包裝集,外掛
一、each 方法 each 方法用來遍歷 jQuery 物件的,它的引數是一個事件處理函式,這個事件處理函式有兩個引數,第一個引數是索引,第二個引數時索引對應的 DOM 物件,使用的時候注意轉成 jQuery 物件。 語法: // 引數1:元素集合索引 // 引數2:索引對應的DOM元素 元素集合.ea
從零開始學 Web 之 jQuery(七)事件冒泡,事件引數物件,鏈式程式設計原理
一、事件冒泡與阻止事件冒泡 事件冒泡:當一個元素觸發某個事件的時候,會把這個事件傳播到其父元素,一直到頂層元素。 阻止事件冒泡:在被觸發事件的子元素中新增 return false; 即可。 二、事件的觸發 之前講的繫結事件是事件觸發後的事件處理過程,並且上面的事件觸發是被動的事件觸發,怎麼可以主動觸發事
從零開始學 Web 之 jQuery(一)jQuery的概念,頁面載入事件
一、jQuery的概念 1、什麼是 JavaScript 庫? JavaScript 開發的過程中,處理瀏覽器的相容很複雜而且很耗時,於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。 把一些常用到的方法寫到一個單獨的 js 檔案,使用的時候直接去引用這js檔案就可以了,這個 js
從零開始學 Web 之 jQuery(四)元素的建立新增與刪除,自定義屬性
一、元素的建立新增和刪除 1、方式一:以物件的方式建立元素 append,appendTo :在被選元素所有子元素的結尾插入內容(增加子元素)。 prepend,prependTo:在被選元素所有子元素的開頭插入元素(增加子元素)。 before:在當前被選元素之後插入內容(相當於增加兄弟元素)。 af
從零開始學 Web 之 ES6(六)ES6基礎語法四
實現 fine 開始 isf 原理 mat 系列教程 include number 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔
從零開始學 Web 之 CSS3(六)動畫animation,Web字型
大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 部落格園:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/
從零開始學 Web 之 DOM(一)DOM的概念,對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好,這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,
從零開始學 Web 之 DOM(四)節點
def clas scrip while p標簽 設置 ner 操作 text 大家好,這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相
從零開始學 Web 之 BOM(三)offset,scroll,變速動畫函數
樣式 清理 java mar dde sof mov har width 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:
從零開始學 Web 之 Ajax(三)Ajax 概述,快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:ht
從零開始學 Web 之 Ajax(五)同步異步請求,數據格式
遊記 document 空閑 name center 20px 實現 resp 也會 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之
從零開始學 Web 之 HTML5(二)表單,多媒體新增內容,新增獲取操作元素,自定義屬性
器) user 對比 style 按鈕 ont mp3 url -- 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:ht