一：事件处理函数

（1）

one(事件名称, fn) 仅对指定事件监听一次，监听事件只会执行一次

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.   </style>
  8. </head>
  9. <body>
  10. <h1>仅进行一次的事件处理</h1>
  11.  
  12. <button>开始抽奖</button>
  13.  
  14. <script src="js/jquery-1.11.3.js"></script>
  15. <script>
  16.   $('button').one('click', function(){
  17.     $(this).html('抽奖中...')
  18.     console.log('抽奖中...')
  19.   })
  20. </script>
  21. </body>
  22. </html>

（2）on()/off()

on()函数的第一种使用方法——直接绑定在事件源上：

$('事件源').on('事件名称', fn) //绑定监听函数

$('事件源').off('事件名称') //取消所有监听函数

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.   </style>
  8. </head>
  9. <body>
  10. <h1>事件处理</h1>
  11.  
  12. <button>开始抽奖</button>
  13.  
  14. <script src="js/jquery-1.11.3.js"></script>
  15. <script>
  16.   $('button').on('click', function(){
  17.     console.log('处理函数1...')
  18.   })
  19.   $('button').on('click', function(){
  20.     console.log('处理函数2...')
  21.   })
  22.   $('button').on('click', function(){
  23.     console.log('处理函数3...');
  24.     $(this).html('抽奖中....');
  25.     console.log('抽奖中.........');
  26.     $(this).off('click');  //取消单击事件绑定
  27.   })
  28.  
  29.   //$('button').off('click')
  30. </script>
  31. </body>
  32. </html>

on()的第一种用法有两个限制：

(1)若选中元素很多，每个都会有一个监听函数

(2)无法为后添加的元素执行绑定

on()函数的第二种使用方法——委托给父元素进行事件代理：

$('parent').on('事件名称', '子元素选择器', fn)

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.   </style>
  8. </head>
  9. <body>
  10. <h1>事件代理</h1>
  11.  
  12. <button id="btAdd">添加新的按钮</button>
  13.  
  14. <hr/>
  15.  
  16. <div class="container">
  17.   <button>1</button>
  18.   <button>2</button>
  19.   <button>3</button>
  20. </div>
  21.  
  22. <script src="js/jquery-1.11.3.js"></script>
  23. <script>
  24.   $('#btAdd').click(function(){
  25.     $('.container').append('<button>9</button>');
  26.  
  27.   });
  28.  
  29.   //把监听函数绑定给每个事件源对象
  30.   /*$('.container  button').on('click', function(){
  31.     console.log( $(this).html() )
  32.   })*/
  33.  
  34.   //每个按钮都把事件委托给公共的父元素
  35.   $('.container').on('click','button',function(){
  36.  
  37.     //console.log(this);  //事件源对象
  38.     console.log( $(this).html()  );
  39.   })
  40.  
  41.   console.log('事件绑定全部完成')
  42. </script>
  43. </body>
  44. </html>

DOM中为元素绑定监听函数：

btn.onclick = function(){  }

btn.addEventListener('click', function(){  })

jQuery中的on()函数底层是addEventListener

jQuery总结--版本二 事件处理函数的更多相关文章

  1. jquery事件之事件处理函数

    一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...

  2. Jquery动态绑定事件处理函数 bind / on / delegate

    1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元 ...

  3. W3C和IE中的事件处理函数

    在上一篇文章中提到了关于传统的JS中注册事件对象的一些缺点和问题,下面是关于DOM2级的现代事件绑定.本文中设计到的HTML文件在文章最后 一.W3C事件处理函数 “DOM2 级事件”定义了两个方法, ...

  4. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  5. jQuery基础（二）DOM

    DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: $("<div></div>") 创建为文本节点: $("<div> ...

  6. 彻底弄懂jQuery事件原理二

    上一篇说到,我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法,本篇就来介绍event辅助类 \ 先放个图, ...

  7. jQuery使用最广泛的javascript函数库

    网站建设中,jQuery之最方便的的库了,当用到其中的JavaScript函数库的时候,不禁会想居然还有这么简单的操作? 一.选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某 ...

  8. [转]jQuery不同版本区别

    原文转载自csdn:http://blog.csdn.net/u010167032/article/details/23666145 了解不同版本之间的差异,与助于选择适合自己项目的版本. ⒈4重要新 ...

  9. one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

    one(type,[data],fn) 概述 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数. 在每个对象上,这个事件处理函数只会被执行一次.其他规则与bind()函数相同.这 ...

随机推荐

  1. 【Scala】Scala之Traits

    一.前言 前面学习了Scala中包和导入的相关知识点,接着学习Traits(特质) 二.Traits Scala的特质与Java的接口基本相同,当遇到可以使用Java接口的情形,就可以考虑使用特质,S ...

  2. linux内核Makefile整体分析

    转自:http://www.cnblogs.com/amanlikethis/p/3675486.html <请阅读原文> 一.概述 1.本文的意义 众多的资料(<嵌入式Linux应 ...

  3. 个人VIM配置实例

    用户 vimrc 文件: "$HOME/.vimrc" " vimrc by lewiyon@hotmail.com " last update 2013-10 ...

  4. webUI自动化测试框架---”pyswat“介绍

    webUI自动化测试框架---"pyswat"介绍 大家好我是lamecho 辣么丑,今天给大家介绍一款web自动化测试框架pyswat.  "pyswat"是 ...

  5. 最大流算法之EK（最短路径增广算法）

    这是网络流最基础的部分--求出源点到汇点的最大流(Max-Flow). 最大流的算法有比较多,本次介绍的是其中复杂度较高,但是比较好写的EK算法.(不涉及分层,纯粹靠BFS找汇点及回溯找最小流量得到最 ...

  6. 通过批处理 安装 mongodb和设置身份验证

    1.首先需要 mongodb.msi安装包 2.mongodb的配置文件mongod.cfg 内容如下: systemLog: destination: file path: "D:/mon ...

  7. C# Webclient 和 Httpclient如何通过iis authentication 身份验证。

    前言: 该博客产生的背景是客户那边有部署网站的方法是iis windows authentication身份验证,而系统中使用Webclient来调用别的系统的方法.在此情况下,原本可以使用的功能,都 ...

  8. JS中常用的几种时间格式处理-【笔记整理】

    //此处整理点平时常用到的时间格式处理方法 ------------------------------------------- //时间格式化函数 Date.prototype.format = ...

  9. silverlight WPF 水纹文本框

    silverlight3取消了watertextbox控件,只有自己实现了个,实现了和textbox一样的无差异使用,只需要设置defaulttext就可以了 using System; using ...

  10. hdu4681 String DP(2013多校第8场)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4681 思路: 我是胡搞过的 就是先预处理出(i,j)的正向的最大连续子串和逆向最大连续子串 然后对于A ...