一：事件处理函数

（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. C语言中关于三目运算符的注意事项

    C语言中常见的条件运算符?:在运算符优先级中排行13.部分时候可以代替if--else语句,使代码更加简洁.但是更容易隐含一些不易觉察的错误. 最近接了一个项目,本来通信协议部分很简单,自己的STM3 ...

  2. 简单的利用JS来判断页面是在手机端还是在PC端打开的方法

    在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...

  3. Extjs6（二）——用extjs6.0写一个系统登录及注销

    本文基于ext-6.0.0 一.写login页 1.在view文件夹中创建login文件夹,在login中创建文件login.js和loginController.js(login.js放在class ...

  4. C#网络程序设计(1)网络编程常识与C#常用特性

        网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网 ...

  5. 揭秘Kafka高性能架构之道 - Kafka设计解析（六）

    原创文章,同步首发自作者个人博客.转载请务必在文章开头处以超链接形式注明出处http://www.jasongj.com/kafka/high_throughput/ 摘要 上一篇文章<Kafk ...

  6. JSON 解析工具的封装(Java)

    JSON 解析工具的封装(Java) 一直想有一个属于自己的JSON工具,今天终于弄好了..... 1.添加pom依赖包 <!--json解析--> <dependency> ...

  7. 分分钟带你玩转 Web Services【2】CXF

    在实践中一直在使用 JAX-WS 构建 WebService 服务,服务还是非常稳定.高效的. 但还是比较好奇其他的 WebService 开源框架,比如:CXF/Axis2/Spring WS等. ...

  8. webService基础知识--认识WebService

    之前在找工作的时候,有面试官问到WebService,当时没有接触过,正好现在做的项目中有用到WebService,所以就趁着业余时间来学习了. 一.简介 先来看看百度百科对WebService的解释 ...

  9. PHP 学习笔记(2)

    <?php$foo = "0";  // $foo 是字符串 (ASCII 48)$foo += 2;   // $foo 现在是一个整数 (2)$foo = $foo +  ...

  10. Activiti引擎启动失败

    今天部署项目测试时发现activiti启动失败,研究了会才把问题解决!! 错误信息:SEVERE: problem during schema create, statement create seq ...