欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript事件監(jiān)聽(tīng)器詳細(xì)介紹

 更新時(shí)間：2022年09月21日 17:01:23   作者：斯文～  
這篇文章主要介紹了JavaScript事件監(jiān)聽(tīng)器詳細(xì)介紹,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下

什么是事件

HTML 事件是發(fā)生在 HTML 元素上的“行為 ”。比如：頁(yè)面上的 按鈕被點(diǎn)擊、鼠標(biāo)移動(dòng)到元素之上、按下鍵盤按鍵 等都是事件。

事件監(jiān)聽(tīng)就是JavaScript 可以在某一事件被觸發(fā)時(shí)，執(zhí)行一段預(yù)設(shè)的邏輯代碼。如我們點(diǎn)擊開(kāi)燈、關(guān)燈時(shí)頁(yè)面做出的相應(yīng)反應(yīng)其實(shí)就是通過(guò)事件監(jiān)聽(tīng)來(lái)更換圖片。

1. 事件綁定

JavaScript 提供了兩種事件綁定方式：

方式一：通過(guò) 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)了");
}

方式二：通過(guò) DOM 元素屬性綁定
如下面代碼是按鈕標(biāo)簽，在該標(biāo)簽上我們并沒(méi)有使用 事件屬性，綁定事件的操作需要在 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ì)象，通過(guò)調(diào)用 onclick 屬性 綁定點(diǎn)擊事件
        document.getElementById("btn").onclick = function (){
            alert("我被點(diǎn)了");
        }
    </script>
</body>
</html>

2. 常見(jiàn)事件

事件屬性名說(shuō)明
onclick鼠標(biāo)單擊事件
onblur元素失去焦點(diǎn)
onfocus元素獲得焦點(diǎn)
onload某個(gè)頁(yè)面或圖像被完成加載
onsubmit當(dāng)表單提交時(shí)觸發(fā)該事件
onmouseover鼠標(biāo)被移到某元素之上
onmouseout鼠標(biāo)從某元素移開(kāi)
鍵盤事件可閱讀官方文檔了解

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)擊頁(yè)面其他位置，那輸入框就失去焦點(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 后。現(xiàn)需要通過(guò) 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)聽(tīng)器詳細(xì)介紹的文章就介紹到這了,更多相關(guān)JS事件監(jiān)聽(tīng)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論