jQuery事件對(duì)象總結(jié)
本人對(duì)jquery的event不懂,搜索了很多關(guān)于jquery event事件介紹,下面我來(lái)記錄一下,有需要了解jquery event事件用法的朋友可參考。希望此文章對(duì)各位有所幫助。
學(xué)習(xí)要點(diǎn):
事件對(duì)象 冒泡和阻止默認(rèn)行為
一、事件對(duì)象
在JS中,我們已經(jīng)詳細(xì)討論了JS的事件對(duì)象,這里就挑幾個(gè)常用的探討
<code class=" hljs xml"></code><div><code class=" hljs xml"> <input type="text"> </code></div>
1.event.type 屬性獲取觸發(fā)事件名
<code class=" hljs javascript">$("div").click(function (e) { console.log(e.type); // click });</code>
2.event.target獲取綁定DOM的元素
<code class=" hljs javascript">$("div").click(function (e) { console.log(e.target); // div });</code>
3.event.data 獲取額外數(shù)據(jù),可以是數(shù)字、字符串、數(shù)組、對(duì)象
<code class=" hljs javascript">$("div").bind("click", {"name" : "zhang", "age" : 20}, function (e) { for(var i in e.data) { console.log(i + " = " + e.data[i]); } })</code>
4.event.relatedTarget 獲取移入移出目標(biāo)點(diǎn)離開(kāi)或進(jìn)入的那個(gè) DOM 元素
<code class=" hljs javascript">$("div").mouseover(function (e) { console.log(e.relatedTarget); // body });</code>
5.event.currentTarget 獲取綁定的那個(gè) DOM 元素,相當(dāng)于 this,區(qū)別與 event.target
<code class=" hljs xml"><ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul></code> <code class=" hljs javascript">// 事件委托 $("ul").click(function (e) { console.log(e.target); // li }); $("ul").click(function (e) { console.log(e.currentTarget); // ul });</code>
PS : target表示觸發(fā)事件的DOM,currentTarget表示綁定事件的元素 6.event.result 表示獲取上次事件的值
<code class=" hljs lua"></code><div><code class=" hljs lua"> <input type="text"> $("div").click(function () { return "123"; }); $("div").click(function (e) { console.log(e.result); // 123 });</code></div>
7.event.timeStamp 獲取當(dāng)前時(shí)間戳
<code class=" hljs javascript">$("div").click(function (e) { console.log(e.timeStamp); });</code>
8.event.which 獲取鼠標(biāo)的左中右鍵
<code class=" hljs javascript">$("div").mousedown(function (e) { var key = ''; switch (e.which) { case 1: key = "左鍵"; break; case 2: key = "中鍵"; break; case 3: key = "右鍵"; break; } console.log(key); });</code>
同時(shí)event.which也可以獲取鍵盤(pán)上的鍵
<code class=" hljs javascript">$("input").keyup(function (e) { console.log(e.which); });</code>
9.event.ctrlKey 判斷是否按下了ctrl鍵
<code class=" hljs javascript">$("input").keyup(function (e) { console.log(e.ctrlKey); // 返回布爾值 })</code>
10.獲取鼠標(biāo)當(dāng)前的位置
<code class=" hljs avrasm">$(document).click(function (e) { console.log("screenX: " + e.screenX); console.log("pageX: " + e.pageX); console.log("clientX: " + e.clientX); });</code>
二.冒泡和默認(rèn)行為 1.事件冒泡和阻止冒泡 先來(lái)看看一個(gè)冒泡的例子
<code class=" hljs php"></code><div><code class=" hljs php"> <input type="button" value="按鈕"> $("input").click(function () { console.log("按鈕被觸發(fā)"); }); $("div").click(function () { console.log("div被觸發(fā)"); }); $(document).click(function () { console.log("document被觸發(fā)"); }); // 當(dāng)單擊按鈕時(shí),三個(gè)事件都被觸發(fā) // 當(dāng)單擊div時(shí),div和document被觸發(fā) // 當(dāng)單擊document時(shí),也僅有document事件被觸發(fā)</code></div>
現(xiàn)在我們阻止冒泡,看看結(jié)果
<code class=" hljs javascript">$("input").click(function (e) { console.log("按鈕被觸發(fā)"); e.stopPropagation(); }); $("div").click(function (e) { console.log("div被觸發(fā)"); e.stopPropagation(); }); $(document).click(function () { console.log("document被觸發(fā)"); });</code>
無(wú)論你怎樣單擊按鈕和div,它也只能觸發(fā)自己的時(shí)間,因?yàn)槊芭荼蛔柚沽?
2.阻止默認(rèn)行為
<code class=" hljs lua"></code><div><code class=" hljs lua"> $("a").click(function (e) { e.preventDefault(); });</code></div>
3.同時(shí)阻止默認(rèn)行為和冒泡
<code class=" hljs javascript">$("a").click(function (e) { console.log("a"); e.stopPropagation(); e.preventDefault(); }); $("div").click(function () { console.log("div"); });</code>
或者用 return false;
<code class=" hljs javascript">$("a").click(function (e) { console.log("a"); return false; }); $("div").click(function () { console.log("div"); });</code>
3.阻止事件冒泡和默認(rèn)行為的一些方法
判斷是否取消了默認(rèn)行為
<code class=" hljs javascript">$("a").click(function (e) { e.preventDefault(); console.log(e.isDefaultPrevented()); // true })</code>
取消冒泡后取消后續(xù)的事件處理函數(shù)
<code class=" hljs javascript">$("a").click(function (e) { console.log("a"); // e.preventDefault(); // 三個(gè)都觸發(fā) // e.stopPropagation(); // 觸發(fā)前兩個(gè) // e.stopImmediatePropagation(); // 只觸發(fā)第一個(gè) }); $("a").click(function () { console.log("i am a"); }); $(document).click(function () { console.log("i am document"); })</code>
判斷是否調(diào)用了 stopPropagation()方法
<code class=" hljs javascript">$("div").click(function (e) { e.stopPropagation(); console.log(e.isPropagationStopped()); // true })</code> 判斷是否執(zhí)行了 stopImmediatePropagation()方法 <code class=" hljs javascript">$('div').click(function (e) { e.stopImmediatePropagation(); console.log(e.isImmediatePropagationStopped()); // true });</code>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val)
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val),學(xué)習(xí)jquery的朋友可以參考下。2010-11-11淺談jquery fullpage 插件增加頭部和版權(quán)的方法
下面小編就為大家分享一篇淺談jquery fullpage 插件增加頭部和版權(quán)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看2018-03-03基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
這篇文章主要介紹了基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏效果,當(dāng)頁(yè)面向下滾動(dòng)的時(shí)候,導(dǎo)航菜單動(dòng)態(tài)隱藏,頁(yè)面滾動(dòng)到頂部時(shí),導(dǎo)航菜單動(dòng)態(tài)顯示,淘寶也采用過(guò)此效果,感興趣的小伙伴們可以參考一下2015-11-11jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jQuery實(shí)現(xiàn)合并表格單元格中相同行操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)合并表格單元格中相同行操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格實(shí)現(xiàn)單元格合并的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jquery keypress,keyup,onpropertychange鍵盤(pán)事件
項(xiàng)目所需,在試圖用js實(shí)現(xiàn)這樣的功能:文本框失去焦點(diǎn)時(shí),判斷輸入字符串的長(zhǎng)度,以驗(yàn)證是否超出范圍,超出范圍則自動(dòng)截取。2010-06-06詳談 Jquery Ajax異步處理Json數(shù)據(jù).
啥叫異步,啥叫Ajax.咱不談啥XMLHTTPRequest.通俗講異步就是前臺(tái)頁(yè)面javascript能調(diào)用后臺(tái)方法.這樣就達(dá)到了無(wú)刷新.2011-09-09分享20個(gè)提升網(wǎng)站界面體驗(yàn)的jQuery插件
今天為大家整理20個(gè)提升網(wǎng)站界面的體驗(yàn)的jQuery插件,這些都是比較“新款”的代碼,喜歡的請(qǐng)用到你的網(wǎng)站項(xiàng)目上吧2014-12-12