重点事件注册.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. 访问localhost的phpmyadmin出现访问被拒绝

    原因是:没有配置MySQL数据库密码. 1.打开D:\wamp\apps\phpmyadmin x.xx找到config.inc.php. 修改并保存: $cfg['Servers'][$i]['us ...

  3. wamp如何设置数据库的密码

    WAMP安装好后,MySQL密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...

  4. 马婕 2014MBA专硕考试 报刊选读 3 禽流感考验政府的透明度(转)

    http://blog.sina.com.cn/s/blog_3e66af4601015z0n.html Bird flu cases test government transparency 禽流感 ...

  5. 懒人的ERP开发框架--2B&苦B程序员专用

    在企业内部的ERP系统开发中,如果使用MS的技术,那么Winform + DevExpress + IIS + WCF +EF 就是懒人的黄金组合了,EF使用数据库优先,一般ERP应用主要关注点在数据 ...

  6. jQuery中mouseover和mouseout冒泡产生闪烁问题

    问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...

  7. Web挖掘

    Web挖掘 Web挖掘的目标是从Web的超链接.网页内容和使用日志中探寻有用的信息.依据Web挖掘任务,可以划分为三种主要类型:Web结构挖掘.Web内容挖掘和Web使用挖掘.Web结构挖掘简单的说就 ...

  8. Kinect相机位姿

    可以直接得到吧 还是要反求 pose.txt 里面一共有5个七参数.正好对应5幅图片.

  9. Android-图像原理/绘制原理

    图像原理 先专门讲解图片,一想到图片有那些特点:    宽/高 格式jpg/jpeg/... 大小43.kb/... 图片是由像素点组成:像素点是正方形的,只是像素点很小很多,看起来可以拼接圆形⭕️, ...

  10. 结对项目— 词频统计(语言C++)

    结对对象:季天梦 博客地址:http://www.cnblogs.com/jitianmeng/ github链接:https://github.com/liuyutianlyt/EX_4.md 比例 ...