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()函数相同.这 ...
随机推荐
- Coordinator节点
Coordinator节点 Coordinator 节点主要负责segment 的管理和分配.更具体的说,它同通过配置往historical 节点 load 或者 drop segment .Coo ...
- 2017-4-18 ADO.NET
1.什么是ADO.NET? (是一种数据库访问技术) ADO.NET的名称起源于ADO(ActiveX Data Objects),是一个COM组件库,用于在以往的Microsoft技术中访问 ...
- 【Android】再来一篇Fragment懒加载(只加载一次哦)
效果 老规矩,先来看看效果图 没错,我又入坑了,又重新做了个 Gank 客户端,因为之前那个代码写得太烂了,这次有好好的考虑了下架构之类的事,代码应该会更容易读懂了点了,吧.哈哈,再次欢迎来 star ...
- Lambda表达式随笔
1.Lambda表达式是一个匿名函数,其本质其实还是一个函数,因此任何一个Lambda表达式都可以以其它的方式通过普通的函数实现或者代替. 2.Lambda表达式云算符:=>,该运算符读为&qu ...
- C#图像处理——ImageProcessor
这是个老生常谈的话题,需求实在太多,而且也较简单,写此文也是因为几个月没写技术文章了,权当为下一步开个头.我之前也做过很多此类项目,但是就我自己来说每次处理方式还都不一样,有用OpenCV的,有用Ma ...
- [KISSY5系列]KISSY5安装使用(二)
上篇文章,我们遗留的一个问题就是,请求数量有点多,虽然现在的浏览器的请求资源都是并发的.但是我们还是尽量减少请求量. 但是KISSY里面这个问题我们怎么解决呢,其实还是从data-config=&qu ...
- flex布局下,css设置文本不换行时,省略号不显示的解决办法
大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度. <div class="main"> <img alt=" ...
- PHP填补数字前后的0
PHP数字填补0 经常会遇到这样的问题: 自然数字是0,1,2,3...而我们需要的却是满足多少多少位数的数字,如:001,002. 在ID,编号,学号中我们会经常用到补全前面或者后面的空位(一般为前 ...
- linux 下启动程序的时候会显示坏的解释器,或者没有那个文件
又一次开发的时候在windowns上编写完的程序放到linux下运行的时候,比如:./start.sh的时候显示:"坏的解释器,没有那个文件"错误, 原因是windowns下写的s ...
- shopping_cart
#!/usr/bin/env python # -*- coding: utf-8 -*- print('欢迎土豪光临随心所欲旗舰店') user_money = int(input('老板,请输入你 ...