重点事件注册.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. jQuery validator 增加多个模板

    今天学了jquery validator 可以增加多个模板,而不用写长长的js代码.废话少说,直接上例子 这段是要添加的模板 上面是把模板部分是要重复增加多个的部分,需独立出来,用textarea标签 ...

  2. post传参

    1.form表单 2.数据流

  3. CHANGE DETECTION IN ANGULAR 2

    In this article I will talk in depth about the Angular 2 change detection system. HIGH-LEVEL OVERVIE ...

  4. va泛型

    va泛型 什么是泛型? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数化类型时指定的 ...

  5. IRC聊天指南

    参考https://www.cnblogs.com/fzzl/archive/2011/12/26/2302637.html

  6. StarUML 5.0问题解决：Failed to open the model file. Invalid file format.

    使用StarUML 5.0打开一个已有的文件时,如果遇到报"Failed to open the model file. Invalid file format."错误,则原因可能 ...

  7. Frames of Reference参考框架

    Frames of Reference参考框架 When describing the position and orientation of something (for example, your ...

  8. Oracle EBS View 视图查看没有数据

    --关于看视图查看没有数据的问题 --原因OU过滤关系 --Oracle SQL*Plus --toad EXECUTE  fnd_client_info.set_org_context(:ou_id ...

  9. 在Team Foundation Server (TFS)的代码库或配置库中查找文件或代码

    [update 2017.2.11] 最新版本的TFS 2017已经增加了代码搜索功能,可以参考这个链接 https://blogs.msdn.microsoft.com/visualstudioal ...

  10. 网络正常只有自己访问网站异常一度让你怀疑，是不是被黑了！域名解析异常是如何发生的，如何解决处理及C#编程实现一键修改Hosts文件

    首先大家要知道在浏览器上浏览虚拟主机,必须使用Hosts文件或域名系统(DNS)实现主机名到IP地址的解析.在局域网中用Hosts文件或DNS都可以,在Internet上只能用DNS了. 1.当用户输 ...