重点事件注册.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. How To Check Member In Window VS With CplusPlus?

    实例说明 下面这个实例代码, 快速举例了在Win32应用程序下,对于内存的泄漏检查. 其中的原理,目前本人还是不太的理解. 只是记录了使用方法. 以后,看情况,会更新的. #ifdef _WIN32 ...

  2. Visual Studio工具 vcpkg简介

    博客参考: https://blog.csdn.net/cjmqas/article/details/79282847#43-%E7%A7%BB%E9%99%A4%E5%85%A8%E5%B1%80% ...

  3. [SoapUI]怎样获取隐藏元素的文本内容Get text of hidden element

    隐藏元素无法通过gettext()获取其文本内容,须用javascript来获取 String actualDataPointName = (String) ((JavascriptExecutor) ...

  4. Java Thread系列（四）线程通信

    Java Thread系列(四)线程通信 一.传统通信 public static void main(String[] args) { //volatile实现两个线程间数据可见性 private ...

  5. DataStage 错误集(持续更新)

    DataStage 错误集(持续更新) DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 D ...

  6. iOS Orientation获取

    [iOS Orientation获取] 1.[[UIDevice sharedInstance] orientation] 必须调用beginGeneratingDeviceOrientationNo ...

  7. 分布式事务,EventBus 解决方案:CAP【中文文档】（转）

    出处:http://www.cnblogs.com/savorboard/p/cap-document.html 前言 很多同学想对CAP的机制以及用法等想有一个详细的了解,所以花了将近两周时间写了这 ...

  8. 点击导航栏tableView回到顶部

      UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector ...

  9. java并发编程实战：第三章----对象的共享

    我们不仅仅希望防止某个线程使用某个状态时,另一个线程在修改它:我们还希望某个线程修改了某个状态后,其他线程能够看到状态的变化. 一.可见性 重排序:在没有同步的情况下,编译器.处理器可能对代码的执行顺 ...

  10. 企业搜索引擎开发之连接器connector（二十三）

    我们在前面的文章已经看到,ConnectorCoordinatorImpl类也实现了ChangeHandler接口,本文接下来分析实现该接口的作用 class ConnectorCoordinator ...