一：事件处理函数

（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. 学Java，是自学还是去培训班学习？

    现在正在读在校的最后一个学年,想毕业后从事编程,但是感觉自己技术太差,应该是培训呢?还是去找实习?亦或是有更好的途径? 对于 Android 目前的行业趋势,不知道自己该不该坚持?还是转其他行业? 已 ...

  2. input标签禁止输入，隐藏光标

    <INPUT class=""  value="" name= "" readonly onfocus="this.blur ...

  3. 第五章 HQL实用技术

    第五章   HQL实用技术5.1  使用HQL查询语句(面向对象查询语句)    5.1.1 编写HQL语句        5.1.1.1 from子句                    例:fr ...

  4. JsonResult,Controller.Json

    表示一个类,该类用于将 JSON 格式的内容发送到响应. ContentEncoding:编码格式(最好按标准utf-8) ContentType: mime类型 Data:数据设置 JsonRequ ...

  5. cmapx 保存绘制好的图层

    研究了两天,如何保存一绘制好的图层,大致意思都说要使用mapInfo表,然后确定了可定和.TAB表有关.然而网上说的全是垃圾,也不能说全是垃圾,好歹我从中得到了一点点有用的信息,使用mapManage ...

  6. Java工程中使用Mybatis （工程结合Mybatis，数据可以结合Swing使用）

    2011年6月iBatis 更名为 MyBatis,从 iBatis 到 MyBatis,不只是名称上的变化,MyBatis 提供了更为强大的功能,同时并没有损失其易用性,相反,在很多地方都借助于 J ...

  7. SVD之最小二乘【推导与证明】

    0.SLAM中SVD进行最小二乘的应用 在SLAM应用中,计算Homography Matrix,Fundamental Matrix,以及做三角化(Triangulation)时,都会用到最小二乘 ...

  8. 蓝桥杯-n级台阶-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  9. poj2100还是尺取

    King George has recently decided that he would like to have a new design for the royal graveyard. Th ...

  10. 解决oracle用户锁定

        故障现象: SQL> connect scott/scottERROR:ORA-01017: invalid username/password; logon deniedSQL> ...