JavaScript事件監(jiān)聽器詳細(xì)介紹
什么是事件
HTML 事件是發(fā)生在 HTML 元素上的“行為 ”。比如：頁面上的 按鈕被點(diǎn)擊、鼠標(biāo)移動(dòng)到元素之上、按下鍵盤按鍵 等都是事件。
事件監(jiān)聽就是JavaScript 可以在某一事件被觸發(fā)時(shí)，執(zhí)行一段預(yù)設(shè)的邏輯代碼。如我們點(diǎn)擊開燈、關(guān)燈時(shí)頁面做出的相應(yīng)反應(yīng)其實(shí)就是通過事件監(jiān)聽來更換圖片。
1. 事件綁定
JavaScript 提供了兩種事件綁定方式：
方式一：通過 HTML標(biāo)簽中的事件屬性進(jìn)行綁定;
如下面代碼，有一個(gè)按鈕元素，我們是在該標(biāo)簽上定義 事件屬性，在事件屬性中綁定函數(shù)。onclick 就是 單擊事件 的事件屬性。onclick='on（）' 表示該點(diǎn)擊事件綁定了一個(gè)名為 on() 的函數(shù)。
<input type="button" onclick='on()'>
下面是點(diǎn)擊事件綁定的 on() 函數(shù)
function on(){
alert("我被點(diǎn)了");
}方式二：通過 DOM 元素屬性綁定
如下面代碼是按鈕標(biāo)簽，在該標(biāo)簽上我們并沒有使用 事件屬性，綁定事件的操作需要在 js 代碼中實(shí)現(xiàn)。
<input type="button" id="btn">
下面 js 代碼是獲取了 id='btn' 的元素對(duì)象，然后將 onclick 作為該對(duì)象的屬性，并且綁定匿名函數(shù)。該函數(shù)是在事件觸發(fā)后自動(dòng)執(zhí)行。
document.getElementById("btn").onclick = function (){
alert("我被點(diǎn)了");
}代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--方式1：在下面input標(biāo)簽上添加 onclick 屬性，并綁定 on() 函數(shù)-->
<input type="button" value="點(diǎn)我" onclick="on()"> <br>
<input type="button" value="再點(diǎn)我" id="btn">
<script>
function on(){
alert("我被點(diǎn)了");
}
//方式2：獲取 id="btn" 元素對(duì)象，通過調(diào)用 onclick 屬性 綁定點(diǎn)擊事件
document.getElementById("btn").onclick = function (){
alert("我被點(diǎn)了");
}
</script>
</body>
</html>2. 常見事件
| 事件屬性名 | 說明 |
|---|---|
| onclick | 鼠標(biāo)單擊事件 |
| onblur | 元素失去焦點(diǎn) |
| onfocus | 元素獲得焦點(diǎn) |
| onload | 某個(gè)頁面或圖像被完成加載 |
| onsubmit | 當(dāng)表單提交時(shí)觸發(fā)該事件 |
| onmouseover | 鼠標(biāo)被移到某元素之上 |
| onmouseout | 鼠標(biāo)從某元素移開 |
| 鍵盤事件 | 可閱讀官方文檔了解 |
onfocus 獲得焦點(diǎn)事件。
如下圖，當(dāng)點(diǎn)擊了輸入框后，輸入框就獲得了焦點(diǎn)。而下圖示例是當(dāng)獲取焦點(diǎn)后會(huì)更改輸入框的背景顏色。
onblur 失去焦點(diǎn)事件
如下圖，當(dāng)點(diǎn)擊了輸入框后，輸入框就獲得了焦點(diǎn)；再點(diǎn)擊頁面其他位置，那輸入框就失去焦點(diǎn)了。下圖示例是將輸入的文本轉(zhuǎn)換為大寫。
onmouseout鼠標(biāo)移出事件onmouseover鼠標(biāo)移入事件onsubmit表單提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="register" action="#" >
<input type="text" name="username" />
<input type="submit" value="提交">
</form>
<script>
</script>
</body>
</html>如上代碼的表單，當(dāng)我們點(diǎn)擊 提交 按鈕后，表單就會(huì)提交，此處默認(rèn)使用的是 GET 提交方式，會(huì)將提交的數(shù)據(jù)拼接到 URL 后?，F(xiàn)需要通過 js 代碼實(shí)現(xiàn)阻止表單提交的功能，js 代碼實(shí)現(xiàn)如下：
- 獲取
form表單元素對(duì)象。 - 給
form表單元素對(duì)象綁定onsubmit事件，并綁定匿名函數(shù)。 - 該匿名函數(shù)如果返回的是true，提交表單；如果返回的是false，阻止表單提交。
document.getElementById("register").onsubmit = function (){
//onsubmit 返回true，則表單會(huì)被提交，返回false，則表單不提交
return true;
}到此這篇關(guān)于JavaScript事件監(jiān)聽器詳細(xì)介紹的文章就介紹到這了,更多相關(guān)JS事件監(jiān)聽器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了JavaScript 計(jì)算誤差的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
JavaScript?ES6中class定義類實(shí)例方法
ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對(duì)象的語言)語言的寫法,引入了Class(類)這個(gè)概念,作為對(duì)象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript?ES6中class定義類的相關(guān)資料,需要的朋友可以參考下2022-07-07
JS實(shí)現(xiàn)二叉查找樹的建立以及一些遍歷方法實(shí)現(xiàn)
本篇文章主要介紹了JS實(shí)現(xiàn)二叉查找樹的建立以及一些遍歷方法實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
FF IE兼容性的修改小結(jié)，大家以后在javascript的編寫過程中需要注意下。2009-09-09
Javascript將string類型轉(zhuǎn)換int類型
今天網(wǎng)站有個(gè)小功能要判斷用戶購買商品數(shù)量是否大于庫存數(shù)據(jù)，如果大于庫存數(shù)量，就給予提示。2010-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細(xì)介紹了js時(shí)間戳與日期格式之間相互轉(zhuǎn)換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要給大家介紹了關(guān)于js加減乘除精確運(yùn)算方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
今天小編就為大家分享一篇Layui tree 下拉菜單樹的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
詳解JavaScript創(chuàng)建數(shù)組的三種方式
這篇文章主要介紹了JavaScript創(chuàng)建數(shù)組的三種方式：直接聲明,?以對(duì)象方式創(chuàng)建數(shù)組和使用?Array.from()?方法創(chuàng)建,并通過代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-06-06