當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）
生活随笔
收集整理的這篇文章主要介紹了
JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML 事件的例子：
- 當用戶點擊鼠標時
- 當網頁已加載時
- 當圖像已加載時
- 當鼠標移動到元素上時
- 當輸入字段被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時
?
addEventListener()方法（與事件結合使用，觸發）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</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>" } </script></body> </html>addEventListener()所有瀏覽器兼容的解決方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧)</title> </head> <body><p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p> <p>該實例演示了所有瀏覽器兼容的解決方法。</p> <button id="myBtn">點我</button> <script> var x = document.getElementById("myBtn"); if (x.addEventListener) {x.addEventListener("click", myFunction); } else if (x.attachEvent) {x.attachEvent("onclick", myFunction); } function myFunction() {alert("Hello World!"); } </script></body> </html>?
removeEventListener() 方法（移除由 addEventListener() 方法添加的事件）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <head> <style> #myDIV {background-color: coral;border: 1px solid;padding: 50px;color: white; } </style> </head> <body><div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠標在桔紅色的框內移動時會顯示隨機數。<p>點擊按鈕移除 DIV 的事件句柄。</p><button onclick="removeHandler()" id="myBtn">點我</button> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() {document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() {document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script></body> </html>?
單擊事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1></body> </html>函數處理?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <head> <script> function changetext(id){id.innerHTML="Ooops!"; } </script> </head> <body><h1 onclick="changetext(this)">點擊文本!</h1></body> </html>?
單擊按鈕
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p>點擊按鈕執行 <em>displayDate()</em> 函數.</p> <button onclick="displayDate()">點這里</button> <script> function displayDate(){document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p></body> </html>?
單擊按鈕DOM分配事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <head> </head> <body><p>點擊按鈕執行 <em>displayDate()</em> 函數.</p> <button id="myBtn">點這里</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p></body> </html>?
onload事件（用戶進入頁面時觸發）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body onload="checkCookies()"><script> function checkCookies(){if (navigator.cookieEnabled==true){alert("Cookies 可用")}else{alert("Cookies 不可用")} } </script> <p>彈窗-提示瀏覽器 cookie 是否可用。</p></body> </html>?
onunload事件（用戶離開頁面時觸發）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body onunload="checkCookies()"><script> function checkCookies(){alert("88888") } </script></body> </html>?
onchange事件（用戶輸入內容后離開時觸發）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <head> <script> function myFunction(){var x=document.getElementById("fname");x.value=x.value.toUpperCase(); } </script> </head> <body>輸入你的名字: <input type="text" id="fname" onchange="myFunction()"> <p>當你離開輸入框后，函數將被觸發，將小寫字母轉為大寫字母。</p></body> </html>?
onmouseover事件（用戶鼠標移至元素上）
onmouseout事件（用戶鼠標移出元素時）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mOver(obj){obj.innerHTML="Thank You" } function mOut(obj){obj.innerHTML="Mouse Over Me" } </script></body> </html>?
onmousedown事件（當點擊鼠標按鈕時）
onmouseup事件（釋放鼠標按鈕時）
onclick 事件（完成鼠標點擊時）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick="mClick(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mDown(obj){obj.innerHTML="111111" } function mUp(obj){obj.innerHTML="222222" } function mClick(obj){alert("check") } </script></body> </html>?
（onmousedown和onmouseup事件）鼠標點擊按鈕更換圖像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <head> <script> function lighton(){document.getElementById('myimage').src="bulbon.gif"; } function lightoff(){document.getElementById('myimage').src="bulboff.gif"; } </script> </head><body> <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" /> <p>點擊不釋放鼠標燈將一直亮著!</p> </body> </html>?
（onfocus事件）當輸入字段獲得焦點時，改變其背景色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <head> <script> function myFunction(x){x.style.background="yellow"; } </script> </head> <body>輸入你的名字: <input type="text" onfocus="myFunction(this)"> <p>當輸入框獲取焦點時，修改背景色（background-color屬性） 將被觸發。</p></body> </html>?
（鼠標事件）當指針移動到元素上方時，改變其顏色；當指針移出文本后，會再次改變其顏色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><h1 onmouseover="style.color='red'"onmouseout="style.color='black'">將鼠標移至文部上</h1></body> </html>?
總結
以上是生活随笔為你收集整理的JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1001.害死人不偿命的（3n+1)猜想
- 下一篇： Java初学者推荐的几本书