JavaScript中添加監(jiān)聽句柄的方式
更新時間：2022年02月25日 09:42:28 作者：酷爾。
這篇文章主要介紹了JavaScript中添加監(jiān)聽句柄的方式，監(jiān)聽就是觸發(fā)某事件之后做出的響應,監(jiān)聽句柄是觸發(fā)某相應的條件，下面關于添加監(jiān)聽句柄的方式的詳細內容，需要的朋友可以參考一下，希望對你有所幫助
前言：
監(jiān)聽就是觸發(fā)某事件之后做出的響應,監(jiān)聽句柄是觸發(fā)某相應的條件
一、效果展示
鼠標聚焦、鼠標移開、鼠標點擊等等都可以作為監(jiān)聽句柄
二、句柄合集
- onchange HTML 元素改變
- onclick 用戶點擊 HTML 元素
- onmouseover 用戶在一個HTML元素上移動鼠標
- onmouseout 用戶從一個HTML元素上移開鼠標
- onkeydown 用戶按下鍵盤按鍵
- onload 瀏覽器已完成頁面的加載
- onclick 失去焦點
- onfocuse 獲取焦點
三、添加監(jiān)聽的方式
添加監(jiān)聽的方式有兩種：
1.將事件與函數綁定在一起
- 例如將點擊監(jiān)聽句柄與f1函數綁定起來
<!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>點擊燈泡開關燈</p>
</body>
</html>2.先獲取元素再添加事件
例如:
? ? ? ??? ?var x = document.getElementById("myBtn");
? ? ? ? x.addEventListener("mouseover", myFunction);將鼠標覆蓋句柄與函數myFunction綁定在一起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
? ? <body>
? ? ? ? ? ? <p>實例使用 addEventListener() 方法在同一個按鈕中添加多個事件。</p>
? ? ? ? ? ? <button id="myBtn">點我</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)聽函數如何傳遞參數
? ? ? ? ? ? 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ān)聽方式均可以達到效果,個人認為先獲取后添加的句柄監(jiān)聽使用更為方便。
到此這篇關于JavaScript中添加監(jiān)聽句柄的方式的文章就介紹到這了,更多相關JavaScript監(jiān)聽句柄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序學習筆記之文件上傳、下載操作,結合實例形式分析了微信小程序圖片文件傳輸的原理、步驟及后臺php操作相關實現技巧,并結合圖文形式予以詳細說明,需要的朋友可以參考下2019-03-03
CascadeView級聯組件實現思路詳解(分離思想和單鏈表)
本文介紹自己最近做省市級聯的類似的級聯功能的實現思路，為了盡可能地做到職責分離跟表現與行為分離，這個功能拆分成了2個組件并用到了單鏈表來實現關鍵的級聯邏輯，下一段有演示效果的gif圖2016-04-04
封裝的dialog插件 基于bootstrap模態(tài)對話框的簡單擴展
這篇文章主要介紹了基于bootstrap模態(tài)對話框的簡單擴展，bootstrap-mzDialog插件的封裝，感興趣的小伙伴們可以參考一下2016-08-08
javascript下用鍵盤控制層的移動的代碼...2007-04-04
這篇文章主要為大家詳細介紹了js實現簡單的放大鏡效果，可隨意更改，放大區(qū)域的大小、比例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
js對文字進行編碼涉及3個函數：escape,encodeURI,encodeURIComponent，相應3個解碼函數：unescape,decodeURI,decodeURIComponent2010-02-02
本文主要介紹了微信小程序開發(fā)之數據存儲、參數傳遞、數據緩存的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要給大家介紹了關于在Js頁面通過POST傳遞參數跳轉到新頁面的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-08-08
這篇文章主要為大家詳細介紹了原生JS貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要給大家介紹了關于Javascript異步流程控制之串行執(zhí)行的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09