Javascript 基础 DOM 事件_onfuous-优快云博客

本文详细介绍了JavaScript中的各种事件，包括HTML事件、DOM0级事件及常用鼠标键盘事件等，并通过实例展示了事件绑定的方法。

javascript 事件基础

- 事件

- HTML 事件

- DOM 0级事件

- 常用的鼠标与键盘事件

- this 的指向

事件：文档或浏览器窗口中发生的一些特定的交互瞬间。

事件的绑定方式：HTML 事件，DOM 0级事件。

鼠标事件

- onload：页面加载时触发

- oclick：鼠标点击时触发

- onmouseover：鼠标滑过时触发

- onmouseout：鼠标离开时触发

- onfuous：获得焦点时触发

- onblur：失去焦点时触发

- onchange：域的内容改变时发生

关于 this 指向

在事件触发的函数中，this 是对该DOM 对象的引用。

HTML 事件绑定

直接在HTML元素标签内添加事件，执行脚本。

语法：<tag 事件=“执行脚本”> </tag>

功能：在HTML元素上绑定事件。

说明：执行脚本可以是JS代码，也可以是一个函数的调用。

<!DOCTYPE html>
<html>
<head>
	<title>JSTest</title>
	<meta charset="utf-8">
	<style type="text/css">
		.btn{width: 140px;height: 30px;line-height: 30px;
			background: #00f;color: #fff;font-size: 14px;
			text-align: center;border-radius: 10px;
			cursor: pointer;margin-top: 30px;
		}
	</style>
</head>
<body>
	<input type="button" name="bu" value="弹 出" onclick="alert('我是一个按钮')">
	<!-- 鼠标滑过按钮时，调用mouseoverFn函数 -->
	<div id="btn" class="btn" onmouseover="mouseoverFun(this,'#f00')" onmouseout="mouseoutFun(this)">开始</div>
	<script type="text/javascript">
		function mouseoverFun(bbbutton,bgc){
			// 鼠标滑过按钮时，按钮背景变为红色
			bbbutton.style.backgroundColor = bgc;
		}
		function mouseoutFun(bbbutton){
			// 鼠标离开按钮时，按钮背景变为蓝色
			bbbutton.style.backgroundColor = "#00f";
		}
	</script>

</body>
</html>

DOM 0级事件绑定

方式：

一、通过DOM 获取HTML 元素

二、（获取HTNL元素）.事件=执行脚本

	<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
		<li>第五个</li>
	</ul>
	<script type="text/javascript">
		var lis = document.getElementsByTagName("li")
		document.write(lis.length);
		for(var i=0; i<lis.length; i++){
			lis[i].onmouseover=function(){
				this.style.color = "red";
				this.innerHTML = "锁定"
			};
			
			lis[i].onmouseout=btnegt;
		}

		function btnegt(){
			this.style.color = "black";
			this.innerHTML="解锁";
		}

	</script>

其他鼠标事件

a. onload （页面加载完成后触发）与 unload（页面卸载触发）

<body>
	<script type="text/javascript">
		//页面加载时执行,unload 页面卸载时执行
		window.onload = function(){
			//获取box
			var box = document.getElementById("box");
			var clicked = function(){
				alert("我被点击了。")
			}
			box.onclick = clicked;
		}
		
	</script>
	<div id="box">是一个div</div>

</body>

b. onfocus(获得焦点时触发) 与 onblur（失去焦点时触发）
onfocus 事件只能用于 input 标签的type 为text 和password 属性时、textarea标签。

<!DOCTYPE html>
<html>
<head>
	<title>JSTest</title>
	<meta charset="utf-8">
	<style type="text/css">
		.left,.tip{
			float: left;
		}
		.left{margin-left: 10px;}
		.tip{display: none;font-size: 14px;}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			// 获取文本框
			var phone = document.getElementById("phone"),
			tip = document.getElementById("tip");

			// 文本框激活事件
			phone.onfocus = function(){
				tip.style.display="block";
			}

			// 文本框失去焦点
			phone.onblur = function(){
				// 获取文本框的值,value 用于获取表单元素的值
				var phoneVal = this.value;
				// 判断是否是十一位数字
				if(phoneVal.length == 11 && isNaN(phoneVal) == false){
					tip.innerHTML = "correct";
				}
				else{
					tip.innerHTML = "uncorrect"
				}
			}
		}
	</script>
