重点事件注册.on()

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .hue {

      background-color: #0ff;

    }

  </style>

</head>

<body>

  <input type="button" value="增加" id="btn">

  <input type="button" value="自定义" id="btn1">

  <input type="button" value="移除" id="btn2">

  <div>

    <p>我是一个P</p>

  </div>

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

  <script>

    /* on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

    $(selector).on(event,childSelector,data,function)

        event    必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。

        childSelector    可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

        data    可选。规定传递到函数的额外数据。

        function    可选。规定当事件发生时运行的函数。

      自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

      注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

      提示：如需移除事件处理程序，请使用 off() 方法。

      提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。 */

    $(function () {

      //给btn注册点击事件

      $("#btn").on("click", function () {

        $("<p>我是新建的p元素</p>").appendTo("div");

      });

      //注册多个事件

      $("p").on("mouseover mouseout", function () {

        $("p").toggleClass("hue");

      });

      //给div注册委托事件

      $("div").on("mouseover mouseout", "p", function () {

        $("p").toggleClass("hue");

      });

      //多个事件 各自处理函数

      $("p").on({

        mouseover: function () {

          $("p").css("background-color", "lightgray");

        },

        mouseout: function () {

          $("p").css("background-color", "lightblue");

        },

        click: function () {

          $("p").css("background-color", "yellow");

        }

      });

      //自定义事件

      $("p").on("myOwnEvent", function (event, showName) {

        $(this).text(showName + "单击此按钮可将自定义事件附加到此p元素上。").show();

      });

      $("#btn1").click(function () {

        $("p").trigger("myOwnEvent", ["小白+"]);

      });

      //off（）移除on方法添加的事件

      $("#btn2").click(function () {

        $("p").off("click");

      });

    });

  </script>

</body>

</html>

1.bind()方法

//bind方式

      //bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

      //自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

      //语法：$(selector).bind(event,data,function,map)

      //event    必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

      //data    可选。规定传递到函数的额外数据。

      //function    必需。规定当事件发生时运行的函数。

      $("p").bind("mouseover mouseout", function () {

        $("p").toggleClass("intro");

      });

2.delegate()

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

  </script>

  <script>

    //delegate:代理，委托(给父元素注册委托事件，最终还是有子元素来执行。)

    //$('div').delegate(childSelector,event,data,function)

    //delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

    //使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

    //(自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。)

    //childSelector    必需。规定要添加事件处理程序的一个或多个子元素。(真正执行事件的子元素)

    //event    必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

    //data    可选。规定传递到函数的额外数据。

    //function    必需。规定当事件发生时运行的函数。

    $(document).ready(function () {

      $("div").delegate("p", "click", function () {

        $(this).slideToggle();

      });

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

        $("<p>这是一个新段落。</p>").insertAfter("button");

      });

    });

  </script>

</head>

<body>

  <p><b>注意:</b> 只有在 div 元素中的 p 元素才有效果。</p>

  <div style="background-color:yellow">

    <p>这是一个段落。</p>

    <p>点击任意一个 p 元素，使其消失，包括这个。</p>

    <button>在这个按钮后新增一个 p 元素</button>

  </div>

</body>

</html>

jQuery 事件注册的更多相关文章

  1. jquery 事件注册 与重复事件处理

    <!doctype html><html lang="us"><head><meta charset="utf-8"& ...

  2. jquery 事件对象笔记

    jQuery元素操作 设置或获取元素固有属性   获取               prop(属性名)    修改               prop(属性名,值) 获取自定义属性          ...

  3. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  4. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  5. 解密jQuery事件核心 - 自定义设计（三）

    接上文http://www.cnblogs.com/aaronjs/p/3447483.html 本文重点:自定义事件 “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率 ...

  6. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  7. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  8. jquery事件学习笔记（转载）

    一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向wi ...

  9. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

随机推荐

  1. CMD一般命令

    返回根目录:cd\ 回车 进入D盘:输入cd\ 回车,返回根目录,再输入d:回车,即可进入d盘(注意:字符都是英文字符) 进入D盘叫JDK的文件夹:如上面进入d盘后,输入:cd jdk 回车即可 进入 ...

  2. 阿里云服务器ECS按ctrl+alt+delete无法登录

    今天在使用阿里云服务器远程桌面的时候发现怎么也进入不了,远程桌面无法连接,于是想到了在阿里云服务器管理控制台可以使用连接管理终端进行远程桌面连接,下面详细介绍阿里云服务器操作经验. 操作步骤如下 登录 ...

  3. Qracle 11g 插图安装

    1.下载两个包 然后把包二的内容放入包一里 2.管理员身份运行setup 3.选择去掉复选框 4.下一步,然后选择是 5.选择第一项,然后选择下一步 6.个人使用选桌面类 7.不要放在C盘中 8.设置 ...

  4. int *a[] 与(int *)a【5】的区别

    *a[5] 是指针数组  可以指向5个值 (*a)[5]  是一个指针,但这个指针只能指向包含5个元素的一维数组 a是一个数组,每个元素都是个指针. b是一个指针,指向一个数组 1.int *a[5] ...

  5. MFC中的多线程

    程序是计算机指令的几何,以文件的形式存在磁盘上.进程被定义为正在运行的程序的实例,是在进行地址空间中的一次执行活动.一个程序可以对应多个进程,如可以通过打开多个Word程序,每个word的应用就是一个 ...

  6. B-spline Curves 学习之B样条曲线的系数计算与B样条曲线特例（6）

    B-spline Curves: Computing the Coefficients 本博客转自前人的博客的翻译版本,前几章节是原来博主的翻译内容,但是后续章节博主不在提供翻译,后续章节我在完成相关 ...

  7. handsontable-常用配置

    冻结单元格 var //自动创建数据 myData = Handsontable.helper.createSpreadsheetData(100, 50), container = document ...

  8. MSP430 G2553 基本时钟模块+ (Basic Clock Module+)

    一.时钟源 MSP430的Basic Clock Module+支持的时钟源有: DCOCLK:内部数字控制振荡器,Internal digitally contrlled oscillator.所有 ...

  9. Linux socat轻松实现TCP/UDP端口转发

    1.TCP端口转发 socat -d TCP4-LISTEN:,reuseaddr,fork TCP4: 2.UDP端口转发 socat -T UDP4-LISTEN:,reuseaddr,fork ...

  10. Jenkins的多个任务并串联参数传递

    Jenkins的多个任务并串联参数传递 Parameterized Trigger Plugin插件可以使多个job连接的时候可以传递一些job相关的参数信息. 1.Parameterized Tri ...