當(dāng)前位置：
首頁(yè) >
[JS-DOM]事件监听机制
發(fā)布時(shí)間：2023/12/4
47
豆豆
生活随笔
收集整理的這篇文章主要介紹了
[JS-DOM]事件监听机制
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
事件監(jiān)聽(tīng)機(jī)制
概念:某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的指行。*事件: 某些操作。如:單擊，雙擊，鍵盤按下了，鼠標(biāo)移動(dòng)了。*事件源:組件。如:按鈕，文本輸入框...*監(jiān)聽(tīng)器:代碼。*注冊(cè)監(jiān)聽(tīng):將事件，事件源，監(jiān)聽(tīng)器結(jié)合在一起。當(dāng)事件源上發(fā)生了某個(gè)事件，則觸發(fā)指向某個(gè)監(jiān)聽(tīng)器代碼。常見(jiàn)的事件：
1. 點(diǎn)擊事件：1. onclick：單擊事件2. ondblclick：雙擊事件2. 焦點(diǎn)事件1. onblur：失去焦點(diǎn)。* 一般用于表單驗(yàn)證2. onfocus:元素獲得焦點(diǎn)。3. 加載事件：1. onload：一張頁(yè)面或一幅圖像完成加載。4. 鼠標(biāo)事件：1. onmousedown 鼠標(biāo)按鈕被按下。* 定義方法時(shí)，定義一個(gè)形參，接受event對(duì)象。* event對(duì)象的button屬性可以獲取鼠標(biāo)按鈕鍵被點(diǎn)擊了。2. onmouseup 鼠標(biāo)按鍵被松開(kāi)。3. onmousemove 鼠標(biāo)被移動(dòng)。4. onmouseover 鼠標(biāo)移到某元素之上。5. onmouseout 鼠標(biāo)從某元素移開(kāi)。5. 鍵盤事件：1. onkeydown 某個(gè)鍵盤按鍵被按下。2. onkeyup 某個(gè)鍵盤按鍵被松開(kāi)。3. onkeypress 某個(gè)鍵盤按鍵被按下并松開(kāi)。6. 選擇和改變1. onchange 域的內(nèi)容被改變。2. onselect 文本被選中。7. 表單事件：1. onsubmit 確認(rèn)按鈕被點(diǎn)擊。* 可以阻止表單的提交* 方法返回false則表單被阻止提交。2. onreset 重置按鈕被點(diǎn)擊。示例代碼如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>常見(jiàn)事件</title><script>/*常見(jiàn)的事件：1. 點(diǎn)擊事件：1. onclick：單擊事件2. ondblclick：雙擊事件2. 焦點(diǎn)事件1. onblur：失去焦點(diǎn)。* 一般用于表單驗(yàn)證2. onfocus:元素獲得焦點(diǎn)。3. 加載事件：1. onload：一張頁(yè)面或一幅圖像完成加載。4. 鼠標(biāo)事件：1. onmousedown 鼠標(biāo)按鈕被按下。* 定義方法時(shí)，定義一個(gè)形參，接受event對(duì)象。* event對(duì)象的button屬性可以獲取鼠標(biāo)按鈕鍵被點(diǎn)擊了。2. onmouseup 鼠標(biāo)按鍵被松開(kāi)。3. onmousemove 鼠標(biāo)被移動(dòng)。4. onmouseover 鼠標(biāo)移到某元素之上。5. onmouseout 鼠標(biāo)從某元素移開(kāi)。5. 鍵盤事件：1. onkeydown 某個(gè)鍵盤按鍵被按下。2. onkeyup 某個(gè)鍵盤按鍵被松開(kāi)。3. onkeypress 某個(gè)鍵盤按鍵被按下并松開(kāi)。6. 選擇和改變1. onchange 域的內(nèi)容被改變。2. onselect 文本被選中。7. 表單事件：1. onsubmit 確認(rèn)按鈕被點(diǎn)擊。* 可以阻止表單的提交* 方法返回false則表單被阻止提交。2. onreset 重置按鈕被點(diǎn)擊。*///2.加載完成事件 onloadwindow.onload = function(){/*//1.失去焦點(diǎn)事件document.getElementById("username").onblur = function(){alert("失去焦點(diǎn)了...");}*//*//3.綁定鼠標(biāo)移動(dòng)到元素之上事件document.getElementById("username").onmouseover = function(){alert("鼠標(biāo)來(lái)了....");}*//* //3.綁定鼠標(biāo)點(diǎn)擊事件document.getElementById("username").onmousedown = function(event){// alert("鼠標(biāo)點(diǎn)擊了....");alert(event.button);}*//* document.getElementById("username").onkeydown = function(event){// alert("鼠標(biāo)點(diǎn)擊了....");// 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(){//校驗(yàn)用戶名格式是否正確var flag = false;return flag;}*/}function checkForm(){return true;}</script></head> <body><!--function fun(){return checkForm();}--><form action="#" id="form" onclick="return checkForm();"> <input name="username" id="username"><select id="city"><option>--請(qǐng)選擇--</option><option>北京</option><option>上海</option><option>西安</option> </select> <input type="submit" value="提交"> </form> </body> </html>總結(jié)
以上是生活随笔為你收集整理的[JS-DOM]事件监听机制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JAVA抽奖工具包
- 下一篇： Spring5 jar包下载