</head>
<body>

	<div class="box">

		<div class="left">
			<input type="text" name="" id="phone" placeholder="请输入手机号码">
		</div>

		<div class="tip" id="tip">
			请输入有效的手机号码
		</div>

	</div>

</body>
</html>

c. onchange 事件（域的内容发生改变时触发）

一般用于select 元素或checkbox元素或radio元素。

<!DOCTYPE html>
<html>
<head>
	<title>JSTest</title>
	<meta charset="utf-8">
</head>
<body>

	<div class="box">
		请选择您喜欢的背景色：
		<select name="" id="bgselect">
			<option value="">请选择</option>
			<option value="#f00">红色</option>
			<option value="#00f">蓝色</option>
			<option value="#0f0">绿色</option>
		</select>
	</div>

	<script type="text/javascript">
		var slt = document.getElementById("bgselect");

		slt.onchange = function(){
			var clr = this.value;
			// var clr = slt.options[slt.selectedIndex].value;
			if(clr != ""){
				document.body.style.backgroundColor = clr;
			}else{
				document.body.style.backgroundColor = "#fff";
			}

		}
	</script>
</body>
</html>

d. onsubmit（表单中的确认按钮被点击时发生）
onsubmit事件不是加在按钮上的，而是加在form 标签上的！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    <form action="" id="form">
    What is your name?<br />
    <input type="text" name="fname" />
    <input type="submit" value="Submit" />
    </form> 
    </form>
<script>
    var btn = document.getElementById("form");
    btn.onsubmit = function(){
    alert("信息提交成功！");
    }
</script>
</body>
</html>

e. onmousedown (鼠标按钮在元素上按下时触发)

onmousemove (鼠标指针移动时触发)

onmouseup (在元素上松开鼠标按钮时触发)

<body>

	<div class="box" id="box">拖动</div>

	<script type="text/javascript">
		var box = document.getElementById("box");

		// 绑定一个按下事件
		box.onmousedown = function(){

		}

		// 绑定一个移动事件
		box.onmousemove = function(){

		}

		// 绑定一个鼠标松开事件
		box.onmouseup = function(){

		}

		
 	</script>
</body>

f. onresize(当调整浏览器窗口的大小时触发) 与 onscroll（拖动滚动条滚动时触发）

	<script type="text/javascript">
		//浏览器窗口尺寸改变
		window.onresize = function(){
			document.write("尺寸改变");
			console.log("尺寸改变")
		}
		// 拖动滚动条
		window.onscroll = function(){
			document.write("拖动滚动条");
			console.log("拖动滚动条")
		}
	</script>

键盘事件与 keyCode 属性

onkeydown 事件（在用户按下一个键盘按键时发生）

onkeypress 事件（在键盘被按下并释放一个键时发生）

onkeyup 事件（在键盘按键被松开时发生）

keyCode 属性（返回onkeypress、onkeydown、onkeyup 事件触发的键的值的字符代码，或键的代码）

<script type="text/javascript">
		document.onkeydown = function(event){
			console.log(event.keyCode);
		}

		document.onkeyup = function(event){
			console.log(event.keyCode);
		}

		document.onkeypress = function(event){
			console.log(event.keyCode);
		}
	</script>

<!DOCTYPE html>
<html>
<head>
	<title>JSTest</title>
	<meta charset="utf-8">
	<style type="text/css">
		.text span{font-weight: bold;color: "#f00"}
		em{font-style: normal;}
	</style>
</head>
<body>
	<div>
		<p class="text">您还可以输入<span><em id="count">30</em>/30</span></p>
		<div class="input">
			<textarea name="" id="tttext" cols="70" rows="4"></textarea>
		</div>
	</div>
	<script type="text/javascript">

		var text = document.getElementById("tttext");
		var total = 30;
		// 绑定键盘事件
		document.onkeyup = function(event){
			// 获取文本框长度
			var len = text.value.length;
			if(len>30){
				alert("字符数目不能超过30！");
				text.value = text.value.substring(0,total);
				document.getElementById("count").innerHTML = total - len;
				return ;
			}
			document.getElementById("count").innerHTML = total - len;

		}
	</script>

</body>
</html>