一、前言

主要讲解事件的绑定与触发

二、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()的反向操作,从每一个匹配的元素中删除绑定的事件

三、常用事件函数

1.bind( type, [data], fn )

注意方法签名上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>

2.one( type, [data], fn )

使用和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)-事件与事件对象的更多相关文章

  1. jQuery 学习笔记(三)——事件与应用

    页面载入时触发ready()事件 ready()事件类似于onLoad()事件.但前者仅仅要页面的DOM结构载入后便触发.而后者必须在页面所有元素载入成功才触发,ready()能够写多个,按顺序运行. ...

  2. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  3. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  4. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  5. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  6. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  7. jQuery学习笔记之插件开发(4)

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  8. jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  9. jQuery学习笔记Fisrt Day

    跳过JS直接JQUERY,“不愧是你”. 对就是我. 今天开始jQuery学习第一天. click事件方法: 鼠标点击 dbl事件方法: 双击鼠标 mouseenter事件方法: 鼠标进入 mouse ...

  10. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

随机推荐

  1. 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 ...

  2. SqlServer2008发布订阅(数据同步)

    目录 1. 发布必备条件 1.1. 数据库故障还原模型必需为完全还原模型 1.2. 数据库被同步的数据表必须有主键 1.3. 计算机名称来进行SQLServer服务器的注册 1.4. SQLServe ...

  3. Vue.js父子通信之所有方法和数据共享

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. git锁和钩子以及图形化界面

    1.锁机制 Locking Options 严格锁(strict locking):一个时刻,只有一个人可以占用资源. 乐观锁(optimistic locking):允许多个人同时修改同一文件.乐观 ...

  5. ATM取款机模拟——数据结构课设

    今天帮人写的第二篇课设 . ;-) 机智的窝 要求:大概说一下吧,就是要创建一个用户(初始化一账户),模拟ATM的业务(取款,100的整数倍,改密               码,查剩余金额.等等,各 ...

  6. UML中的四种关系总结

    UML中的关系主要包含四种:关联关系.依赖关系.泛化关系.实现关系.当中关联关系还包含聚合关系和组合关系. 1. 关联关系(Association) 关联关系式一种结构化的关系,是指一种对象和还有一种 ...

  7. JDBC基本应用

    首先我们来看一下JDBC操作数据的核心: Connection 应用程序与数据库之间的桥梁 数据库驱动程序是构建桥梁的基石和材料 DriverManager类是基石和材料的管理员 Statement ...

  8. 对“使用MyEclipse,写的jsp代码因有汉字而无法保存”问题的解决

    使用MyEclipse编辑jsp时.有时会出现"使用MyEclipse,写的jsp代码因有汉字而无法保存"的现象,怎样解决呢? Window-->Preferences--& ...

  9. 2016/1/27 1, File 创建 删除 改名 换路径 2,输出流 不覆盖 换行输入 3,输入流

    1, File  创建  删除  改名  换路径 package Stream; import java.io.File; import java.io.IOException; public cla ...

  10. poj 1459 多源汇网络流 ISAP

    题意: 给n个点,m条边,有np个源点,nc个汇点,求最大流 思路: 超级源点把全部源点连起来.边权是该源点的最大同意值: 全部汇点和超级汇点连接起来,边权是该汇点的最大同意值. 跑最大流 code: ...