亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript事件監(jiān)聽器詳細介紹

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

什么是事件

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

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

1. 事件綁定

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

方式一：通過 HTML標簽中的事件屬性進行綁定;
如下面代碼，有一個按鈕元素，我們是在該標簽上定義 事件屬性，在事件屬性中綁定函數(shù)。onclick 就是 單擊事件 的事件屬性。onclick='on（）' 表示該點擊事件綁定了一個名為 on() 的函數(shù)。

<input type="button" onclick='on()'>

下面是點擊事件綁定的 on() 函數(shù)

function on(){
	alert("我被點了");
}

方式二：通過 DOM 元素屬性綁定
如下面代碼是按鈕標簽，在該標簽上我們并沒有使用 事件屬性，綁定事件的操作需要在 js 代碼中實現(xiàn)。

<input type="button" id="btn">

下面 js 代碼是獲取了 id='btn' 的元素對象，然后將 onclick 作為該對象的屬性，并且綁定匿名函數(shù)。該函數(shù)是在事件觸發(fā)后自動執(zhí)行。

document.getElementById("btn").onclick = function (){
    alert("我被點了");
}

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input標簽上添加 onclick 屬性，并綁定 on() 函數(shù)-->
    <input type="button" value="點我" onclick="on()"> <br>
    <input type="button" value="再點我" id="btn">

    <script>
        function on(){
            alert("我被點了");
        }
      	//方式2：獲取 id="btn" 元素對象，通過調(diào)用 onclick 屬性 綁定點擊事件
        document.getElementById("btn").onclick = function (){
            alert("我被點了");
        }
    </script>
</body>
</html>

2. 常見事件

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

onfocus 獲得焦點事件。

如下圖，當點擊了輸入框后，輸入框就獲得了焦點。而下圖示例是當獲取焦點后會更改輸入框的背景顏色。

onblur 失去焦點事件

如下圖，當點擊了輸入框后，輸入框就獲得了焦點；再點擊頁面其他位置，那輸入框就失去焦點了。下圖示例是將輸入的文本轉(zhuǎn)換為大寫。

  • onmouseout 鼠標移出事件
  • onmouseover 鼠標移入事件
  • 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>

如上代碼的表單，當我們點擊 提交 按鈕后，表單就會提交，此處默認使用的是 GET 提交方式，會將提交的數(shù)據(jù)拼接到 URL 后?，F(xiàn)需要通過 js 代碼實現(xiàn)阻止表單提交的功能，js 代碼實現(xiàn)如下：

  • 獲取 form 表單元素對象。
  • 給 form 表單元素對象綁定 onsubmit 事件，并綁定匿名函數(shù)。
  • 該匿名函數(shù)如果返回的是true，提交表單；如果返回的是false，阻止表單提交。
document.getElementById("register").onsubmit = function (){
    //onsubmit 返回true，則表單會被提交，返回false，則表單不提交
    return true;
}

到此這篇關(guān)于JavaScript事件監(jiān)聽器詳細介紹的文章就介紹到這了,更多相關(guān)JS事件監(jiān)聽器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論