首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

作者头像
Daotin
发布2018-08-31 11:17:36
6760
发布2018-08-31 11:17:36
举报

一、为元素绑定多个相同事件

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("子元素");

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-07-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、为元素绑定多个相同事件
  • 1、方式一
  • 2、方式二
  • 二、元素绑定事件的区别
  • 三、解绑事件
    • 1、bind 解绑事件
      • 2、delegate 解绑事件
        • 3、on 解绑事件
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档