<!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>
网友评论