jQuery目前有on(),bind(),delegate(),live()四种绑定方式，但是随着版本的不断更新，有的方式也相应的被淘汰掉

【band()方式绑定】

3.0版本之前的绑定方式比较常用的是bind()绑定事件，解除事件的方式是unbind(),但是在3.0之后band()的绑定方式也别相应的解除掉了。bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件，是没有办法达到效果的，如下代码。

 <body>

 <button id="add" type="button">add DIV</button>

 <button id="del" type="button">del DIV</button>

 <button id="onBtn" type="button">绑定事件</button>

 <button id="offBtn" type="button">解绑事件</button>

 <div id="container">

     <div class='created'>我是原生div<div/>

 </div>

 </body>

 <script>

     $(function () {

         $("#add").click(function(){

             $("#container").prepend("<div class='created'>我是动态生成的div<div/>")

         });

         $("#del").click(function(){

             $("div").remove(".created:first")

         });

         $("#onBtn").click(function(){

             $("#container").on("click",".created",function(){

                 alert(1);

             });

         });

         $("#offBtn").click(function(){

             $("#container").off("click");

         })

     })

 </script>

delegate(),live()两种绑定方式并不太常用，因此推荐下面这种方式，on()绑定。

【on()事件绑定】

① 使用on进行单事件绑定

$("button").on("click",function(){
$(this) 取到当前调用事件函数的对象
console.log($(this).html());
});

② 使用on同时为多个事件，绑定同一函数
$("button").on("mouseover click",function(){
console.log($(this).html())
})；

③ 调用函数时，传入自定义参数
$("button").on("click",{name:"jianghao"},function(event){
使用event.data.属性名 找到传入的参数
console.log(event.data.name);
})

④ 使用on进行多事件多函数绑定
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver")
}
});

⑤ 使用on进行事件委派
 >>> 将原本需要绑定到某元素上的事件，改为绑定在父元素乃至根节点上，然后委派给当前元素生效；
eg：$("p").click(function(){});
 $(document).on("click","p",function(){});
作用：
默认的绑定方式，只能绑定到页面初始时已有的p元素，当页面新增p元素时，无法绑定到新元素上；
使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件

off() 取消事件绑定
1. $("p").off(): 取消所有事件
2. $("p").off("click"): 取消点击事件
3. $("p").off("click mouseover"):取消多个事件
4. $(document).off("click","p"):取消事件委派

jQuery中的事件绑定的几种方式的更多相关文章

  1. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  2. js中的事件绑定的三种方式

    1 直接在html标签中绑定 <button onclick = "show()"></button> 注意当你引用的js代码是包裹在window.onlo ...

  3. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  6. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  7. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  8. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  9. jQuery 中的事件绑定与取消绑定

    1:在jQuery中使用bind方法进行事件的绑定,bind方法有两个参数,第一个参数是事件的类型例如click,change,keyup,keydown,blur,focus等.第二个参数是一个回调 ...

随机推荐

  1. 20175316盛茂淞 2018-2019-2 《Java程序设计》第2周学习总结

    20175316盛茂淞 2018-2019-2 <Java程序设计>第2周学习总结 教材学习内容总结 1.整数:可细分为为short整数(占2字节),int整数(占4字节),long整数( ...

  2. selenium中动作链的使用

    一.问题 我们有时候在使用selenium的时候,会遇到悬停后点击元素的操作,因此需要一个动作链来完成这个功能. 二.解决 从selenium的包中导入actionchains函数,利用xpath找到 ...

  3. Release file is expired, Updates for this repository will not be applied.(资源索引文件过期问题)

    将Debian下载源同步到本地之后,通过本地资源地址进行apt update操作时提示过期问题: E: Release file for http://localhost/security/dists ...

  4. sublime将python的运行结果在命令行显示

    sublime将python的运行结果在命令行显示 为什么这么折腾? 因为每次查看输出结果都要上下拖动窗口,很烦. 将build system修改为 { "cmd": [" ...

  5. 通过selenium登录网页获取特定信息

    前言 最近有需求要登录网站查询一些信息,然后再修改一些信息,而且这种工作重复性很强,想着通过自动化的方式来做这个东西. 技术选择 自动化的方式开始考虑的是用python的爬虫来做,但是登录的网站有好多 ...

  6. HTML之<meta>使用和说明

    关于<meta>,我们都不陌生,随意打开一个网页查看源代码就可以看到<head>里出现它的身影. 简单来说,<meta>是描述 HTML 文档的元数据.例如网页描述 ...

  7. Pycharm的激活码，亲测可用（20181223）

    K03CHKJCFT-eyJsaWNlbnNlSWQiOiJLMDNDSEtKQ0ZUIiwibGljZW5zZWVOYW1lIjoibnNzIDEwMDEiLCJhc3NpZ25lZU5hbWUiO ...

  8. Struts2下载及简介

    Struts2下载及简介 一.Struts2下载: 进入网址:http://struts.apache.org/download.cgi#struts23163 可以下载最新的Struts2. 1.F ...

  9. 微信小程序之自定义模态弹窗（带动画）实例

    1.基本需求. 实现用户自定义弹框 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容,自定义事件获取 2.案例目录结构 二.程序实现具体步骤 1.弹框index.wxml代码 ...

  10. 【Fiddler学习】Fiddler教程，比较经典全面（转）

    简介 Fiddler(中文名称:小提琴)是一个HTTP的调试代理,以代理服务器的方式,监听系统的Http网络数据流动,Fiddler可以也可以让你检查所有的HTTP通讯,设置断点,以及Fiddle所有 ...