Jquery学习笔记：事件处理基础介绍
一、引子
给html的元素添加一个响应事件，最简单的办法是直接在元素标签内填写事件属性，先看一个最简单的例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery.min.js"></script>
<script>
function test(){
alert("hello");
}
</script>
</head>
<body>
<div>
<button onclick="test()">点击我</button>
</div>
</body>
</html>
直接在元素标签中设置，这种方式最简单、直接，对于简单的应用问题不大。但也存在很多不好的地方，如让html标签比较臃肿，无法动态设置元素的事件。
而利用jquery来处理则会方面很多。
二、页面加载后的load事件
利用jquery可以给页面添加事件，当页面框架下载完毕后就会自动被执行。 在很多的页面应用中都会用到这个功能，可以在该事件中做很多初始化的动作，也可以利用ajax向服务器获取初始数据等。具体例子如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div>
<button>点击我</button>
</div>
</body>
<script>
$(function(){
alert("i am first after load");
});
$(function(){
alert("i am second after load");
});
</script>
</html>
在浏览器中打开该页面后，就会先后弹出两个alert框。 加载事件代码编写非常简单。就是调用jquery的 $()函数，参数是一个js函数。
而且可以设置多个，按照编写的先后顺序被执行，如上面代码。
三、利用jquery给元素设置事件响应
通过jquery设置事件，是通过编写相应的代码来完成，举例说明：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery.min.js"></script>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<div style="height:100px;border:1px solid red">
<button id="btn">点击我</button>
</div>
</body>
<script>
$(function(){
$("#btn").click(function(event){
alert("hello");
});
}); </script>
</html>
jquery对象有很多事件方法，给元素设置事件，先获取该元素对应的jquery对象（如上面的代码$("#btn")），然后调用相应的方法，如上面的click方法，参数就是一个函数。当元素事件被触发时，该函数就会被执行。
注意不同类型的事件有不同的方法，这里的click方法代表最常见的鼠标点击事件。还有很多其它事件（如鼠标双击、鼠标移动、键盘事件）等。而且不同的html元素有不同的事件类型，有些事件类型是大家都有的，有些是某些元素独有的。
四、事件冒泡概念
html的事件机制有个冒泡机制，也就是说事件会从最先被触发的元素逐步向包含它的父元素传递。除非中间被取消。
还是举例说明。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div style="height:100px;border:1px solid red">
<button>点击我</button>
</div>
</body>
<script>
$(function(){
$("body").click(function(){
alert("hello,body");
});
$("div").click(function(){
alert("hello,div");
});
$("button").click(function(){
alert("hello,button");
});
}); </script>
</html>
上面的js代码，我们为 button, div, body 都设置了click响应事件。当我们点击按钮时，会发现，首先弹出"hello,button"的alert框，再弹出"hello,div"的alert框，最后弹出"hello,body"的alert框。
实际我们点击的是 button，并没有点击在div区域上，或div外。但因为有冒泡机制，事件会逐步往上传递。
如果我们点击在div区域（不点击到button）上，会发现只会先后弹出 "hello,div" 和 "hello,body"。
如果我们点击div区域外的地方，会发现只会弹出 "hello,body"。
如果我们希望阻止事件的冒泡过程，比如希望当点击button时，只会触发button的click事件，而不会往上传递触发div和body的事件。
这个实现非常简单，只需在button的响应函数中最后添加return false语句即可。如：
$("button").click(function(){
alert("hello,button");
return false;
});
这时，当我们点击按钮时，会发现除按钮自己的click事件被触发外，div的和body的都不会被触发。
五、获取事件对象
在事件响应处理函数中，我们有时候需要知道被触发的元素等信息。 我们先来看一段代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery.min.js"></script>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<div style="height:100px;border:1px solid red">
<button>点击我</button>
</div>
</body>
<script>
$(function(){
$("body,div,button").click(function(){
alert(this.tagName);
});
}); </script>
</html>
上面代码中的 $("body,div,button") 同时返回包含 body,div和button三个元素对应的jquery对象，这样再调用click方法，一次给三个元素设置click事件。这也是jquery的强大之处。 在该方法中关键字 this 就是代表响应当前事件的元素(是dom对象，不是jquery对象)，注意this代表的不是触发事件的元素。比如，如果鼠标点击的是button，但在div的事件里，其this代表的是div，而不是button.
如果想要在上级元素的事件响应中获取触发元素呢？ 比如点击的是button，但事件响应是div的，这时想获取到button对象，该如何操作呢？
我们再来看一段代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery.min.js"></script>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<div style="height:100px;border:1px solid red">
<button>点击我</button>
</div>
</body>
<script>
$(function(){
$("div").click(function(event){
alert("this is:"+this.tagName);
alert("target is:"+event.target.tagName);
alert("currentTarget is:"+event.currentTarget.tagName);
});
}); </script>
</html>
上述的event是代表事件对象，该对象封装了事件信息，通过它可以获取到被触发的元素等信息。 注意，在chrome和ie中，event同this一样，是个关键字，可以直接引用，但在firefox，上面代码中的event是无效的，需要通过参数传递过来。如上面代码 $("div").click(function(event){ ，所以为了各种浏览器兼容，最好加上参数，当然参数名不一定取event，可以任意的合法标识符。
这时如果去点击div区域（非button区域），发现三个alert语句显示的都是DIV.
这时如果点击的是button按钮，发现三个alert语句分别显示的是 DIV,BUTTON,DIV.
这说明this始终是代表当前事件触发的对象，event的currentTarget属性也是代表当前事件触发的对象，而event的target对象代表的是最原始被触发的对象。
通过上面的方式，既能获取到原始的对象，又能获取到当前的对象，剩下的事情就好办了，注意上述对象都是dom对象，需要通过 $()函数转化为jquery对象。
六、动态添加、去除事件
通过上面的介绍可以看出，通过调用jquery对象的click方法，可以给其包含的html元素设置click事件。那如何通过代码将事件去除呢？
这有多种方法（包括添加事件除调用click方法外，也有其它方法），我们这里只介绍最简单的方法。例子代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery.min.js"></script>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<div style="height:100px;border:1px solid red">
<button id="addBtn">添加事件</button>
<button id="delBtn">去除事件</button>
</div>
</body>
<script>
$(function(){
$("#addBtn").click(function(event){
$("div").click(function(event){
alert("i is div");
});
return false;
}); $("#delBtn").click(function(event){
$("div").unbind("click");
return false;
});
}); </script>
</html>
通过调用jquery对象的 unbind方法可以解除绑定的具体事件。
七、小结
上面的内容，我们介绍了html事件处理最核心、最基础的概念和使用，并且是通过click事件来说明的。剩下的内容只是不同的元素有不同的响应事件的差别了。这个在后面的文章中介绍。
Jquery学习笔记：事件处理基础介绍的更多相关文章
- jQuery学习笔记（基础部分）
参考:菜鸟教程 一.简介 1.jQuery 是一个 JavaScript 库. 2.jQuery的版本:压缩版(用户生成)和未压缩(用于测试和开发) 3.jQuery的引入方式: 从http://jq ...
- jQuery学习笔记：基础
本文主要总结jQuery中一些知识点 概念 美元符号$是著名的jQuery符号.jQuery把所有功能全部封装在一个全局变量jQuery中,而$也是一个合法的变量名,它是变量jQuery的别名 $本质 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- Python学习笔记之基础篇（-）python介绍与安装
Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记之概念（1）
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
随机推荐
- 关于js的一些总结
1.js中如果判断变量是否为空,要注意两种情况: 一种是变量为空:另一种是变量为0: 2.js如果要进行算术运算或者比较,最好把它强制类型为整型或者浮点型.防止字符串比较,如果本来是数字的字符串,如果 ...
- java中常见的单例模式详解
很多求职者在面试过程中都被问到了单例模式,最常见的问题,比如,每种单例模式的区别是什么?哪些模式是线程安全的?你们项目里用的哪种单例模式?原来没有注意这个问题,回来赶紧打开项目查看了一下代码,才发现我 ...
- FreeCodeCamp：Return Largest Numbers in Arrays
要求: 右边大数组中包含了4个小数组,分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新数组. 提示:你可以用for循环来迭代数组,并通过arr[i]的方式来访问数组的每个元素. 结果: l ...
- 「C」 数组、字符串、指针
一.数组 (一)数组 概念:用来存储一组数据的构造数据类型 特点:只能存放一种类型的数据,如全部是int型或者全部是char型,数组里的数据成为元素. (二)数组的定义 格式: 类型 数组名[元素个数 ...
- JDBC_批量处理语句提高处理速度
•当需要成批插入或者更新记录时.可以采用Java的批量更新机制,这一机制允许多条语句一次性提交给数据库批量处理.通常情况下比单独提交处理更有效率 •JDBC的批量处理语句包括下面两个方法: –addB ...
- VMWare11虚拟机安装OSX10.9系统资源下载及问题解决
适配VMware11的MacOSX补丁: http://pan.baidu.com/s/1bnqgtDd 使用方法:将补丁解压到一个完全没有中文的目录下,以管理员方式运行目录中的win-install ...
- Yii框架中的CURD操作
<?php $Admin = new Admin(); //查找多条记录,返回二维数组 $Admin->findAll(); $Admin->findAll("id = 2 ...
- QT动画介绍（有例子可以下载）
所谓动画就是在一个时间段内的不同时间点有不同的状态,只要定义好这样状态,实现动画就是水到渠成的事情.当然做这件事情,最好用的就是状态机,点击这里查看Qt使用状态机实现动画效果实例. 不过,实现动画也有 ...
- Windows Phone 8本地化多语言支持
原文 Windows Phone 8本地化多语言支持 在WP8平台处理本地化多语言的支持还是比较容易的,大部分工作都有VS IDE处理,开发者只需简单操作,并翻译本地资源即可实现. 无论您目前的应用是 ...
- python 中函数参数传递形式
python中函数参数的传递是通过赋值来传递的.函数参数的使用又有俩个方面值得注意:1.函数参数是如何定义的 2.在调用函数的过程中参数是如何被解析 先看第一个问题,在python中函数参数的定义主要 ...