|
內(nèi)容提綱： 1.事件對象 2.冒泡和默認(rèn)行為
發(fā)文不易，轉(zhuǎn)載請注明出處！
JavaScript 在事件處理函數(shù)中默認(rèn)傳遞了 event 對象，也就是事件對象。但由于瀏覽器的兼容性，開發(fā)者總是會做兼容方面的處理。jQuery 在封裝的時候，解決了這些問題，并且還創(chuàng)建了一些非常好用的屬性和方法。 一．事件對象 事件對象就是 event 對象，通過處理函數(shù)默認(rèn)傳遞接受。之前處理函數(shù)的 e 就是 event事件對象，event 對象有很多可用的屬性和方法，詳見JavaScript 基礎(chǔ)篇。
對其中的幾個進(jìn)行說明： //通過 event.type 屬性獲取觸發(fā)事件名 $('input').click(function (e) { alert(e.type); });
//通過 event.data 獲取額外數(shù)據(jù)，可以是數(shù)字、字符串、數(shù)組、對象 $('input').bind('click', 123, function () { //傳遞 data 數(shù)據(jù) alert(e.data); //獲取數(shù)字?jǐn)?shù)據(jù)123 }); 注意：如果字符串就傳遞：'123'、如果是數(shù)組就傳遞：[123,'abc']，如果是對象就傳遞：{user : 'Lee', age : 100}。數(shù)組的調(diào)用方式是：e.data[1]，對象的調(diào)用方式是：e.data.user。
//event.data 獲取額外數(shù)據(jù)，對于封裝的簡寫事件也可以使用 $('input').click({user : 'Lee', age : 100},function (e) { alert(e.data.user); }); PS：鍵值對的鍵可以加上引號，也可以不加；在調(diào)用的時候也可以使用數(shù)組的方式：alert(e.data['user']);
區(qū)別：target，currentTarget，relatedTarget： //通過 event.target 獲取觸發(fā)事件的 DOM 元素 $('input').click(function (e) { alert(e.target); });
//relatedTarget獲取臨近元素 //獲取移入到 div 之前的那個 DOM 元素 $('div').mouseover(function (e) { alert(e.relatedTarget); });
//獲取移出 div 之后到達(dá)最近的那個 DOM 元素 $('div').mouseout(function (e) { alert(e.relatedTarget); });
//獲取綁定的那個 DOM 元素，相當(dāng)于 this，區(qū)別與 event.target $('div').click(function (e) { alert(e.currentTarget); }); PS：event.target 得到的是觸發(fā)元素（比如點擊事件，即具體點擊的那個元素）的 DOM，event.currentTarget 得到的是監(jiān)聽元素（即綁定的那個元素）的DOM。相當(dāng)于this， this 也是得到監(jiān)聽元素的 DOM。
//result獲取上一次相同事件的返回值 $('div').click(function (e) { return '123'; }); $('div').click(function (e) { alert(e.result); });
//which獲取鼠標(biāo)的左中右鍵 $('div').mousedown(function (e) { alert(e.which); });
//which獲取鍵盤的按鍵 $('input').keyup(function (e) { alert(e.which); });
//獲取觸發(fā)元素鼠標(biāo)當(dāng)前的位置 $(document).click(function (e) { alert(e.screenY+ ',' + e.pageY + ',' + e.clientY); }); PS：pageX和pageY獲取的是距離頁面原點的位置；screenX和screenY獲取的是距離顯示屏的位置；clientX和clientY獲取的是距離頁面視口的距離。在沒有滾動條的時候，pageY和clientY在數(shù)值上是一樣的。當(dāng)有滾動條的時候，pageY會明顯變大，因為它是相對于頁面原點。
二．冒泡和默認(rèn)行為 阻止冒泡： 如果在頁面中重疊了多個元素， 并且重疊的這些元素都綁定了同一個事件， 那么就會出現(xiàn)冒泡問題。 示例： //HTML 頁面 1 <div style="width:200px;height:200px;background:red;"> 2 <input type="button" value="按鈕" /> 3 </div>  1 //三個不同元素觸發(fā)事件 2 3 $('input').click(function () { 4 5 alert('按鈕被觸發(fā)了！'); 6 7 }); 8 9 $('div').click(function () { 10 11 alert('div 層被觸發(fā)了！'); 12 13 }); 14 15 $(document).click(function () { 16 17 alert('文檔頁面被觸發(fā)了！'); 18 19 }); PS：當(dāng)我們點擊文檔的時候，只觸發(fā)文檔事件；當(dāng)我們點擊 div 層時，觸發(fā)了 div 和文檔兩個；當(dāng)我們點擊按鈕時，觸發(fā)了按鈕、div 和文檔。觸發(fā)的順序是從小范圍到大范圍。這就是所謂的冒泡現(xiàn)象，一層一層往上。 jQuery 提供了一個事件對象的方法：event.stopPropagation()；這個方法設(shè)置到需要觸發(fā)的事件上時，所有上層的冒泡行為都將被取消。 $('input').click(function (e) { alert('按鈕被觸發(fā)了！'); e.stopPropagation(); });
阻止默認(rèn)行為： 網(wǎng)頁中的元素，在操作的時候會有自己的默認(rèn)行為。比如：右擊文本框輸入?yún)^(qū)域，會彈出系統(tǒng)菜單、點擊超鏈接會跳轉(zhuǎn)到指定頁面、點擊提交按鈕會提交數(shù)據(jù)。 //阻止超鏈接進(jìn)行跳轉(zhuǎn) $('a').click(function (e) { e.preventDefault(); }); //禁止提交表單跳轉(zhuǎn)（注意是在form上阻止） $('form').submit(function (e) { e.preventDefault(); }); PS： 如果想讓上面的超鏈接同時阻止默認(rèn)行為且禁止冒泡行為， 可以把兩個方法同時寫上： event.stopPropagation()和 event.preventDefault()。 這兩個方法如果需要同時啟用的時候，還有一種簡寫方案代替，就是直接 return false。 $('a').click(function (e) { return false; });
For my lover, and thank you Mr.Lee! |
|
|
