一個函式處理多個事件
阿新 • • 發佈:2018-11-27
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function showMessage(){ alert("hello world"); }; window.onload = function(){ var btn = document.getElementById("myBtn"); var handler = function(event){ switch(event.type){ case "click": alert("Click Me Again"); break; case "mouseover": event.target.style.backgroundColor = "red"; break; case "mouseout": event.target.style.backgroundColor = ""; break; } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler; } </script> </head> <body> <input type="button" value="Click Me" onclick="alert('clicked')" /> <input type="button" value="Click " onclick="alert(event.type)" /> <input type="button" value="reClick" onclick="showMessage()"/> <input type="button" value="this" onclick="alert(this.value)" /><!-- 在函式內部this值等於事件的目標元素 --> <input type="button" id="myBtn" value="Click Me Again" /> </body> </html>