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程序设计》实验一 Java开发环境的熟悉 实验报告

    20175316 盛茂淞 2018-2019-2 <Java程序设计>实验一 Java开发环境的熟悉 实验报告 一.实验要求 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA ...

  2. 在linux中文件的权限讲解

    1.d:directory(目录): 表示这个文件是个目录,其他的还有f(file文件)等等: 2.r:read(可读) 3.w:write(可写) 4 x :execute(可执行) 一般Linux ...

  3. javabean的特点

    javabean的三个基础条件 1.拥有私有的属性 2.共有的get,set方法 3.默认的构造方法

  4. Java字符串池（String Pool）深度解析

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 在工作中,String类是我们使用频率非常高的一种对象类型.JVM为了提升性能和减少内存开销,避免字符串的重复创建,其维护了一块特殊的内存 ...

  5. 第一阶段：Java内功秘籍-线性表

    前言 为什么要学习数据结构与算法,如果你学会了做安卓,javaweb,前端等,都是你的武功秘籍,但是如果你的内功不够好,再厉害的功夫也是白费. 数据结构和算法:什么是数据结构,什么是数据,在计算机内部 ...

  6. 利用nodejs安装并运行express的三个坑

    概述 这是我安装并运行express的三个坑,应该是比较常见的,在此记录一下. 内容 express不是内部或外部命令 输入命令:express -V 报错:'express' 不是内部或外部命令,也 ...

  7. Spring Boot --- Swagger基本使用

    1. pom <!-- swagger2 --> <dependency> <groupId>io.springfox</groupId> <ar ...

  8. 机器学习技法笔记：14 Radial Basis Function Network

    Roadmap RBF Network Hypothesis RBF Network Learning k-Means Algorithm k-Means and RBF Network in Act ...

  9. 机器学习基石笔记：10 Logistic Regression

    线性分类中的是非题------>概率题, 设置概率阈值后,大于等于该值的为O,小于改值的为X.------>逻辑回归. O为1,X为0: 逻辑回归假设: 逻辑函数/S型函数:光滑,单调, ...

  10. [原]Windows Azure开发之Linux虚拟机

      Windows Azure是微软的云服务集合,用来提供云在线服务所需要的操作系统与基础存储与管理的平台,是微软的云计算的核心组成组件之一.其中windows azure提供的最重要的一项服务就是虚 ...