當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

[JS-DOM]事件监听机制

發布時間：2023/12/4 javascript 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 [JS-DOM]事件监听机制小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

事件監聽機制

概念:某些組件被執行了某些操作后，觸發某些代碼的指行。*事件: 某些操作。如:單擊，雙擊，鍵盤按下了，鼠標移動了。*事件源:組件。如:按鈕，文本輸入框...*監聽器:代碼。*注冊監聽:將事件，事件源，監聽器結合在一起。當事件源上發生了某個事件，則觸發指向某個監聽器代碼。

常見的事件：

1. 點擊事件：1. onclick：單擊事件2. ondblclick：雙擊事件2. 焦點事件1. onblur：失去焦點。* 一般用于表單驗證2. onfocus:元素獲得焦點。3. 加載事件：1. onload：一張頁面或一幅圖像完成加載。4. 鼠標事件：1. onmousedown 鼠標按鈕被按下。* 定義方法時，定義一個形參，接受event對象。* event對象的button屬性可以獲取鼠標按鈕鍵被點擊了。2. onmouseup 鼠標按鍵被松開。3. onmousemove 鼠標被移動。4. onmouseover 鼠標移到某元素之上。5. onmouseout 鼠標從某元素移開。5. 鍵盤事件：1. onkeydown 某個鍵盤按鍵被按下。2. onkeyup 某個鍵盤按鍵被松開。3. onkeypress 某個鍵盤按鍵被按下并松開。6. 選擇和改變1. onchange 域的內容被改變。2. onselect 文本被選中。7. 表單事件：1. onsubmit 確認按鈕被點擊。* 可以阻止表單的提交* 方法返回false則表單被阻止提交。2. onreset 重置按鈕被點擊。

示例代碼如下:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>常見事件</title><script>/*常見的事件：1. 點擊事件：1. onclick：單擊事件2. ondblclick：雙擊事件2. 焦點事件1. onblur：失去焦點。* 一般用于表單驗證2. onfocus:元素獲得焦點。3. 加載事件：1. onload：一張頁面或一幅圖像完成加載。4. 鼠標事件：1. onmousedown 鼠標按鈕被按下。* 定義方法時，定義一個形參，接受event對象。* event對象的button屬性可以獲取鼠標按鈕鍵被點擊了。2. onmouseup 鼠標按鍵被松開。3. onmousemove 鼠標被移動。4. onmouseover 鼠標移到某元素之上。5. onmouseout 鼠標從某元素移開。5. 鍵盤事件：1. onkeydown 某個鍵盤按鍵被按下。2. onkeyup 某個鍵盤按鍵被松開。3. onkeypress 某個鍵盤按鍵被按下并松開。6. 選擇和改變1. onchange 域的內容被改變。2. onselect 文本被選中。7. 表單事件：1. onsubmit 確認按鈕被點擊。* 可以阻止表單的提交* 方法返回false則表單被阻止提交。2. onreset 重置按鈕被點擊。*///2.加載完成事件 onloadwindow.onload = function(){/*//1.失去焦點事件document.getElementById("username").onblur = function(){alert("失去焦點了...");}*//*//3.綁定鼠標移動到元素之上事件document.getElementById("username").onmouseover = function(){alert("鼠標來了....");}*//* //3.綁定鼠標點擊事件document.getElementById("username").onmousedown = function(event){// alert("鼠標點擊了....");alert(event.button);}*//* document.getElementById("username").onkeydown = function(event){// alert("鼠標點擊了....");// alert(event.button);if(event.keyCode == 13){alert("提交表單");}}*//* document.getElementById("username").onchange = function(event){alert("改變了...")}document.getElementById("city").onchange = function(event){alert("改變了...")}*//*document.getElementById("form").onsubmit = function(){//校驗用戶名格式是否正確var flag = false;return flag;}*/}function checkForm(){return true;}</script></head> <body><form action="#" id="form" onclick="return checkForm();"> <input name="username" id="username"><select id="city"><option>--請選擇--</option><option>北京</option><option>上海</option><option>西安</option> </select> <input type="submit" value="提交"> </form> </body> </html>

總結

以上是生活随笔為你收集整理的[JS-DOM]事件监听机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。