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. 学习Acegi应用到实际项目中（1）

    在此,本人声明,我处于菜鸟阶段,文章的内容大部分摘自zhanjia的博客(http://zhanjia.iteye.com/category/43399),旨在学习,有很多地方,我理解不够透彻,可能存 ...

  2. okhttp 调用相机 上传服务器

    MainActivity package com.bwie.lianxi1; import android.content.Intent; import android.database.Cursor ...

  3. Alpha冲刺 - (6/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 - 过去两天完成了哪些任务 1. 基于ssm框架的前后端交互 ...

  4. Python自动化开发 - 堡垒机实例

    本节内容 一.堡垒机介绍 1. SSHClient 2. SFTPClient 3. Transport 二.堡垒机实现 一.堡垒机介绍 1. SSHClient 用户连接远程服务器并执行基本命令 1 ...

  5. [Linux/Ubuntu] vi/vim 使用方法讲解

    vi/vim 基本使用方法 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的 ...

  6. [算法专题] Binary Tree

    1 Same Tree https://leetcode.com/problems/same-tree/ Given two binary trees, write a function to che ...

  7. JS中多维数组的深拷贝的多种实现方式

    因为javascript分原始类型与引用类型(与java.c#类似).Array是引用类型,所以直接用=号赋值的话,只是把源数组的地址(或叫指针)赋值给目的数组,并没有实现数组的数据的拷贝.另外对一维 ...

  8. 第九节：详细讲解Java中的泛型，多线程，网络编程

    前言 大家好,给大家带来详细讲解Java中的泛型,多线程,网络编程的概述,希望你们喜欢 泛型 泛型格式:ArrayList list= new ArrayList(); ArrayList list= ...

  9. MySQL mysqlbinlog 访问mysql-bin日志出错

    问题 mysqlbinlog -v -v --base64-output=DECODE-ROWS mysql-bin.000166 | less ERROR: Error in Log_event:: ...

  10. [视频]K8飞刀 hacking team flash0day shellcode exploit

    [视频]K8飞刀 hacking team flash0day shellcode exploit 链接:https://pan.baidu.com/s/1aVEElE2Y6zhOkaWKsUZ7Hg ...