jQuery笔记(事件绑定和解绑)

事件绑定
一、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
 



猜你喜欢

转载自www.cnblogs.com/baabaabaa/p/11530533.html
今日推荐