快捷導(dǎo)航

JavaScript中添加監(jiān)聽句柄的方式

更新時間：2022年02月25日 09:42:28 作者：酷爾。

這篇文章主要介紹了JavaScript中添加監(jiān)聽句柄的方式，監(jiān)聽就是觸發(fā)某事件之后做出的響應(yīng),監(jiān)聽句柄是觸發(fā)某相應(yīng)的條件，下面關(guān)于添加監(jiān)聽句柄的方式的詳細(xì)內(nèi)容，需要的朋友可以參考一下，希望對你有所幫助

一、效果展示

鼠標(biāo)聚焦、鼠標(biāo)移開、鼠標(biāo)點(diǎn)擊等等都可以作為監(jiān)聽句柄

二、句柄合集

onchange HTML 元素改變
onclick 用戶點(diǎn)擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動鼠標(biāo)
onmouseout 用戶從一個HTML元素上移開鼠標(biāo)
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已完成頁面的加載
onclick 失去焦點(diǎn)
onfocuse 獲取焦點(diǎn)

三、添加監(jiān)聽的方式

添加監(jiān)聽的方式有兩種：

1.將事件與函數(shù)綁定在一起

例如將點(diǎn)擊監(jiān)聽句柄與f1函數(shù)綁定起來

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <script>
? ? ? ? function f1()
? ? ? ? {
? ? ? ? ? ? element=document.getElementById("myimage")
? ? ? ? ? ? if(element.src.match("bulbon"))
? ? ? ? ? ? {
? ? ? ? ? ? ? ? element.src="../pic_bulboff.gif"
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? element.src="../pic_bulbon.gif"
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
? ? <img id="myimage" src="../pic_bulboff.gif" onclick="f1()" alt="" width="100" height="150">
? ? <p>點(diǎn)擊燈泡開關(guān)燈</p>
</body>
</html>

2.先獲取元素再添加事件

例如:

? ? ? ??? ?var x = document.getElementById("myBtn");
? ? ? ? x.addEventListener("mouseover", myFunction);

將鼠標(biāo)覆蓋句柄與函數(shù)myFunction綁定在一起

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>

</head>
? ? <body>
? ? ? ? ? ? <p>實(shí)例使用 addEventListener() 方法在同一個按鈕中添加多個事件。</p>
? ? ? ? ? ? <button id="myBtn">點(diǎn)我</button>
? ? ? ? ? ? <p id="demo"></p>
? ? <script>
? ? ? ? ? ? var x = document.getElementById("myBtn");
? ? ? ? ? ? x.addEventListener("mouseover", myFunction);
? ? ? ? ? ? x.addEventListener("click", mySecondFunction);
? ? ? ? ? ? x.addEventListener("mouseout", myThirdFunction);
? ? ? ? ? ? function myFunction() {
? ? ? ? ? ? ? ? document.getElementById("demo").innerHTML += "Moused over!<br>"
? ? ? ? ? ? }
? ? ? ? ? ? function mySecondFunction() {
? ? ? ? ? ? ? ? document.getElementById("demo").innerHTML += "Clicked!<br>"
? ? ? ? ? ? }
? ? ? ? ? ? function myThirdFunction() {
? ? ? ? ? ? ? ? document.getElementById("demo").innerHTML += "Moused out!<br>"
? ? ? ? ? ? }
? ? ? ? ? ? // 監(jiān)聽函數(shù)如何傳遞參數(shù)
? ? ? ? ? ? document.getElementById("myBtn").addEventListener("click", function() {
? ? ? ? ? ? ? ? myFunction(p1, p2);
? ? ? ? ? ? });
? ? ? ? ? ? function myFunction(a, b) {
? ? ? ? ? ? ? ? ?var result = a * b;
? ? ? ? ? ? ? ? ?document.getElementById("demo").innerHTML = result;
? ? ? ? ? ? }
? ? </script>

? ? </body>
</html>

總結(jié):

兩種監(jiān)聽方式均可以達(dá)到效果,個人認(rèn)為先獲取后添加的句柄監(jiān)聽使用更為方便。

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

您可能感興趣的文章: