<!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. C#里面获得应用程序的当前路径

    在C#里面获得应用程序的当前路径 Environment.CurrentDirectorySystem.IO.Directory.GetCurrentDirectory() ——上面两种获得的是当前路 ...

  2. 爆款AR游戏如何打造？网易杨鹏以《悠梦》为例详解前沿技术

    本文来自网易云社区. 7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行.本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术.新实践,如AR.区块链.安全.大数据等. 网易 ...

  3. Django-01Django简介

    1 MVC与MTV模型 MVCWeb服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业 ...

  4. 51nod-迷宫问题（Dijkstra算法）

    关于Dijkstra算法的博文 http://www.cnblogs.com/skywang12345/p/3711512.html#anchor2 Dijkstra算法是一个经典的算法——他是荷兰计 ...

  5. javascript点击兼容所有浏览器封装

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Centos系统优化

    系统优化脚本 #!/bin/bash #author junxi by #this script is only for CentOS 7.x #check the OS platform=`unam ...

  7. “全栈2019”Java第八十三章：内部类与接口详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. “全栈2019”Java第七十一章：外部类访问静态内部类成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. Logstash 性能及其替代方案

    介绍 当谈及集中日志到 Elasticsearch 时,首先想到的日志传输(log shipper)就是 Logstash.开发者听说过它,但是不太清楚它具体是干什么事情的: 当深入这个话题时,我们才 ...

  10. selenium爬取qq空间，requests爬取雪球网数据

    一.爬取qq空间好友动态数据 # 爬取qq空间好友状态信息(说说,好友名称),并屏蔽广告 from selenium import webdriver from time import sleep f ...