jQuery事件對象
使用jQuery事件物件
使用事件自然少不了事件物件。因為不同瀏覽器之間事件物件的取得,以及事件物件的屬性都有差異,導致我們很難跨瀏覽器使用事件物件。
jQuery 中統一了事件物件,當綁定事件處理函數時,會將jQuery 格式化後的事件物件作為唯一參數傳入:
$("#testDiv").bind("click", function(event) { });關於event 物件的詳細說明,可以參考jQuery 官方文件: http://docs.jquery.com/Events/jQuery.Event
jQuery 事件物件將不同瀏覽器的差異進行了合併,例如可以在所有瀏覽器中透過event. target 屬性來取得事件的觸發者(在IE 中使用原生的事件物件,需要存取event.srcElement)。
下面是jQuery 事件物件可以在瀏覽器中支援的屬性:
#上面是jQuery 官方文件中提供的event物件的屬性,下面也提供了多瀏覽器支援的屬性：
#事件物件除了擁有屬性,還擁有事件。有些是一定會用到的事件例如取消冒泡 stopPropagation() 等。以下是jQuery 事件物件的函數清單:
#這些函數中 stopPropagation() 是我們最常用的也是一定會用到的函數。 相當於操作原始 event 物件的event.cancelBubble=true來取消冒泡。
新建檔案
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("a").click(function(event) {
alert(event.type); //获取事件类型（此处弹出 click）
alert(event.target.href); //获取触发事件的元素的 href 属性值
alert("当前鼠标坐标：" + event.pageX + ", " + event.pageY); //获取鼠标当前坐标
event.preventDefault(); //阻止链接跳转
});
});
</script>
</head>
<!-- HTML -->
<body>
<a href="http://www.google.com/">Google</a>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 