Javascript study notes (events programming)

Javascript events

Javascript in the event that certain behavior on the user's browser, such as click (onclick), pre-loaded (load), etc., these are different events, listed below some common events.

Here Insert Picture Description

Here are a few cases

Turn on automatic page load event

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<script type="text/javascript">
			window.onload = function(){
				document.write('网页加载自动触发');
			}			
		</script>
	</head>
	<body>
	</body>
</html>

Slide the mouse, move event

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript事件</title>
		<script type="text/javascript">
			//鼠标滑过事件
			function funt1(){
			   var obj_div1 = document.getElementById("box1");
			   obj_div1.innerHTML = '<h2>鼠标划过事件</h2><br />';
			}
			//鼠标移动事件
			function funt2(){
			       var obj_div2 = document.getElementById("box1");
			       obj_div2.innerHTML += '鼠标移动事件<br />';
			}
			</script>
			
			<style type="text/css">
			#box {
				width:300px;
				height:300px;
				background-image: url('https://p2.ssl.qhimgs1.com/sdr/400__/t0152f7a1ca7800e152.jpg');
				margin: 150px 200px 0 200px;
				border-radius: 150px;
				}
			</style>
			
			<body>
			  <div  id="box" onmouseover="funt1()"  onmousemove="funt2()"></div>
			  <div id="box1"></div>
			</body>	
		</head>
	</html>

Keyboard key events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>键盘事件</title>
	<script language="javascript">
		// 定义一个字符串接收按下的键盘的值
		str1 = "";
		function funtKey(){
			// 获取按键的ascll值
			key_ascll = event.keyCode;
			// 将ascll值转化为键盘值
			key_value = String.fromCharCode(key_ascll);
			// 赋值给字符串
			str1 += key_value;
			box.innerHTML = str1;
   
    }
    document.onkeypress=funtKey;
   </script>
</head>
<body>
	<h2 id="box"></h2>
 </body>
</html>

Eleven Dian

Published 63 original articles · won praise 1 · views 2032

Private letter concerns

Javascript study notes (events programming)

Javascript events

Here are a few cases

Guess you like