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()函数相同.这 ...
随机推荐
- PHP初学者如何搭建环境，并在本地服务器（or云端服务器）运行自己的第一个PHP样例
页面底部有PHP代码样例供测试使用. 1.PHP开发,你需要什么? 1)开发代码的工具,可以用IDE名字叫做phpDesigner.当然也可以临时用记事本代替,记得文件扩展名为.php 2)服务器(本 ...
- delphi 7 mdi子窗体。。。无法更改以命令对象为源的记录集对象的 ActiveConnection 属性。
问题是这样的 我做了一个小程序 把 adoconnection放到了主窗体 连接的是access数据库; 新建了一个子窗体继承自FBase 新建了一个pubulic方法 qrySearch 实现了 ...
- Mysql Innodb体系结构
Innodb体系结构 Innodb存储引擎主要包括内存池以及后台线程. 内存池:多个内存块组成一个内存池,主要维护进程/线程的内部数据.缓存磁盘数据,修改文件前先修改内存.redo log 后台线程: ...
- jmeter执行case结果插入DB数据优化
访问初始实现路径:jmeter执行case结果插入DB生成报表和备份记录 借前面实现导入DB数据先说明之前数据的缺点: 第一,若需要依赖接口的数据,会把依赖接口的case统计进去造成数据统计错误.第二 ...
- STM32之呼吸灯实验
首先,我想引用一下在一片博文里 看到 的一段话,写的很详细, 首先来说,你要使用PWM模式你得先选择用那个定时器来输出PWM吧!除了TIM6.TIM7这两个普通的定时器无法输出PWM外,其余的定时器都 ...
- Linux 上搭建 git 的服务器
搭建服务器 假设服务器的名字是 git.example.com. 首先,添加一个叫做git的用户adduser git. 然后如果不存在的话, 为这个用户新建一个主目录mkdir /home/git, ...
- .bind.apply() 解决 new 操作符不能用与 apply 或 call 同时使用
背景: 小明想要用数组的形式为 Cls.func 传入多个参数,他想到了以下的写法: var a = new Cls.func.apply(null, [1, 2, 3]); 然而浏览器却报错Cls. ...
- Linux下Tomcat进行远程调试
1.更改tomcat远程调试端口(可以使用默认端口不更改) 打开目录下的catalina.sh文件,找到JPDA_ADDRESS=”8000”,8000代表远程调试端口,可以更改成其他没有被占用的端口 ...
- ajax分页实现（php）
ajax分页实现(php) 使用jquery.pagination.js插件 引入js文件.css文件 <link rel="stylesheet" href="/ ...
- IOS(二)基本控件UIButton、简易动画、transform属性、UIImageView
UIButton //1.设置UIButton 的左右移动 .center属性 获得 CGPoint 来修改x y //1.设置UIButton 的放大缩小 bounds属性 获得CGRect 然后通 ...