js和jquery绑定的区别?

  HTML或原生js是单一对应绑定的,绑多了只留最后一个。jQuery是追加绑定的,绑多少执行多少。这个在每一本jQuery的书中都是首先提到的事情。

jquery绑定与解绑

  1. on()  推荐

<div class="outter">
<input class="btn0" type="button" />
</div>
// 绑定
$(".outter").on("click", ".btn0", function() {
alert("click btn0 by .on");
}); // 解绑
$(".outter").off("click");

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

如需移除事件处理程序,请使用 off() 方法。

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。自 jQuery 版本 1.7 起,off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。

如需添加只运行一次的事件然后移除,请使用 one() 方法。

  2.bind()

// 绑定
$(".btn0").bind("click", function() {
alert("click btn0 by .bind");
}); // 解绑
$(".btn0").unbind("click");
// 或者
$(".btn0").unbind();

bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

  简写形式:

$(".btn0").click(function() {
alert("click btn0 by .click");
});

  3.live()

// 绑定
$(".btn0").live("click", function() {
alert("click btn0 by .live");
}); // 解绑
$(".btn0").die();

live() 方法为被选元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

  4.delegate()

// 绑定
$(".outter").delegate(".btn0", "click", function() {
alert("click btn0 by .delegate");
}); // 解绑
$(".outter").undelegate();

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

jquery触发事件

$(".btn0").trigger("click");

trigger() 方法触发被选元素的指定事件类型。

最新文章

  1. ES5 对数组方法的扩展 以及 正则表达式
  2. About_MySQL Select--来自copy_03
  3. Cocos2d-x优化中多线程并发访问
  4. BZOJ 4052 Magical GCD
  5. 为了启动我在openshift的angular应用
  6. 【ASP.NET MVC路由测试+性能调试工具】
  7. Virtualbox 启动虚拟机报错以及扩展、显卡驱动安装
  8. replace()随笔
  9. css中自定义字体
  10. 帝国cms中下拉框select的绑定
  11. jenkins使用5----gi服务器搭建连接
  12. leetcode每日刷题计划-简单篇day1
  13. linux_vim编辑文件无法高亮显示解决方法
  14. 解决Tomcat v6.0 Server at localhost was unable to start within 45 seconds
  15. 【剑指offer】逆序输出链表
  16. html 导出pdf
  17. 实战c++中的string系列--不要使用memset初始化string(一定别这么干)
  18. 【转】eval()函数用法
  19. systemctl使用
  20. HDU3864 D_num

热门文章

  1. Docker操作删除所有容器镜像
  2. css3的clip-path方法剪裁实现
  3. nfs+keepalived高可用
  4. 提示“Web打印服务CLodop未安装启动”的各种原因和解决方法
  5. 学习 Spring (三) Bean 的配置项 &amp; 作用域
  6. React 学习(五) ---- 条件和列表渲染
  7. bzoj-1191(二分图最大匹配)
  8. 基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目
  9. avpicture_fill的实现
  10. Civil 3D 2017本地化中VBA程序移植到2018版中