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. html-day06

    html-day06 1.定位 定位: 1.普通流定位 普通流,又称为文档流 块级元素:从上到下一个一个的排列 行内元素:一行内从左到右的排列 2.浮动定位 1.什么是浮动定位 将元素排除在普通流之外 ...

  2. jdk8中关于操作集合的一些新特性，遍历和排序操作

    jdk8增加了不少新的东西,在集合操作这块,就有如 lamda表达式,stream,sort,optional等新的类,主要涉及遍历和排序等方面,新特性提升了不少性能,我们开发就是要拥抱新事物,守着老 ...

  3. 关于esp32的ADC采集

    对于ADC采集 程序源码如下: /* ADC1 Example This example code is in the Public Domain (or CC0 licensed, at your ...

  4. 异步请求获取JSON数据

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. <script type="text/javascript"> funct ...

  5. 本地调用QQ只需要一句代码

    如下图:点击在线客服以后,弹出QQ登录框 经测试,如果已经登录QQ,可能会提示版本不支持该功能,让你升级,但并不一定就是说你QQ版本需要更新,只是因为你QQ已经登录 有的浏览器可能因为出于安全考虑,会 ...

  6. Java学习笔记48（DBUtils工具类一）

    上一篇的例子可以明显看出,在增删改查的时候,很多的代码都是重复的, 那么,是否可以将增删改查封装成一个类,方便使用者 package demo; /* * 实现JDBC的工具类 * 定义方法,直接返回 ...

  7. Django创建和配置文件

    首先我们随便找一个文件 shift+鼠标右键 点击打开 Powershell 窗口 然后输入命令  django-admin startproject 项目名字 输入cd day   进入这个项目下 ...

  8. Jenkins 集成Sonar代码质量扫描

    Jenkins上安装插件 在jenkins插件安装界面安装: 插件名 SonarQube Scanner for Jenkins Jenkins上配置 jenkins中操作:系统管理-系统设置,找到 ...

  9. python 使用PyInstaller将程序打包

    PyInstaller可以用来打包python应用程序,打包完的程序就可以在没有安装Python解释器的机器上运行了.类似于C#窗体程序使用Setup Factory 9 Trial进行打包. 安装: ...

  10. library Makefiles

    libpng library Makefile LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LS_C=$(subst $(1)/,,$(wild ...