<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <ul>

     <li>111</li>

     <li>222</li>

     <li>333</li>

     <li>444</li>

     <li>555</li>

 </ul>

 <input value="+" type="button">

 <script src="jquery-3.2.1.js"></script>

 <script>

     $("ul li").bind("click",function () {

         alert(this.innerHTML);

     });

     $("ul").on("click","li",function () {

         alert("事件委托");

     });

     $("input").click(function () {

         $("ul").append("<li>666</li>")

     })

 </script>

 </body>

 </html>
这里我们是做了一个简单的HTML,里面有几个li标签. 然后给他们用3钟不同的绑定方法 绑定了3个事件,让我们来看看有什么区别

点击 + 后会出现  

回顾我们的3个方法,第3个函数是给input的标签 加上一个点击事件,当我们点击 + 号的时候,函数里给ul标签后面追加了新的li标签 所以我们点击一次就能看到新的 .666 的内容 (

这里我们用的和js的绑定方法格式很像,注意js中我们使用的是onclick,这里用的是click,jQuery中为了区分和js的不同,绑定事件一律把on去掉了)

函数1和2同样都是绑定方法,格式上有不同,意义上也有不同,bind方法是给标签绑定事件的方法,他比在标签里加入onclick要动态一些,而且可以批量绑定.

on方法也是同样可以批量绑定,那么他们的区别就在于,input标签点击后效果不同.

我们再来分析一下.input标签里点击后 是给代码树里多加了一行<li>666</li>标签,但是我们之前用bind绑定的方法却没有办法同时也批量绑定进去,这是因为程序的逻辑顺序造成的.虽然bind表面上是绑定ul下的所有li.

这时候就可以用on方法绑定了.这个方法有一个名字叫事件委托.能达到后来的标签同样有效果.注意的是 这里的li要写到on()内 不然和bind是一个意思了

用jQuery来绑定事件的3种方法和区别的更多相关文章

  1. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  2. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  3. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  4. 一、winForm-DataGridView操作——控件绑定事件的两种方法

    在winForm窗体中绑定(注册)事件的方法有两种: 一.绑定事件 双击控件,即进入.cs的代码编辑页面,会出现 类似于“ private void 控件名称_Click(object sender, ...

  5. jq给动态生成的标签绑定事件的几种方法

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...

  6. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  7. js&jquery：添加事件的三种方法和常用的一些事件

    一.添加事件的方法 1.EventTarget.addEventListener添加 获取事件目标元素,通过addEventListener函数添加 // Assuming myButton is a ...

  8. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  9. jQuery绑定事件的四种方式

      jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...

随机推荐

  1. docker+selenium grid解决node执行经常卡死

    执行用例时出现下图: 可以在启动node节点容器时添加如下红色字体的参数 docker run -d -p 5903:5900 --shm-size=512m --link selenium_hub: ...

  2. ZKEACMS 模板组件扩展

    前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...

  3. commons工具类

    转自:https://blog.csdn.net/leaderway/article/details/52387925 1.1. 开篇 在Java的世界,有很多(成千上万)开源的框架,有成功的,也有不 ...

  4. MongoDB集群方案介绍

    MongoDB集群方案介绍 一.什么是mongodb集群? 是指由多台mongodb服务器组成的服务器集群,称之为mongodb集群. 二.mongodb集群搭建的方式: 1.Replica Set  ...

  5. Android Camera开发经验总结以及踩过的那些坑

    写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...

  6. HTML中input和button设置同样高度却不能等高的原因

    同样设置35px,input略显高: input加个样式就行 box-sizing: border-box;

  7. Jquery中each

    1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function  ...

  8. 2019.2.14 t3 车辆销售

    用算法求最大生成树,在并查集合并时,把原本的一个根连向另一个 根改成两个根都连向一个新建的节点,并把当前正在处理的边的权值赋给这个新 节点做点权.这样形成的结构会是一棵树. 一个点的答案大致上是树的根 ...

  9. sqlalchemy 常用总结

    mysql-5.7安装 https://blog.csdn.net/since_1904/article/details/70233403 flask-sqlalchemy教程 http://www. ...

  10. 求两个数a、b的最大公约数

    //求两个数a.b的最大公约数 function gcd(a,b){ return b===0?a:gcd(b,a%b) }