【轉】jquery的事件物件event簡介
event.data 獲取額外資料,可以是數字、字串、陣列、物件
事件處理(事件物件、目標元素的獲取,事件物件的屬性、方法等)在不同瀏覽器之間存在差異,jQuery在遵循W3C規範的情況下做了封裝統一
什麼是事件物件?
事件物件是在事件觸發的時候生成的,包含了事件觸發的一些資訊,是無法人為的建立的,並且只能在函式的內部訪問到,事件執行完畢,事件物件銷燬。
如何拿到當前事件的事件物件?
直接在事件的函式內部就可以訪問到,函式內部的這個e,就是事件物件event.
$("#btn").click(function(e){
console.log(e.type);
});
事件物件有什麼屬性?
對其中幾個屬性說明:
event.type 屬性獲取觸發事件名
$('input').click(function (e) { alert(e.type); });
event.data 獲取額外資料,可以是數字、字串、陣列、物件
$('input').bind('click', 123, function () { //傳遞 data 資料 alert(e.data); //獲取數字資料123 });
注意:如果字串就傳遞:'123'、如果是陣列就傳遞:[123,'abc'],如果是物件就傳遞:{user : 'Lee', age : 100}。陣列的呼叫方式是:e.data[1],物件的呼叫方式是:e.data.user。
event.target獲取當前事件繫結的dom元素
$("#btn").click(function(ev){
alert(ev.target);
});
注意
1. event.target和this的區別,因為js中存在冒泡,所以this是會變化的,當時event.target永遠是事件繫結的元素.
2. event.target 和this都是dom物件,可以轉為jquery物件$(event.target)和$(this)
3. event.currentTarget得到是的監聽元素的dom相當於this
事件物件常用的方法
event.stopPropagation()阻止事件冒泡
什麼是事件冒泡?
如果頁面中層疊了多個元素,並且這多個元素繫結的是同一個事件,就會出現事件冒泡的問題
<div>
<input type="button" value = "點選">
</div>
//三個不同元素觸發事件
$('input').click(function () {
alert('按鈕被觸發了!');
});
$('div').click(function () {
alert('div 層被觸發了!');
});
$(document).click(function () {
alert('文件頁面被觸發了!');
});
冒泡的現象:
點選文件的時候,只會觸發文件的click事件,點選div的時候,觸發文件和div的click事件,點選button的時候,觸發文件,div,button的click事件,是一層一層向上傳遞的。
希望點選button,不會觸發到上層同樣的click事件,就可以使用event.stopPropagation()方法,取消上層的冒泡事件
$('input').click(function (e) {
alert('按鈕被觸發了!');
e.stopPropagation();
});
event.preventDefault()阻止預設行為
比如,想要阻止a標籤點選,觸發href跳轉。
$('a').click(function (e) {
e.preventDefault();
});
阻止form表單提交
$('form').submit(function (e) {
e.preventDefault();
});