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

2019-09-16 22:04:36 阅读：134 来源： 互联网

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

标签：jQuery,事件处理,元素,函数,bind,绑定,笔记,事件
来源： https://www.cnblogs.com/baabaabaa/p/11530533.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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