JavaScript事件Event對象詳解(屬性、方法、自定義事件)
一、Event對象
1、簡介
? 事件event對象是指在瀏覽器中觸發(fā)事件時，瀏覽器會自動創(chuàng)建一個event對象，其中存儲了本次事件相關(guān)的信息，包括事件類型、事件目標(biāo)、觸發(fā)元素等等。瀏覽器創(chuàng)建完event對象之后，會自動將該對象作為參數(shù)傳遞給綁定的事件處理函數(shù)，我們可以在事件處理函數(shù)中通過訪問event對象的屬性和方法，來獲取事件的相關(guān)信息，并做出后續(xù)的邏輯處理。
? 事件可以由用戶操作觸發(fā)，例如：鼠標(biāo)事件、鍵盤事件等等；也可以通過 JS 腳本代碼來觸發(fā)，例如：通過element.click()方法，觸發(fā)對應(yīng)元素的點擊事件；還可以由API生成，例如：動畫完成后觸發(fā)對應(yīng)事件、視頻播放被暫停時觸發(fā)對應(yīng)事件；最后還可以通過自定義事件來進(jìn)行觸發(fā)。這四種方式都會創(chuàng)建并傳遞event對象。
? 除了我們自己綁定的事件處理函數(shù)之外，瀏覽器會對某些元素的某些事件存在默認(rèn)處理，例如： a 標(biāo)簽的click點擊事件，默認(rèn)處理為跳轉(zhuǎn)到鏈接的地址。當(dāng)然我們也可以通過event對象的preventDefault() 方法來阻止瀏覽器的默認(rèn)處理。
? 我們還需要注意元素的嵌套關(guān)系，因為由于元素結(jié)構(gòu)上的重疊，事件會隨著嵌套關(guān)系依次傳遞，也就是事件冒泡和事件捕獲。
2、Event對象示例
3、常用屬性
① event.bubbles（只讀）
? 該屬性值為布爾值，表示當(dāng)前事件是否會進(jìn)行冒泡，true表示會冒泡，false表示不會冒泡。在前端事件大部分都是默認(rèn)冒泡的，例如：click、mousedown等等；但也有一些特殊事件是默認(rèn)不冒泡的，例如：focus、blur等等。
② event.cancelBubble
? 該屬性值為布爾值，表示是否阻止當(dāng)前事件的冒泡，默認(rèn)為false，不阻止冒泡；設(shè)置為true則表示阻止當(dāng)前事件冒泡。目前該屬性已經(jīng)完全被stopPropagetion()方法所取代，雖然部分瀏覽器處于兼容性的考慮依舊支持該屬性，但后續(xù)隨時有可能停止支持，因此盡量不要使用該屬性。
③ event.cancelable（只讀）
? 該屬性值為布爾值，表示當(dāng)前事件的默認(rèn)行為是否可以被取消，即是否能通過event.preventDefault()來取消默認(rèn)行為，true表示可以取消，false表示不可以取消。
? 如果是自定義事件，則在初始化事件時可以聲明該事件是否可以被取消。
④ event.composed（只讀）
? 該屬性值為布爾值，曾用名：scoped，表示當(dāng)前事件是否可以打破屏障，從Shadow DOM冒泡傳遞到普通DOM，如果值為true表示當(dāng)事件可以冒泡，即bubbles屬性為true時，事件可以從Shadow DOM冒泡傳遞到普通DOM，此時可以通過composedPath()方法，來獲取事件冒泡的路徑；如果值為false，則表示事件不會跨越Shadow DOM與普通DOM的屏障進(jìn)行冒泡。
? 關(guān)于Shadow DOM的概念，在下面有進(jìn)行講解。
⑤ event.currentTarget（只讀）
? 該屬性值為一個DOM，表示當(dāng)前事件所綁定的那個DOM元素。而且要注意的是，該屬性值只能在事件處理函數(shù)的過程中event.currentTarget直接調(diào)用使用，如果我們通過console.log(event)輸出事件對象，如同上面的示例，我們會發(fā)現(xiàn)該屬性值的值為null，無法訪問到正確的值。我們在調(diào)試階段，還可以通過在事件處理函數(shù)中設(shè)置debugger暫停代碼執(zhí)行，從而在輸出的event對象上看到該屬性正確的值。
⑥ event.target（只讀）
? 該屬性值為一個DOM，表示觸發(fā)當(dāng)前事件的那個DOM元素。通常情況下該屬性的值與event.currentTarget相同，但是如果當(dāng)前事件是在冒泡或者捕獲階段被調(diào)用，則兩者的值不同，target的值為觸發(fā)事件的DOM，currentTarget的值為綁定事件的DOM。
? 我們還可以借助target屬性實現(xiàn)事件委托，又稱事件代理，是指在要對一批子元素設(shè)置類似的事件處理器時，利用事件冒泡的機制，將事件處理器綁定到其公共父元素上，然后通過target屬性，來區(qū)分是由哪個子元素觸發(fā)的事件，并進(jìn)行相應(yīng)的邏輯處理。這樣即可以大大的減少事件處理器的數(shù)量，提高性能，又可以動態(tài)地添加或刪除子元素而不需要添加或刪除相應(yīng)的事件處理器，減少代碼復(fù)雜度。
target與currentTarget在冒泡階段對比
案例代碼：
<div id="divBox">
<div id="divClick">
這里觸發(fā)點擊事件
</div>
</div>
<script>
// 事件綁定在子元素上 此時 target =
document.querySelector('#divClick').addEventListener('click', function (e) {
console.log(e)
console.log(e.target)
console.log(e.currentTarget)
})
document.querySelector('#divBox').addEventListener('click', function (e) {
console.log(e)
console.log(e.target)
console.log(e.currentTarget)
})
</script>
執(zhí)行結(jié)果：
⑦ event.defaultPrevented（只讀）
? 該屬性值為布爾值，表示當(dāng)前事件是否調(diào)用了event.preventDefault()方法，從而阻止了瀏覽器的默認(rèn)行為，true表示已經(jīng)調(diào)用過，false表示還未調(diào)用。
⑧ event.returnValue
? 屬性值為布爾值，表示當(dāng)前事件的默認(rèn)行為是否執(zhí)行，該屬性可讀可寫，true表示正常執(zhí)行，false表示阻止默認(rèn)行為。該屬性是由IE率先引入，最后被收入web規(guī)范，該屬性相當(dāng)于event.defaultPrevented和event.preventDefault()的結(jié)合。
案例代碼：
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" id="a0">不阻止默認(rèn)行為</a>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" id="a1">event.returnValue阻止默認(rèn)行為</a>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" id="a2">event.preventDefault()阻止默認(rèn)行為</a>
<script>
document.querySelector('#a0').addEventListener('click', function (e) {
// 不阻止默認(rèn)行為
console.log('不阻止默認(rèn)行為的e.returnValue---', e.returnValue)
// 打斷點 暫停頁面跳轉(zhuǎn) 方便查看控制臺輸出
debugger
})
document.querySelector('#a1').addEventListener('click', function (e) {
// 阻止默認(rèn)行為
e.returnValue = false
console.log('通過returnValue = false阻止默認(rèn)行為的e.returnValue---', e.returnValue)
})
document.querySelector('#a2').addEventListener('click', function (e) {
// 阻止默認(rèn)行為
e.preventDefault()
console.log('通過preventDefault()阻止默認(rèn)行為的e.returnValue---', e.returnValue)
})
</script>
執(zhí)行結(jié)果：
⑨ event.eventPhase（只讀）
? 該屬性值為整數(shù)數(shù)值，表示事件流的當(dāng)前執(zhí)行階段，共分為四個階段，每個階段有不同的事件階段常量，如下：
| 常量 | 值 | 描述 |
|---|---|---|
Event.NONE | 0 | 這個階段，沒有事件正在被處理 |
Event.CAPTURING_PHASE | 1 | 這個階段是指事件捕獲的過程，事件正在被目標(biāo)元素的祖先對象處理，是從最外層的祖先元素到目標(biāo)元素的過程，從Window、Document、…、目標(biāo)元素的過程。 |
Event.AT_TARGET | 2 | 這個階段是指到達(dá)目標(biāo)元素的過程。如果 Event.bubbles 的值為 false，即事件不會冒泡，則對事件對象的處理在這個階段后就會結(jié)束。 |
Event.BUBBLING_PHASE | 3 | 這個階段是指事件冒泡的過程，從從目標(biāo)元素到最外層的祖先元素的過程。 |
事件流的執(zhí)行過程：
? 當(dāng)我們通過event.eventPhase獲取當(dāng)前事件流的執(zhí)行階段時，會直接獲取到當(dāng)前事件階段常量的值，我們可以直接根據(jù)值判斷事件流的執(zhí)行階段，也可以通過對比event.eventPhase與事件階段常量是否強相等(===)，判斷事件流的執(zhí)行階段。
案例代碼：
<div id="div0">
<div id="div1">事件流演示</div>
</div>
<script>
// addEventListener設(shè)置第三個參數(shù)為true 表示在捕獲階段觸發(fā)事件
document.querySelector('#div0').addEventListener('click', function (e) {
console.log('div0--', e)
// 輸出事件階段常量的值
console.log('捕獲階段的事件階段常量---', e.eventPhase)
// 判斷事件階段是否為捕獲階段
console.log(e.eventPhase === Event.CAPTURING_PHASE)
}, true)
// addEventListener設(shè)置第三個參數(shù)為false或者不設(shè)置 表示在冒泡階段觸發(fā)事件
document.querySelector('#div0').addEventListener('click', function (e) {
console.log('div0--', e)
// 輸出事件階段常量的值
console.log('冒泡階段的事件階段常量---', e.eventPhase)
// 判斷事件階段是否為冒泡階段
console.log(e.eventPhase === Event.BUBBLING_PHASE)
})
// 目標(biāo)元素
document.querySelector('#div1').addEventListener('click', function (e) {
console.log('div1--', e)
// 輸出事件階段常量的值
console.log('到達(dá)目標(biāo)元素的事件階段常量---', e.eventPhase)
// 判斷事件階段是否為到達(dá)目標(biāo)元素階段
console.log(e.eventPhase === Event.AT_TARGET)
})
</script>
執(zhí)行結(jié)果：
⑩ event.timeStamp（只讀）
? 該屬性值為一個數(shù)值，表示從文檔加載完成，到當(dāng)前事件被觸發(fā)之間的的毫秒數(shù)，Chrome、Safari和Edge返回的是帶有小數(shù)的毫秒數(shù)，F(xiàn)ireFox返回的是不帶小數(shù)的毫秒數(shù)。
? 因為各大瀏覽器之間的返回值并不統(tǒng)一，所以不太建議使用該屬性。
案例代碼：
<div style="width: 200px;height: 30px;" id="div2">點擊獲取事件發(fā)生時的毫秒數(shù)</div>
<script>
// 獲取事件發(fā)生時的毫秒數(shù)
document.querySelector('#div2').addEventListener('click', function (e) {
console.log('事件發(fā)生時的毫秒數(shù)---', e.timeStamp)
})
</script>
執(zhí)行結(jié)果：
? event.type（只讀）
? 該屬性值是一個字符串，表示當(dāng)前事件的類型，不區(qū)分大小寫。
案例代碼：
<div style="width: 200px;height: 30px;" id="div3">
點擊獲取事件的type屬性
</div>
<script>
// 獲取事件的type屬性
document.querySelector('#div3').addEventListener('click', function (e) {
console.log('事件的type屬性---', e.type)
})
</script>
執(zhí)行結(jié)果：
? event.isTrusted（只讀）
? 該屬性值是一個布爾值，表示當(dāng)前事件是由用戶行為觸發(fā)，還是通過JS腳本觸發(fā)，true表示用戶行為觸發(fā)，false表示腳本觸發(fā)。
案例代碼：
<div style="width: 200px;height: 30px;" id="div4">點擊獲取事件的isTrusted屬性</div>
<div id="div5"></div>
<script>
// 獲取用戶手動觸發(fā)時事件的isTrusted屬性
document.querySelector('#div4').addEventListener('click', function (e) {
console.log('用戶手動觸發(fā)時事件的isTrusted屬性---', e.isTrusted)
// 設(shè)置定時器模擬腳本觸發(fā)事件
setTimeout(() => {
document.querySelector('#div5').click();
}, 1000)
})
// 獲取腳本觸發(fā)時事件的isTrusted屬性
document.querySelector('#div5').addEventListener('click', function (e) {
console.log('腳本觸發(fā)時事件的isTrusted屬性---', e.isTrusted)
})
</script>
執(zhí)行結(jié)果：
4、常用方法
① event.composedPath()
? 該方法用來獲取當(dāng)前事件的事件傳播路徑，從觸發(fā)元素到最外層Window，而且阻止冒泡的方法不會影響到事件的傳播路徑。如果Shadow DOM根節(jié)點觸發(fā)事件，并且ShadowRoot.mode是關(guān)閉的，則獲取的路徑中將不包括Shadow DOM節(jié)點。
案例代碼：
<div id="div0">
<div id="div0Son">
驗證target和currentTarget
</div>
</div>
<script>
// 獲取事件對象的事件路徑
document.querySelector('#div0Son').addEventListener('click', function (e) {
// 阻止事件冒泡 但并不會影響事件的傳播路徑
e.stopPropagation()
// 通過e.composedPath()獲取事件對象的事件路徑
console.log(e.composedPath())
})
</script>
執(zhí)行結(jié)果：
② event.preventDefault()
? 該方法用來取消當(dāng)前事件的默認(rèn)行為，當(dāng)然如果當(dāng)前事件存在冒泡行為，即bubbles屬性為true，那么事件的冒泡行為還是會繼續(xù)向上傳播，不會被影響。
案例代碼：
<div id="div1">
<input type="checkbox" id="checkbox">
</div>
<script>
// 阻止多選按鈕的默認(rèn)行為
document.querySelector('#checkbox').addEventListener('click', function (e) {
e.preventDefault()
})
// 驗證阻止默認(rèn)行為后是否會繼續(xù)冒泡
document.querySelector('#div1').addEventListener('click', function (e) {
console.log('阻止默認(rèn)行為后會繼續(xù)冒泡')
})
</script>
執(zhí)行結(jié)果：
③ event.stopPropagation()
? 該方法用來阻止當(dāng)前事件在捕獲階段和冒泡階段中的傳播，如果點擊了子元素，但是在子元素中阻止了事件的冒泡，那么父元素對應(yīng)的事件不會被觸發(fā)；如果點擊了子元素，但是在父元素中阻止了事件的捕獲傳播，那么子元素對應(yīng)的事件將不會被觸發(fā)。
案例代碼：
<div id="div2">
<div id="div2Son">
驗證stopPropagation()方法阻止事件冒泡傳播
</div>
</div>
<div id="div3">
<div id="div3Son">
驗證stopPropagation()方法阻止事件捕獲傳播
</div>
</div>
<script>
// 驗證stopPropagation()方法阻止事件冒泡
document.querySelector('#div2Son').addEventListener('click', function (e) {
console.log('子元素阻止事件冒泡');
e.stopPropagation()
})
// 驗證stopPropagation()方法阻止事件冒泡后父元素是否接收到冒泡的事件
document.querySelector('#div2').addEventListener('click', function (e) {
console.log('父元素是否接收到冒泡的事件')
})
// 驗證stopPropagation()方法阻止事件捕獲傳播
document.querySelector('#div3').addEventListener('click', function (e) {
console.log('父元素阻止事件捕獲傳播');
e.stopPropagation()
}, true)
// 驗證stopPropagation()方法阻止事件捕獲后子元素是否接收到捕獲的事件
document.querySelector('#div3Son').addEventListener('click', function (e) {
console.log('子元素是否接收到捕獲傳播的事件')
}, true)
</script>
執(zhí)行結(jié)果：
④ event.stoplmmediatePropagation()
? 該方法用來阻止當(dāng)前事件的其他事監(jiān)聽器被觸發(fā)，如果我們通過addEventListener()方法給同一個事件，增加多個事件監(jiān)聽器，那當(dāng)該事件被觸發(fā)時，多個事件監(jiān)聽器會按照添加的順序依次執(zhí)行。但如果我們在其中某個事件監(jiān)聽器綁定的函數(shù)中，執(zhí)行event.stoplmmediatePropagation()方法，那么位于該事件監(jiān)聽器之后的其他監(jiān)聽器將不會被觸發(fā)。
案例代碼：
<div id="div4">
驗證stopImmediatePropagation()法
</div>
<script>
// 驗證stopImmediatePropagation()方法
document.querySelector('#div4').addEventListener('click', function (e) {
console.log('第一個事件監(jiān)聽器');
})
document.querySelector('#div4').addEventListener('click', function (e) {
console.log('第二個事件監(jiān)聽器');
// 阻止后續(xù)事件監(jiān)聽器的執(zhí)行
e.stopImmediatePropagation()
})
document.querySelector('#div4').addEventListener('click', function (e) {
console.log('第三個事件監(jiān)聽器');
})
</script>
執(zhí)行結(jié)果：
5、Shadow DOM
? Shadow DOM 是Web components 的核心內(nèi)容，用于構(gòu)建獨立的web組件，可以將一個DOM樹和相應(yīng)的CSS樣式封裝隔離起來，與頁面的常規(guī)DOM相互隔離，不會出現(xiàn)影響和沖突。然后可以將封裝的Shadow DOM附加到常規(guī)的DOM節(jié)點上。操作Shadow DOM 的方式與常規(guī)DOM并無太大區(qū)別，都可以給DOM添加子節(jié)點、設(shè)置屬性，以及為節(jié)點添加自己的樣式。唯一有所不同的是：Shadow DOM內(nèi)部的元素除了設(shè)置 :focus-within之外，設(shè)置其他任何屬性都不會影響到常規(guī) DOM。
? Shadow DOM 有以下四個主要概念：
- Shadow host：一個常規(guī)的DOM節(jié)點，Shadow DOM將會附加在該節(jié)點上。
- Shadow tree：一個DOM樹，即Shadow DOM 內(nèi)部的DOM結(jié)構(gòu)。
- Shadow boundary：Shadow DOM與常規(guī)DOM的分界線，是 Shadow DOM 結(jié)束的地方，也是常規(guī) DOM 開始的地方。
- Shadow root ：Shadow tree所代表的DOM樹的根節(jié)點。
Shadow DOM主要概念圖解：
? 雖然Shadow DOM看起來比較陌生，但這并不是一個新特性，瀏覽器很早之前便在使用該特性，例如：<video>標(biāo)簽，雖然我們在DOM中只能看到一個單獨的標(biāo)簽，但其實在該標(biāo)簽的Shadow DOM中，包含了進(jìn)度條、播放按鈕、倍速按鈕等DOM結(jié)構(gòu)。 Firefox（從版本 63 開始）、Chrome、Opera 、 Safari、Edge 都默認(rèn)支持 Shadow DOM。
二、自定義事件
1、簡介
? 在日常開發(fā)中我們通常使用的都是瀏覽器提前定義好的事件，例如：點擊事件click、失去焦點事件blur等等。當(dāng)這些基礎(chǔ)事件不能滿足我們的業(yè)務(wù)需求時，我們也可以通過創(chuàng)建自定義Event事件對象來自定義相關(guān)事件。
? 目前實現(xiàn)自定義事件的方式有兩種：Event()構(gòu)造函數(shù)和CustomEvent()構(gòu)造函數(shù)。
? 觸發(fā)自定義事件的方式為：element.dispatchEvent(event)。
2、Event()
? 構(gòu)造函數(shù)Event(typeArg[,eventInit])用來創(chuàng)建一個新的event事件對象，該構(gòu)造函數(shù)擁有兩個參數(shù)：第一個參數(shù)typeArg為必填參數(shù)，參數(shù)值為DOMString類型，表示所創(chuàng)建事件的名稱；第二個參數(shù)eventInit為可選參數(shù)，參數(shù)值為EventInit類型的對象數(shù)據(jù)，擁有三條可選屬性：① bubbles：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否能進(jìn)行冒泡。② cancelable：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件的行為是否可以被preventDefault()取消。③ composed： 屬性值為為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否可以穿透Shadow DOM 與常規(guī)DOM的屏障，進(jìn)行冒泡。
案例代碼：
<div class="div1">
<div class="div1Son">
驗證自定義事件
</div>
</div>
<script>
// 1、創(chuàng)建一個支持冒泡，支持取消，支持穿透 的look事件
let myEvent = new Event('look', { "bubbles": true, "cancelable": true, "composed": true });
// 2、監(jiān)聽自定義事件
document.querySelector('.div1Son').addEventListener('look', function (e) {
console.log('監(jiān)聽到自定義事件----', e.type)
})
// 3、利用點擊事件 去觸發(fā)自定義事件
document.querySelector('.div1Son').addEventListener('click', function (e) {
// 觸發(fā)自定義事件
document.querySelector('.div1Son').dispatchEvent(myEvent)
})
// 4、監(jiān)聽父元素是否收到冒泡的自定義事件
document.querySelector('.div1').addEventListener('look', function (e) {
console.log('父元素是否收到冒泡的自定義事件----', e.type)
})
</script>
執(zhí)行結(jié)果：
3、CustomEvent()
? 構(gòu)造函數(shù)CustomEvent(typeArg[,customEventInit])用來創(chuàng)建一個新的CustomEvent事件對象，該構(gòu)造函數(shù)擁有兩個參數(shù)：第一個參數(shù)typeArg為必填參數(shù)，參數(shù)值為DOMString類型，表示所創(chuàng)建事件的名稱；第二個可選參數(shù)customEventInit，參數(shù)值為CustomEventInit 類型的對象數(shù)據(jù)，擁有四條可選屬性：① bubbles：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否能進(jìn)行冒泡。② cancelable：屬性值為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件的行為是否可以被preventDefault()取消。③ composed： 屬性值為為Boolean類型，默認(rèn)值為false，表示創(chuàng)建的事件是否可以穿透Shadow DOM 與常規(guī)DOM的屏障，進(jìn)行冒泡。④ detail：屬性值為任意類型的數(shù)據(jù)，默認(rèn)值為null，通常用來表示與當(dāng)前事件相關(guān)的信息。
? Event 接口是 CustomEvent 接口的父級接口，因此 CustomEvent 繼承了 Event 的所有屬性和方法，并且在 Event 的基礎(chǔ)上添加了一個 detail 屬性，用于在事件處理程序中傳遞自定義數(shù)據(jù)。除此之外，CustomEvent 還允許我們在事件對象上添加自定義屬性和方法，以便在事件處理程序中使用。這使得我們可以創(chuàng)建更靈活、更具體的事件類型，并在事件處理程序中訪問和操作事件對象。
? 總的來說：CustomEvent 是自定義的事件類型，可操作性強，可以更好地滿足開發(fā)人員的特定需求，而 Event 則更適合表示標(biāo)準(zhǔn)的、通用的事件類型，可操作性弱。
案例代碼：
<div class="div2">
<div class="div2Son">
驗證CustomEvent()構(gòu)造函數(shù)創(chuàng)建自定義事件
</div>
</div>
<script>
// 利用CustomEvent()構(gòu)造函數(shù)創(chuàng)建自定義事件
// 1、創(chuàng)建一個支持冒泡，支持取消，支持穿透，具有自定義屬性 的look事件
let myEvent2 = new CustomEvent('look', {
"bubbles": true, "cancelable": true, "composed": false, detail: {
info: '這是CustomEvent的detail屬性', // 自定義屬性
getTime: function () { // 自定義方法
return new Date()
}
}
});
// 2、監(jiān)聽自定義事件
document.querySelector('.div2Son').addEventListener('look', function (e) {
console.log('監(jiān)聽到自定義事件----', e)
console.log('調(diào)用自定義事件上的自定義方法----', e.detail.getTime())
})
// 3、利用點擊事件 去觸發(fā)自定義事件
document.querySelector('.div2Son').addEventListener('click', function (e) {
// 觸發(fā)自定義事件
document.querySelector('.div2Son').dispatchEvent(myEvent2)
})
// 4、監(jiān)聽父元素是否收到冒泡的自定義事件
document.querySelector('.div2').addEventListener('look', function (e) {
console.log('父元素是否收到冒泡的自定義事件----', e.type)
})
</script>
執(zhí)行結(jié)果：
三、相關(guān)資料
總結(jié)
到此這篇關(guān)于JavaScript事件Event對象(屬性、方法、自定義事件)的文章就介紹到這了,更多相關(guān)JS事件Event對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript中常見的事件用法小結(jié),需要的朋友可以參考下2023-05-05
你知道JavaScript中的結(jié)果值是什么嗎？這篇文章主要介紹了JavaScript結(jié)果值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript使用簡單正則表達(dá)式的數(shù)據(jù)驗證功能示例
這篇文章主要介紹了JavaScript使用簡單正則表達(dá)式的數(shù)據(jù)驗證功能,結(jié)合實例形式分析了JS針對表單輸入內(nèi)容的簡單正則驗證操作技巧,需要的朋友可以參考下2017-01-01
點擊最大化按鈕后，瀏覽器的內(nèi)容填充滿顯示器，瀏覽器窗口的邊框被擠出顯示器。而該js的最大化效果是瀏覽器的邊框在顯示器內(nèi)顯示，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
給網(wǎng)頁正文提供，小 中 大 三種字體的切換功能。用js代碼設(shè)置div style的fontSize屬性。2009-06-06
這篇文章主要介紹了JS獲取指定月份的天數(shù)兩種實現(xiàn)方法,需要的朋友可以參考下2018-06-06
在前端開發(fā)中我們常常需要從一個跳到另一個頁面,并且將當(dāng)前頁面的數(shù)據(jù)傳遞過去,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JS中跳轉(zhuǎn)傳參的幾種常用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
不論你是javascript新手還是老鳥，不論是面試求職，還是日常開發(fā)工作，我們經(jīng)常會遇到這樣的情況：給定的幾行代碼，我們需要知道其輸出內(nèi)容和順序。接下來通過本文給大家分享 JavaScript 執(zhí)行機制，感興趣的朋友一起看看吧2018-10-10
這篇文章主要介紹了javascript抽象工廠模式詳細(xì)說明,需要的朋友可以參考下2014-12-12
this是javascript的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。接下來通過本文給大家介紹js中的this指針和引用，非常不錯，需要的朋友參考下2016-08-08