一、前言

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

二、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. oracle删除表前先判断表是否存在

     DECLARE  numbe NUMBER;BEGIN  SELECT COUNT(1)    INTO numbe    FROM USER_TABLES   WHERE TABLE_NAME = ...

  2. openstack setup demo Compute service

    本文包含以下部分 Compute service overview Install and configure controller node Prerequisites Install and co ...

  3. nodejs参考文章

    http://www.cnblogs.com/lily1010/p/6683987.html https://manlili.github.io/2015/04/06/Node%E5%85%A5%E9 ...

  4. 前端开发本地环境配置(Apache+Dreamweaver)

    一.安装apache服务器 1.下载apache软件: 2.安装,直接下一步就好: 3.安装好后找到安装文件夹下的conf文件中的httpd.conf: 4.打开httpd.conf文件,做以下修改: ...

  5. Unity3D游戏开发最佳实践20技巧(一)

    关于这些技巧这些技巧不可能适用于每一个项目. 这些是基于我的一些项目经验.项目团队的规模从3人到20人不等. 框架结构的可重用性.清晰程度是有代价的--团队的规模和项目的规模决定你要在这个上面付出多少 ...

  6. BZOJ1202 [HNOI2005]狡猾的商人 并查集维护前缀和

    1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1935  Solved: 936[Submit][Stat ...

  7. spring 之 IOC 依赖注入详解

    当我们对一个javaBean进行实例化时,在原本的情况下我们会选择新建一个接口,然后进行实例化,为了进一步降低耦合度我们还会使用工厂模式进行封装. 例: 当我们想要去造,Chinese.America ...

  8. Cocos2dx如何引用第三方SO文件(Android NDK)

    做项目的过程中发现,引用第三方的库lib3rdsdk.so,当直接把lib3rdsdk.so放进armeabi文件夹里,会被删除掉.查网上资料都说的不全,经过实验,最简单的方法就是在jni下的andr ...

  9. luogu 2622 关灯问题II

    题目大意: 有一些灯,有些开关可以控制这些灯,给出矩阵表示控制 对于矩阵中的a i j 表示第i个开关控制第j个灯的情况 若元素为1 表示当灯开着的时候,关掉灯 若元素为0 表示无操作 若元素为-1 ...

  10. 第六周 Leetcode 446. Arithmetic Slices II - Subsequence (HARD)

    Leetcode443 题意:给一个长度1000内的整数数列,求有多少个等差的子数列. 如 [2,4,6,8,10]有7个等差子数列. 想了一个O(n^2logn)的DP算法 DP[i][j]为 对于 ...