重点事件注册.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. 操作ini配置文件设计一个最基本的可视化数据库系统

    对于很多小项目来说,不需要搭建专门的数据库系统(例如用SQLite搭建本地数据库),这时可以用ini配置文件实现一个最基本的数据库,实现数据库最基本的增删改查功能. ini配置文件的用法参考我以前写的 ...

  2. golang之指针

    先上代码 package main import "fmt" type myInt int //匿名函数 //值的接收 //指针的接收 //*myint表示myInt的指针类型 / ...

  3. 解压*.tar.bz2的坑

    下了一个压缩包,tar -xf 解压不了 解决办法: 装了bzip2工具 bzip2 -d **.tar.bz2 //将文件解压成**.tar tar -xf **.tar //解包 听说可以 tar ...

  4. MyEclipse中Web项目文件名上红色和黄色感叹号处理

      MyEclipse中Web项目文件名上红色和黄色感叹号处理     先说红色感叹号: 那就是代表错误,说明你引用的JAR包位置无效,所以,你应该重新将包导入到工程里面去,这个具体应该会吧,如果是初 ...

  5. RSA加密解密总结

    简单的控制台程序 #include"stdafx.h" #include <math.h> #include<string.h> /*/求解密密钥d的函数( ...

  6. 解决linux下tomcat停止进程任存在问题

    解决linux下tomcat停止进程任存在问题 在Linux下(之所以强调linux下,是因为在windows下正常),执行tomcat ./shutdown.sh 后,虽然tomcat服务不能正常访 ...

  7. 解决 sublime text 3 右键菜单栏出现多余的菜单项分隔符的问题

    很早之前装了一个插件 JavaScript Completions,虽然还没有用过它的高级功能,但随着 sublime text 3 逐渐成为我主要的编程工具,最近发现在右键点击文件出现的菜单栏中,菜 ...

  8. Android-自定义开关(升级版)

    效果图: 定义一个类,取名为MySwitch.java,此类去继承View,为何是继承View而不是去继承ViewGroup呢,是因为自定义开关没有子控件,之需要操作自身绘制即可 package cu ...

  9. eclipse中配置server中选择tomcat8无法进行下一步处理

    在创建server的时候,选择tomcat8后,server name为空,并且无法手动输入,同时无法进行下一步操作. 解决方案如下: 1.退出eclipse. 2.找到eclipse[工作空间][当 ...

  10. C# 中 String 类型的详细讲解

    C# 字符串(String) 在 C# 中,您可以使用字符数组来表示字符串,但更常见的做法是使用 string 关键字来声明一个字符串变量.string 关键字是 System.String 类的别名 ...