<!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. [Erlang15]“hello world”与<<”hello world”>>的具体区别是什么？

    参见 :http://learnyousomeerlang.com/buckets-of-sockets 为了加深理解,自译如下,若理解有误或更好的建议,请帮忙指出, :) Buckets of So ...

  2. 学习做爬虫-vs2017

    最近新装了vs2017,安装过程发生了很大的变化,操作变的更加容易了. 下载vs安装程序进行安装.更新界面如图所示,我选择了安装免费个人版(这个是已安装的更新界面,和安装界面差不多) 如图所示,这样的 ...

  3. MySQL8.0本地访问设置为远程访问权限

    1.登录MySQL mysql -u root -p 输入您的密码 2.选择 mysql 数据库 use mysql; 因为 mysql 数据库中存储了用户信息的 user 表. 3.在 mysql ...

  4. 【Selenium专题】WebDriver启动Chrome浏览器（二）

    官方API Constructor Summary ChromeDriver() Creates a new ChromeDriver using the default server configu ...

  5. python urllib2 对 http 的 get，put，post，delete

    #GET: #!/usr/bin/env python# -*- coding:utf-8 -*-import urllib2def get():    URL = 'www.baidu.com'   ...

  6. 用Visual Studio 2015成功编译、发布UMDF驱动到目标机！！

    开发工具:Visual Studio 2015企业版 主      机:windows10 X64企业版,主机是安装了Visual Studio 2015的操作系统,主要进行驱动开发和调试. 目  标 ...

  7. 936. Stamping The Sequence

    You want to form a target string of lowercase letters. At the beginning, your sequence is target.len ...

  8. 深入了解java虚拟机（JVM） 第五章 如何判断对象为垃圾对象

    本章开始学习垃圾回收的过程,垃圾回收的过程首先就是要确定对象是否是垃圾对象,如果是垃圾对象,垃圾回收器才会进行回收.垃圾回收主要又两种算法:引用计数算法和可达性分析算法. 一.引用计数算法 引用计数算 ...

  9. Layout1:Grid（补交作业）

    Layout1:Grid 这一节我们来讲解一下一个layout:gird. 首先上一段代码: <Page x:Class="Gridstudy.MainPage" xmlns ...

  10. 傻瓜式学Python3——列表

    前言: 好久不见,突然发觉好久没写博客了,最近迷上了 Python 无法自拔,了解了一下,Python 简单易学,尤其是接触过java的人,入门 Python 更是门槛极低,本着学习记录的原则,边学习 ...