<!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>一个函数处理多个事件
猜你喜欢
转载自blog.csdn.net/qq_42740745/article/details/84313335
今日推荐
周排行