<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery事件处理</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
html,body{
text-align: center;
font-size: 20px;
}
div{
margin: 0 auto;
border: 1px solid #000;
}
#cn{
float: left;
margin: 50px;
width: 420px;
height: 340px;
line-height: 40px;
}
#bj{
width: 340px;
height: 260px;
}
#hd{
width: 260px;
height: 180px;
}
#ppc{
width: 180px;
height: 75px;
line-height: 25px;
padding: 15px 0px 5px 0px ;
}
#us{
float: left;
margin: 50px 0px;
width: 420px;
height: 340px;
}
</style>
</head>
<body>
<!--jQuery 的事件处理
目标：
1、复习事件流的基础知识
2、了解jQuery 中采用的事件处理方法
3、熟悉使用jQuery 事件对象
4、熟悉使用jQuery 事件处理方法
大纲：
1、复习JavaScript 中关于事件流的知识
按一定顺序决定一个事件到底有哪个节点接收、这就是事件流
目前支持两种事件流 一种事件冒泡 一种事件捕获
2、事件冒泡与事件捕获
1)事件冒泡：
最早由IE实现 目前主流的浏览器都支持
具体含义：最具体的节点，最早接收到事件；然后逐级向上传播到不太具体的节点
例如phpchina=》海淀=》北京=》中国=》body=》document=》window
2) 事件捕获
最早由Netscape 提出 除IE外 其他主流浏览器都支持
具体含义：不太具体的节点首先接收到事件，最具体的节点最后接收到事件
例如：window =>document=> body=> 中国=> 北京=> 海淀=> phpchina
3)jQuery 的事件处理方案
处于兼容性的考虑 jQuery 始终会在模型的冒泡阶段注册事件处理函数
也就是说 总是最计提的元素会首先获得响应事件的机会。
3、jQuery事件对象
eve.currentTarget 在事件冒泡阶段中的当前DOM元素
eve.data 当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind。
eve.delegateTarget1
eve.namespace
eve.pageX 鼠标相对于文档的左边缘的位置。
eve.pageY 鼠标相对于文档的顶部边缘的位置。
eve.relatedTarget 在事件中涉及的其它任何DOM元素。
eve.result
eve.target
eve.timeStamp
eve.type
eve.which
eve.isDefaultPrevented()
eve.preventDefault()
eve.isImmediatePropag...()
eve.stopPropagation()
eve.isPropagationStopped()
eve.stopImmediatePro...()
4、jQuery事件处理方法
-->
<div id="cn">
<span>中国</span>
<div id="bj">
<span>北京</span>
<div id="hd">
<span>海淀</span>
<div id="ppc">
<span> <a href="http://www.PHPChina.com">PHPChina</a></span>
</div>
</div>
</div>
</div>
<div id="us">
<span>美国</span>
</div>
<script>
$(document).ready(function () {
/* $('div').click(function () {
var id =this.id;
alert(id);
}) ;*/
/* $('div').click(function (event) {
var id =event.currentTarget.id;
alert(id);
}) ;
*/
var mydata = {name:'laodai',gender:'male'};
/* $('#ppc').click(mydata,function (event) {
//event.data 可以直接访问 mydata 的数据
//处理函数内部 没有直接使用外部定义的变量名 可维护性高
var str = event.data.name;
alert(str);
//全局版本，处理函数函数内部直接使用了外部定义的变量
//降低了可维护性
alert(mydata.name);
});*/
/* $('#ppc').click(function (event) {
var str ='鼠标坐标位于：'+event.pageX+','+event.pageY;
alert(str);
});*/
/*$('#ppc').mouseover(function (e) {
//relatedTarget 不是对每一种事件都生效，他针对存在过度的事件生效
//比如mouseover mouseout 等等
alert(e.relatedTarget.id);
});*/
/* $('#ppc').click(function (e) {
var id= e.target.id;
alert(id);
});*/
});
</script>
</body>
</html>jquery事件
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1、jQuery事件对象的作用 事件中的Event对象容易被初学者忽略掉，可能大多时候初学者不知道怎么去用它，但有...
- 本文章是老马jQuery视频的讲义和上课的代码。具体观看视频地址：https://chuanke.baidu.co...
- 什么是冒泡 在页面上可以有多个事件，也可以多个元素响应同一个事件。架设网页上有两个元素，其中一个元素嵌套在另一个元...
- 事件绑定，将事件绑定到指定元素上，使得元素能对各种事件做出对应的反应，如点击事件。 本文目录： on()； off...
- javascript事件和jquery事件对比 jquery修改文本内容的方式 javascript修改文本内容的...
