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. diango中的url路由系统

    一.url配置 url本质是url与要为该url调用的视图函数之间的映射表 urlpatterns = [正则,视图函数[,别名]] 二.正则表达式 1.匹配原则 django是循环urlpatter ...

  2. jvm参数与GC

    一.JVM的新生代.老年代.与永久代 JVM中的堆,一般分为三大部分:新生代.老年代.永久代: 1.新生代:主要是用来存放新生的对象,一般占据堆的1/3空间.由于频繁创建对象,所以新生代会频繁触发Mi ...

  3. drf1 rest & restful规范

    web服务交互 我们在浏览器中能看到的每个网站,都是一个web服务.那么我们在提供每个web服务的时候,都需要前后端交互,前后端交互就一定有一些实现方案,我们通常叫web服务交互方案. 目前主流的三种 ...

  4. qhfl-7 结算中心

    结算中心,即从购物车前往支付前的确认页面,这里要开始选择优惠券了 """ 前端传过来数据 course_list 课程列表 redis 中将要存放的结算数据 { sett ...

  5. Linux运维40道精华题

    题目 1.什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常,在他运转的过程中,对他进行维护,他集合了网络.系统.数据库.开发.安全.监控 ...

  6. 如何在html与delphi间交互代码

    [转]如何在html与delphi间交互代码 (2015-11-19 22:16:24) 转载▼ 标签: it 分类: uniGUI uniGUI总群中台中cmj朋友为我们总结了如下内容,对于利用de ...

  7. 在Azure DevOps Server的代理服务器安装Python环境

    Python和Azure DevOps Server Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初主要为系统运维人员编写自动化脚本,在实际应用中,Python已经在前端 ...

  8. 【spring源码分析】IOC容器初始化——查漏补缺（一）

    前言:在[spring源码分析]IOC容器初始化(十一)中提到了初始化bean的三个步骤: 激活Aware方法. 后置处理器应用(before/after). 激活自定义的init方法. 这里我们就来 ...

  9. 【练习】Java中的读文件，文件的创建，写文件

    前言 大家好,给大家带来Java中的读文件,文件的创建,写文件的概述,希望你们喜欢 读文件 public static void read(String path,String filename){ ...

  10. Java学习笔记51（综合项目：家庭记账系统）

    javaEE的开发模式 1．什么是模式 模式在开发过程中总结出的“套路”,总结出的一套约定俗成的设计模式 2．javaEE经历的模式 model1模式: 技术组成:jsp+javaBean model ...