一：事件处理函数

（1）

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

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

  </style>

</head>

<body>

<h1>仅进行一次的事件处理</h1>

<button>开始抽奖</button>

<script src="js/jquery-1.11.3.js"></script>

<script>

  $('button').one('click', function(){

    $(this).html('抽奖中...')

    console.log('抽奖中...')

  })

</script>

</body>

</html>

（2）on()/off()

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

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

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

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

  </style>

</head>

<body>

<h1>事件处理</h1>

<button>开始抽奖</button>

<script src="js/jquery-1.11.3.js"></script>

<script>

  $('button').on('click', function(){

    console.log('处理函数1...')

  })

  $('button').on('click', function(){

    console.log('处理函数2...')

  })

  $('button').on('click', function(){

    console.log('处理函数3...');

    $(this).html('抽奖中....');

    console.log('抽奖中.........');

    $(this).off('click');  //取消单击事件绑定

  })

  //$('button').off('click')

</script>

</body>

</html>

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

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

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

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

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

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

  </style>

</head>

<body>

<h1>事件代理</h1>

<button id="btAdd">添加新的按钮</button>

<hr/>

<div class="container">

  <button>1</button>

  <button>2</button>

  <button>3</button>

</div>

<script src="js/jquery-1.11.3.js"></script>

<script>

  $('#btAdd').click(function(){

    $('.container').append('<button>9</button>');

  });

  //把监听函数绑定给每个事件源对象

  /*$('.container  button').on('click', function(){

    console.log( $(this).html() )

  })*/

  //每个按钮都把事件委托给公共的父元素

  $('.container').on('click','button',function(){

    //console.log(this);  //事件源对象

    console.log( $(this).html()  );

  })

  console.log('事件绑定全部完成')

</script>

</body>

</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. 从Chrome源码看JS Array的实现

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...

  2. 是什么让C＃成为最值得学习的编程语言

    随着 Web.iOS.Android.智能设备的流行,新的编程语言纷纷涌现并表现不俗,如 Ruby,Python,Scala,Go,Node.js,Swift 等.反观已经发展了近20年的 C# 语言 ...

  3. 【linux 爱好者群】程序猿的那些聊天记录

    分享&&交流&&开放 you should get it 声明:好吧,我们的群只有5个人,但是有句话不是说的很对吗,一个项目最理想的不就是5个人么.我是写文本那个. 下 ...

  4. struts2 之 ThreadLocal 和 ActionContext

    1. ThreadLocal:该类提供了线程局部(thtead-local)变量.threadLocal是一个容器,该容器中存放的数据可以保证线程安全. 案例如: public class Threa ...

  5. redis object 对象系统

    redis object对象系统 概述 redis 当中, sds字符串, adlist双向链表, dict字典, ziplist压缩链表, intset整数集合等均为底层数据结构 redis 并没有 ...

  6. C# 调用C++dll出现的问题。

    问题描述: 对 PInvoke 函数“winform应用!winform应用.Form1::add”的调用导致堆栈不对称.原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配.请检查 PIn ...

  7. Tarjan-求强连通分量

    知识点-Tarjan 强连通分量:在一个图的子图中,任意两个点相互可达,也就是存在互通的路径,那么这个子图就是强连通分量(或者称为强连通分支).如果一个有向图的任意两个点相互可达,那么这个图就称为强连 ...

  8. git的使用及常用命令（二）

    一,把文件放在版本库中 执行  git add XXX文件名 在执行 git commit -m ‘提交注释' 查看状态 git status 如果没有改变文件,nothing to comment ...

  9. java写文件读写操作（IO流，字节流）

    package copyfile; import java.io.*; public class copy { public static void main(String[] args) throw ...

  10. BogoMIPS与calibrate_delay

    在分析Arm+linux启动信息的时候.发现有一个信息竟然耗费了2s的时间,这简直是不能忍受的.这个耗时大鳄是什么东西哪,请看分析信息: [    0.000000] console [ttyMT0] ...