<!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. windows8.1 windows defender service无法启动解决方案

    分析:当pc安装第三方杀毒软件,比如360杀毒,这时候360会强制关闭mse杀毒服务,无法在服务栏目里启动.由于windows defender service是系统强制启动进程,无法在系统启动后进行 ...

  2. js和C# 时间日期格式转换

    下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整 ...

  3. Python 单元测试 增强系统健壮性

    问题背景交代 注意,JulyNovel只爬取免费小说,所有vip章节全部导航至起点网站,遵循robots协议,所有数据仅供学习用途,侵删 通过编写单元测试,提高JulyNovel系统可靠性 首先我们知 ...

  4. LEFT JOIN与RIGHT JOIN学习笔记

    SELECT COUNT(*) FROM [tbiz_PuzzleBasic] SELECT A.BasicID,A.Name,A.Gender,B.WorkID,B.Company,B.Positi ...

  5. OOM AutoMapper的简单实用

    OOM  AutoMapper的简单实用 一.前言: OOM顾名思义,Object-Object-Mapping实体间相互转换,AutoMapper也是个老生常谈了,其意义在于帮助你无需手动的转换简单 ...

  6. orcal exists

    Oracle使用了一个复杂的自平衡B-tree结构.通常,通过索引查询数据比全表扫描要快.当 Oracle找出执行查询和Update语句的最好路径时,Oracle优化器将使用索引.同样在联结多个表时使 ...

  7. 爬虫开发14.scrapy框架之分布式操作

    分布式爬虫 一.redis简单回顾 1.启动redis: mac/linux:   redis-server redis.conf windows: redis-server.exe redis-wi ...

  8. swoft| 源码解读系列一: 好难! swoft demo 都跑不起来怎么破? docker 了解一下呗~

    title: swoft| 源码解读系列一: 好难! swoft demo 都跑不起来怎么破? docker 了解一下呗~description: 阅读 sowft 框架源码, swoft 第一步, ...

  9. 洛谷P5273 【模板】多项式幂函数 (加强版)

    题面 传送门 题解 这里最麻烦的问题就是它不保证\(A_0=1\) 如果\(A_0>1\),那么直接整个多项式乘上个\(A_0\)的逆元,最后输出答案的时候再把答案乘上\({A_0}^m\) 如 ...

  10. samba使用

    一. samba安装 1. 安装:apt-get install samba samba-common smbclient 安装成功后,会默认启动samba服务, 可用ps-ef | grep smb ...