12、jQuery的事件对象使用示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
html,body{
text-align: center;
font-size: 20px;
}
div{
margin: 0 auto;
border: 1px solid black;
}
#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;
}
#usa{
float: left;
margin: 50px;
width: 420px;
height: 340px;
}
</style>
<script>
$(document).ready(function(){
/* 点击事件示例
// mydata可以做为参数传入到事件中去
var mydata = {name:"sian"};
$('div').click(mydata, function(event){
// 事件流特性，div中所有的子控件都会响应事件
console.log(event.data.name);
});
*/
/* 事件对象示例
// pageX pageY鼠标的相对位置，相对于浏览器左上角（0，0）点
$('#ppc').click(function(event){
console.log("鼠标位置："+event.pageX+","+event.pageY);
});
// relatedTarget，事件的相关目标，ppc的相关目标是hd
$('#ppc').mouseover(function(event){
console.log(event.relatedTarget);
});
// target与currentTarget的区别
$('#ppc').click(function(event){
// 4次都是ppc.id
console.log(event.target.id);
// 4次不同的id
console.log(event.currentTarget.id);
});
*/
/*
$('#ppc').click(function(event){
console.log(event.timeStamp); // 时间戵
console.log(event.type); // 事件类型
console.log(event.which); // 事件主体
});
*/
// Propagation 事件传播
$('div').click(function(event){
// 是否阻止冒泡传递
// 阻止默认事件但不阻止冒泡
event.preventDefault();
console.log(event.isDefaultPrevented());
// 阻止冒泡传递但不阻止默认事件
event.stopPropagation();
console.log(event.isPropagationStopped());
// 阻止后面的事件函数执行,
event.stopImmediatePropagation();
})
$('#ppc').click(function(){
$(this).css('background', 'red');
})
});
</script>
</head>
<body>
<div id="cn">
<span>中国</span>
<div id="bj">
<span>北京</span>
<div id="hd">
<span>海淀</span>
<div id="ppc">
<span><a href="http://www.baidu.com">www.ppc.com</a></span>
</div>
</div>
</div>
</div>
<div id="usa">
<span>美国</span>
</div>
</body>
</html>
页:
[1]