jQuery笔记（事件绑定和解绑）

最新推荐文章于 2022-12-13 12:05:04 发布

LX522570

最新推荐文章于 2022-12-13 12:05:04 发布

阅读量232

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/baabaabaa/p/11530533.html

版权

事件绑定
一、bind()
1.传两参数 第一个参数是事件名，第二个是事件处理函数
2.传键值对(对象)

<body>
    <input type="button" value="点我" id="btn">
</body>

$("#btn").bind("click",function () {
    alert("我不要你觉得，我要我觉得");
});

//或写成键值对(对象)
$("#btn").bind({"click":function () {
    alert("我不要你觉得，我要我觉得");
}});

//多个事件共用一个事件处理函数的时候，还可以这样写
$("#btn").bind({"mouseover mouseout":function () {
    $(this).append("<p>我不要你觉得，我要我觉得</p>")
}});


二、delegete()

delegete() 与bind()相似
差别在于这个函数是给子元素绑定函数
参数：1.要绑定事件的子元素
     2.事件
     3.事件处理函数

三、on()

最推荐使用的事件绑定方法，主流
结合了bind和delegate两者的用途
两个参数时：（类似于bing）
  1.事件名
  2.事件处理函数
三个参数：（类似于delegate）
  1.事件名
  2.绑定事件的子元素
  3.事件处理函数
以下两种写法，实现的效果都是一样的噢

<div id="dv">
　　<button>冰箱不够怎么办</button>
</div>

//第一种写法
$("#dv button").on("click",function () {
    alert("买！");
});
//第二种写法
 $("#dv").on("click","button",function () {
    alert("买！");
});

事件解绑

有绑定就有解绑
* on<=>off
* delegate<=>undelegate
* bind<=>unbind
* 注意：解绑时，只会解绑自身事件，不会将子级的事件解绑。

关于冒泡，可以通过return false可以避免冒泡

总结：
*   bind():
*       1.$("绑定事件的元素").bind("事件",事件处理函数);
*       2.$("绑定事件的元素").bind({"事件1",事件处理函数1,"事件2",事件处理函数2,..."事件n",事件处理函数n});
*   delegate():
*       $("父级元素").delegate("子级元素","事件",事件处理函数);
*   on():
*       1.$("绑定事件的元素").on("事件",事件处理函数);
*       2.$("绑定事件的元素").on({"事件1",事件处理函数1,"事件2",事件处理函数2,..."事件n",事件处理函数n});
*       3.$("父级元素").on(""事件",子级元素",事件处理函数);

* on<=>off
* delegate<=>undelegate
* bind<=>unbind

转载于:https://www.cnblogs.com/baabaabaa/p/11530533.html