一：事件处理函数

（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. 谱聚类（Spectral clustering）分析（1）

    作者:桂. 时间:2017-04-13  19:14:48 链接:http://www.cnblogs.com/xingshansi/p/6702174.html 声明:本文大部分内容来自:刘建平Pi ...

  2. [Oracle]审计Audit

    1.Audit的概念 Audit是监视和记录用户对数据库进行的操作,以供DBA进行问题分析.利用Audit功能,可以完成以下任务: 监视和收集特定数据库活动的数据.例如管理员能够审计哪些表被更新,在某 ...

  3. 【Hololens】微软Hololens虚拟现实视频集

    混合虚拟现实(Hololens眼镜) 微软还是混合虚拟现实的行业领导者,Hololens眼镜在很多行业有了令人印象深刻的应用和演示.譬如: Hololens中文宣传片: https://pan.bai ...

  4. 2.Ubuntu16.04安装QT5.8.0

    VSCode编辑器开发CPP:http://www.cnblogs.com/dotnetcrazy/p/6661921.html 下载QT run文件(安装包),一般都是这两个下载的比较多,我这边使用 ...

  5. Vue 表单验证插件

    verify github:https://github.com/liuyinglong/verifynpm:https://www.npmjs.com/package/vue-verify-plug ...

  6. 一个全局变量引起的DLL崩溃

    参考我发的帖子: http://bbs.csdn.net/topics/390737064?page=1#post-397000946 现象是exe程序在加载dll的时候崩溃了,莫名其妙的崩溃了.换其 ...

  7. HTTP笔记

    "你知道当我们在网页浏览器(Web browser)的地址栏中输入 URL 时,Web 页面是如何呈现的吗?" HTTP协议 HTTP协议(HyperText Transfer P ...

  8. 使用EzHttp框架 开发基于HTTP协议的CS轻应用

    框架概述 EzHttp是临时起意构思和开发的一个框架,目的在于简化CS轻应用开发过程.开发语言是C#. 普通的基于HTTP的应用开发基本上是RESTful的,客户端调用封装需要人工写代码,就算利用三方 ...

  9. 产品经理学Python：参数传递方式

    这是关于Python的第5篇文章,主要介绍下参数传递方式和如何设计自己的函数. (一) 本篇主要介绍2种参数传递方式. 位置参数 调用函数时,根据函数定义的参数位置来传递参数. def right_t ...

  10. 0基础搭建Hadoop大数据处理-环境

    由于Hadoop需要运行在Linux环境中,而且是分布式的,因此个人学习只能装虚拟机,本文都以VMware Workstation为准,安装CentOS7,具体的安装此处不作过多介绍,只作需要用到的知 ...