天天看點
傳回

JavaScript事件函數

滑鼠事件

onmousedown 當滑鼠按下的時候觸發

onmouseup 當滑鼠擡起的時候觸發

onmouseover 當滑鼠移入的時候觸發

onmouseout 當滑鼠移出的時候觸發

onclick 當滑鼠點選的時候觸發

ondblclick 當滑鼠輕按兩下的時候觸發

onmousemove 當滑鼠移動的時候觸發

oncontextmenu 當滑鼠右鍵的時候觸發

鍵盤事件

和鍵盤有關的事件 鍵盤按鍵下 上

onkeydown 擡起

onkeyup 按下

ev.keyCode 擷取鍵盤碼

onsubmit 表單送出

onchange 修改表單觸發

return false 可以阻止表單送出

onfocus 擷取焦點事件

onblur 失去焦點事件

視窗事件

onload 當對象加載完成以後執行

window 視窗 最頂層的對象

onresize 視窗改變觸發對象

重點：記住相容性解決方案 var ev = ev || event

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑鼠按下喚起</title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			//找到對象
			var oBox = document.getElementById('box')
			//改背景顔色
			oBox.onmousedown = function(){
				//更改背景顔色
				oBox.style.backgroundColor = 'yellow'
			}
			oBox.onmouseup = function(){
				oBox.style.backgroundColor = 'blue'
			}
		</script>
	</body>
</html>
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑鼠移入移出</title>
		<style type="text/css">
			a{
				text-decoration: none;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >劉冬冬</a>
		<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >張小文</a>
		<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >張志文</a>
		<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >金志文</a>
		<script type="text/javascript">
			var aA = document.getElementsByTagName('a')
			//批量綁定事件，周遊aA這個集合
			console.log(aA)
			for(var i in aA){
				aA[i].onmouseover = function(){
					console.log(this)
					this.style.backgroundColor = 'red'
					this.style.color = 'white'
				}
				aA[i].onmouseout = function(){
					console.log(this)
					this.style.backgroundColor = 'white'
					this.style.color = 'black'
				}
			}
		</script>
	</body>
</html>
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑鼠移動點選事件</title>
	</head>
	<body>
		<button>點選</button>
		<script type="text/javascript">
			//通過标簽進行找尋
			var oBtn = document.getElementsByTagName('button')
			console.log(oBtn)
			oBtn[0].ondblclick = function(){
				alert("被輕按兩下啊")
			}
			//滑鼠移動事件  document表示整個HTML文檔
			document.onmousemove = function(){
				console.log("滑鼠移動了")
			}
			
			//右鍵
			document.oncontextmenu = function(){
				alert("右擊菜單")
				//阻止原生右擊菜單
				return false
			}
		</script>
	</body>
</html>
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鍵盤事件</title>
	</head>
	<body>
		<script type="text/javascript">
			document.onkeydown = function(){
				console.log("鍵盤按下了")
			}
			document.onkeyup = function(ev){
				console.log(ev.keyCode)
				if(ev.keyCode === 76){
					alert("嘤嘤嘤")
					window.open("http://www.baidu.com")
				}
			}
		</script>
	</body>
</html>
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表單事件</title>
	</head>
	<body>
		<form action="https://www.baidu.com/s">
			<input type="text" id="ipt" name="wd"/>
			<button type="submit">送出</button>
		</form>
		<script type="text/javascript">
			var oForm = document.getElementsByTagName('form')
			var oIpt = document.getElementById('ipt')
			oForm[0].onsubmit = function(){
				var iptvalue  = oIpt.value
				//驗證
				if(iptvalue === ""){
					alert("使用者名必須輸入内容")
					return false
				}
				alert(52)
				return true
			}
		</script>
	</body>
</html>
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>焦點事件</title>
	</head>
	<body>
		<form action="https://www.baidu.com/s" id="form">
			<input type="text" name="wd" id="ipt" value="請輸入要搜尋的内容：" />
		</form>
		<script type="text/javascript">
			var oIpt = document.getElementById('ipt')
			var oForm = document.getElementById('form')
			oIpt.onfocus = function(){
				oIpt.value = ""
			}
			oIpt.onblur = function(){
				if(oIpt.value == ""){
					oIpt.value = "請輸入要搜尋的内容："
				}
			}
			oForm.onsubmit = function(){
				if(oIpt.value == ""){
					alert("你還沒有輸入搜尋内容？")
					return false
				}
			}
		</script>
	</body>
</html>
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>視窗事件</title>
		<script type="text/javascript">
			window.onload = function(){
				var oBox = document.getElementById('box')
				alert(oBox.innerHTML)
			}
			
		</script>
	</head>
	<body>
		<div id="box">box1</div>
	</body>
</html>
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>視窗事件</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onresize = function(){
				console.log(document.documentElement.clientHeight)
				console.log(document.documentElement.clientWidth)
			}
		</script>
	</body>
</html>
web javascript JavaScript事件 JavaScript事件函數 js事件函數 js事件
上一篇: Js的事件委托是什麼，原理是什麼
下一篇: 找工作之擔心

繼續閱讀