jQuery总结--版本二 事件处理函数
一：事件处理函数
（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总结--版本二 事件处理函数的更多相关文章
- jquery事件之事件处理函数
一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...
- Jquery动态绑定事件处理函数 bind / on / delegate
1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元 ...
- W3C和IE中的事件处理函数
在上一篇文章中提到了关于传统的JS中注册事件对象的一些缺点和问题,下面是关于DOM2级的现代事件绑定.本文中设计到的HTML文件在文章最后 一.W3C事件处理函数 “DOM2 级事件”定义了两个方法, ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jQuery基础（二）DOM
DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: $("<div></div>") 创建为文本节点: $("<div> ...
- 彻底弄懂jQuery事件原理二
上一篇说到,我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法,本篇就来介绍event辅助类 \ 先放个图, ...
- jQuery使用最广泛的javascript函数库
网站建设中,jQuery之最方便的的库了,当用到其中的JavaScript函数库的时候,不禁会想居然还有这么简单的操作? 一.选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某 ...
- [转]jQuery不同版本区别
原文转载自csdn:http://blog.csdn.net/u010167032/article/details/23666145 了解不同版本之间的差异,与助于选择适合自己项目的版本. ⒈4重要新 ...
- one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
one(type,[data],fn) 概述 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数. 在每个对象上,这个事件处理函数只会被执行一次.其他规则与bind()函数相同.这 ...
随机推荐
- memcached+tomcat转发forward时 sessionid一直变化的问题
今天遇到了一个很奇怪的问题, 我在tomcat过滤器 中, 对请求过来的静态资源及html页面做了forword转发操作,核心代码如下: private void redirectMobile(Htt ...
- phpcms ——模板标签详细使用说明
使用phpcms总是要查询各种标签,实在很烦,只好找个比较全的来备查.因为自己写一个orm来配合调用也没那么容易无缝的嵌入到引擎当中. 获取父分类下面的子分类 {loop subcat(77) $k ...
- 自行扩展 FineUIMvc 通知对话框（多个并排显示不重叠，支持最新的显示在最上方）
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 这篇文章我们将改造 FineUIMvc 默认的通知对话框,使得同时显示多个也不会重叠.并提前出一个公共的JS文件,供大家使用. ...
- nodejs将JSON字符串转化为JSON对象
如何将JSON字符串转化为JSON对象? JSON.parse(str) JSON是javascript的一个内置对象,提供了转换JSON对象与字符串互相转换的方法: 问题来了,道理我都懂 ...
- canvas绘制一定数目的圆(均分)
绘制多圆 2016年5月24日12:12:26 绘制一定数目(num)颜色随机的小圆,围成一个大圆.根据num完全自动生成,且小圆自动均分大圆路径(num≥20). 效果: 前置技能:(1).Canv ...
- 揭秘Kafka高性能架构之道 - Kafka设计解析（六）
原创文章,同步首发自作者个人博客.转载请务必在文章开头处以超链接形式注明出处http://www.jasongj.com/kafka/high_throughput/ 摘要 上一篇文章<Kafk ...
- jsp实现仿QQ空间新建多个相册名称，向相册中添加照片
工具:Eclipse,Oracle,smartupload.jar:语言:jsp,Java:数据存储:Oracle. 实现功能介绍: 主要是新建相册,可以建多个相册,在相册中添加多张照片,删除照片,删 ...
- 为大数据软件准备JAVA、Python环境
环境:SUSE 11 64位 安装JAVA JDK 1.确定版本.一般都是安装最新的JDK(Java SE Development Kit).个别软件和系统需要特定版本的JDK,根据实际需要下载. 2 ...
- [Git]04 如何使用标签
Git也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做. 本节我们一起来学习如何如何新建标签,列出所有可用的标签,以及各种不同类型标签之间的差 ...
- C++随机数rand(), srand()
c++产生随机数会用到rand(), srand()函数,下面总结两个函数特性和使用. 1. rand() #include <iostream> #include <cstdlib ...