首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
jQuery事件冒泡和事件属性
作者：小萝卜 2023-03-24 【 jquery 】 浏览 478
简介stopPropagation() 方法只阻止一个事件起泡。 preventDefault() 方法只取消默认的行为。 二者均可以采用简写的方式：return false。
事件冒泡
stopPropagation() 方法只阻止一个事件起泡。
preventDefault() 方法只取消默认的行为。
二者均可以采用简写的方式：return false。
事件属性
每个浏览器对event都有不同的地方，Jquery对Event做了标准化所以可以放心用。
* 。target 这个反应触发事件的DOM对象，可以在事件冒泡的时候判断是否是事件源头(compare event.target to this)
* .pageX: 鼠标的left属性，相对于page
* .pageY: 鼠标的top属性，相对于page
* preventDefault(): 这个方法被调用，则原有事件就被忽略。（例如 clicked link就不会去新的Url了）
* stopPropagation():让Jquery停止事件冒泡
* .Data: 如果事件中还有EventData你就可以用这个属性获得对应Eventdata数据了。
* ctrlKey: 类型: Boolean, 说明: Ctrl 键是否按下
* shift Key: 类型: Boolean, 说明: Shift键是否按下
* alt Key: 类型: Boolean, 说明: Alt 键是否按下
* char Code: 类型: Number, 说明: 最后响应键盘按键的 charCode 值
* key Code: 类型: Number, 说明: 最后响应键盘按键的 keyCode 值
* button: 类型: Number, 说明: 按下的鼠标键, 左键:1, 右键:2, 中键:4
* which: 类型: Number, 说明: 最后响应的是哪个按键, 如果是键盘按键则等于 char Code || key Code; 如果是鼠标按键, 左键:1, 右键:3, 中键2
type : 事件类型
related Target:对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 current Target:冒泡前的当前触发事件的DOM对象, 等同于this.
result: 上一个事件处理函数返回的值
screen X/Y:对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的默认行为和冒泡</title>
<style type="text/css">
div{position:absolute;left:50px;top:50px;}
#t{width:300px;height:300px;background:orange;border-radius:50%;}
#w{width:200px;height:200px;background:cyan;border-radius:50%;}
#o{width:100px;height:100px;background:pink;border-radius:50%;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div id="t">
<div id="w">
<div id="o"></div>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
//阻止元素的默认行为
$('a').click(function(){
alert('gogogogo');
return false;
})
//阻止默认行为
$('div').click(function(){
$(this).css('background','black');
return false;
})
//获取鼠标的位置或者是键盘的信息
$(window).click(function(e){
console.log(e.clientX);
console.log(e.clientY);
})
$(window).mousemove(function(e){
var x = e.clientX;
var y = e.clientY;
var str = "x:"+x+";<br>y:"+y;
$('#o').html(str);
})
</script>
</body>
</html>
很赞哦！ (0)
下一篇：jQuery合成事件
