大家好, 这里是 从零开始学 web 系列教程 , 并在下列地址同步更新......
github: https://github.com/Daotin/Web
微信公众号: Web 前端之巅 https://github.com/Daotin/pic/raw/master/wx.jpg
博客园: http://www.cnblogs.com/lvonve/
CSDN: https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始, 一步步学习 Web 相关的知识点, 期间也会分享一些好玩的项目. 现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一, 为元素绑定多个相同事件
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("子元素");
来源: https://www.cnblogs.com/lvonve/p/9296044.html