jQuery学习笔记(5)-事件与事件对象
一、前言
主要讲解事件的绑定与触发
二、jQuery中添加事件
1.使用bind()方法绑定事件
<input id="btn" type="button" value="按钮" />
<script>
$("#btn").bind("click", function (event) { alert("one"); });
</script>
2.添加多播事件委托
<input id="btn" type="button" value="按钮" />
<script>
$("#btn").bind("click", function (event) { alert("one"); });
$("#btn").bind("click", function (event) { alert("two"); });
</script>
3.jQuery事件处理函数
$("p").bind("click", function () { alert($(this).text()); }); | 为匹配元素的特定事件(像click)绑定一个事件处理器函数 |
$("p").one("click", function () { alert($(this).text()); }); | 为匹配元素的特定事件(像click)绑定一个一次性的事件处理函数 |
trigger( event, [data] ) | 匹配的元素上触发某类事件 |
triggerHandler( event, [data] ) | 触发指定的事件类型上所有绑定的处理函数 |
$("p").unbind( "click" ); | bind()的反向操作,从每一个匹配的元素中删除绑定的事件 |
三、常用事件函数
注意方法签名上data参数,可以在事件处理之前传递一些附加的数据
(1)使用自定义元素属性存储数据
<div id="divMsg" contentType ="Children">这是小孩可以看的内容</div>
<script>
$("#divMsg").bind("click", function(event) { alert($(event.target).attr("contentType")); });
</script>
(2)使用脚本将数据传递给事件处理函数
<div id="divMsg">这是小孩可以看的内容</div>
<script>
$("#divMsg").bind("click", { contentType: "Children" }, function (event) { alert(event.data.contentType); });
</script>
使用和bind()函数一样,但是只执行一次
trigger( event, [data] ) 和 triggerHandler( event, [data] )
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div id="divResult"></div>
<script>
$(function () {
$("#old").click(function () {
//点击文本框会聚焦
$("input").trigger("focus");
});
$("#new").click(function () {
//点击文本宽不会聚焦
$("input").triggerHandler("focus");
});
});
</script>
四、快捷事件 Event Helpers
1.设置单击事件方式:
$("p").click(function (event) { alert("aa"); });
//等效于下面写法
$("p").bind("click", function (event) { alert("aa"); });
2.触发单击事件
$("p").click();
//等效于下面写法
$("p").trigger("click");
3.jQuery的快捷方法列表
blur( fn )/blur( ) | 当元素失去焦点时发生 blur 事件 |
change( fn )/change( ) | 当元素的值改变时发生 change 事件 |
click( fn )/click( ) | 当单击元素时,发生 click 事件 |
dblclick( fn )/dblclick( ) | 当双击元素时,发生 dblclick 事件 |
error( fn )/error( ) | 当元素遇到错误时,发生 error 事件 |
focus( fn )/focus( ) | 当元素获得焦点时,发生 focus 事件 |
keydown( fn )/keydown( ) | 当键盘键被按下时发生 keydown 事件 |
keypress( fn )/keypress( ) | 当键盘键被按下时发生 keydown 事件 |
keyup( fn )/keyup( ) | 当键盘键被松开时发生 keyup 事件 |
load( fn ) | 当指定的元素已加载时,会发生 load 事件 |
mousedown( fn ) | 当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件 |
mouseenter( fn ) | 当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件 |
mouseleave( fn ) | 当鼠标指针离开被选元素时,会发生 mouseleave 事件 |
mousemove( fn ) | 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件 |
mouseout( fn ) | 当鼠标指针离开被选元素时,会发生 mouseout 事件 |
mouseover( fn ) | 当鼠标指针位于元素上方时,会发生 mouseover 事件 |
mouseup( fn ) | 当鼠标指针移动到元素上方,并松开鼠标左键时,会发生 mouseup 事件 |
resize( fn ) | 当调整浏览器窗口大小时,发生 resize 事件 |
scroll( fn ) | 当用户滚动指定的元素时,会发生 scroll 事件 |
select( fn )/select( ) | 当 textarea 或文本类型的 input 元素中的文本被选择(标记)时,会发生 select 事件 |
submit( fn )/submit( ) | 当提交表单时,会发生 submit 事件 |
unload( fn ) | 当用户离开页面时,会发生 unload 事件 |
五、参考文章
http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html
jQuery学习笔记(5)-事件与事件对象的更多相关文章
- jQuery 学习笔记(三)——事件与应用
页面载入时触发ready()事件 ready()事件类似于onLoad()事件.但前者仅仅要页面的DOM结构载入后便触发.而后者必须在页面所有元素载入成功才触发,ready()能够写多个,按顺序运行. ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- jQuery学习笔记Fisrt Day
跳过JS直接JQUERY,“不愧是你”. 对就是我. 今天开始jQuery学习第一天. click事件方法: 鼠标点击 dbl事件方法: 双击鼠标 mouseenter事件方法: 鼠标进入 mouse ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
随机推荐
- Minimum Depth of Binary Tree(二叉树DFS)
Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...
- SqlServer2008发布订阅(数据同步)
目录 1. 发布必备条件 1.1. 数据库故障还原模型必需为完全还原模型 1.2. 数据库被同步的数据表必须有主键 1.3. 计算机名称来进行SQLServer服务器的注册 1.4. SQLServe ...
- Vue.js父子通信之所有方法和数据共享
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- git锁和钩子以及图形化界面
1.锁机制 Locking Options 严格锁(strict locking):一个时刻,只有一个人可以占用资源. 乐观锁(optimistic locking):允许多个人同时修改同一文件.乐观 ...
- ATM取款机模拟——数据结构课设
今天帮人写的第二篇课设 . ;-) 机智的窝 要求:大概说一下吧,就是要创建一个用户(初始化一账户),模拟ATM的业务(取款,100的整数倍,改密 码,查剩余金额.等等,各 ...
- UML中的四种关系总结
UML中的关系主要包含四种:关联关系.依赖关系.泛化关系.实现关系.当中关联关系还包含聚合关系和组合关系. 1. 关联关系(Association) 关联关系式一种结构化的关系,是指一种对象和还有一种 ...
- JDBC基本应用
首先我们来看一下JDBC操作数据的核心: Connection 应用程序与数据库之间的桥梁 数据库驱动程序是构建桥梁的基石和材料 DriverManager类是基石和材料的管理员 Statement ...
- 对“使用MyEclipse,写的jsp代码因有汉字而无法保存”问题的解决
使用MyEclipse编辑jsp时.有时会出现"使用MyEclipse,写的jsp代码因有汉字而无法保存"的现象,怎样解决呢? Window-->Preferences--& ...
- 2016/1/27 1, File 创建 删除 改名 换路径 2,输出流 不覆盖 换行输入 3,输入流
1, File 创建 删除 改名 换路径 package Stream; import java.io.File; import java.io.IOException; public cla ...
- poj 1459 多源汇网络流 ISAP
题意: 给n个点,m条边,有np个源点,nc个汇点,求最大流 思路: 超级源点把全部源点连起来.边权是该源点的最大同意值: 全部汇点和超级汇点连接起来,边权是该汇点的最大同意值. 跑最大流 code: ...