事件基础

JavaScript 中一个事件由 事件主角、事件类型、事件过程 三部分组成

事件调用方式

script 标签中调用

<script></script>

obj.事件名 = function()
{
    ....;
};  // ; 是为了规范

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				// 获取元素
				var obtn = document.getElementById("btn");
				// 为元素添加点击事件
				obtn.onclick = function()
				{
					alert("学习网");
				};
			}
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="弹出" />
	</body>
</html>

元素中调用事件

元素中调用事件是在 HTML 属性中来调用事件，即事件属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    function alertMes()
			{
				alert("学习网");
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="alertMes()" value="弹出" />
	</body>
</html>

常见事件

鼠标事件

onclick：鼠标单击事件 可以为任何元素添加单击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var odiv = document.getElementById("btn");
				odiv.onclick = function()
				{
					alert("学习网");
				};
			};
		</script>
	</head>
	<body>
		<div id="btn">调式代码</div>
	</body>
</html>

obtn.onclick = alertMes;
function alertMes()
{
    alert("Hello Word");
};
/* 等价如下 */
obtn.onclick = function()
{
    alert("Hello Word");
};

onmouseover：鼠标移入事件
onmouseout：鼠标移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var op = document.getElementById("content");
				op.onmouseover = function()
				{
					this.style.color = "red";
				};
				op.onmouseout = function()
				{
					this.style.color = "black";
				};
			};
		</script>
	</head>
	<body>
		<p id="content">学习网</p>
	</body>
</html>

onmousedown：鼠标按下事件
onmouseup：鼠标松开事件
onmousemove：鼠标移动事件
当鼠标按下会触发 onmousedown 事件，当用户松开时会触发 onmouseup 事件，鼠标移动会触发 onmousemove 事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var odiv = document.getElementById("title");
				var obtn = document.getElementById("btn");
				obtn.onmousedown = function()
				{
					odiv.style.color="red";
				};
				obtn.onmouseup = function()
				{
					odiv.style.color = "black";
				};
				obtn.onmousemove = function()
				{
					odiv.style.color = "gold";
				};
			};
		</script>
	</head>
	<body>
		<h1 id="title">学习网</h1>
		<hr />
		<input id="btn" type="button" value="button"/>
	</body>
</html>

键盘事件

onkeydown：键盘按下
onkeyup：键盘松开
统计输入字符串的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var otxt = document.getElementById("txt");
				var onum = document.getElementById("num");
				otxt.onkeyup = function()
				{
					var str = otxt.value;
					onum.innerHTML = str.length;
				};
			};
		</script>
	</head>
	<body>
		<input id="txt" type="text" />
		<div>字符串长度为:<span id="num">0</span></div>
	</body>
</html>

验证输入是否正确

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var otxt = document.getElementById("txt");
				var odiv = document.getElementById("content");
				var myregex = /^[0-9]*$/;
				otxt.onkeyup = function()
				{
					//判断输入是否是数字
					if(myregex.test(otxt.value)){
						odiv.innerHTML = "输入正确";
					}else{
						odiv.innerHTML = "必须输入数字";
					}
				};
			};
		</script>
	</head>
	<body>
		<input id="txt" type="text" />
		<div  id="content" style="color: red;"></div>
	</body>
</html>

表单事件

onfocus：获取焦点时触发的事件
onblur：失去焦点时触发的事件
用户准备在文本框中输入内容时，此时它会获得光标，触发 onfocus 事件；当文本框失去光标时，就会触发 onblur 事件；具有焦点事件地元素有：表单元素(单选框、复选框、单行文本框、多行文本框、下拉列表)、超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				// 获取元素对象
				var oSearch = document.getElementById("search");
				// 获取焦点
				oSearch.onfocus = function()
				{
					if(this.value == "百度一下，你就知道")
					    this.value = "";
				};
				// 失去焦点
				oSearch.onblur = function()
				{
					if(this.value == "")
					    this.value = "百度一下，你就知道";
				};
			};
		</script>
	</head>
	<body>
		<input id="search" type="text" value="百度一下，你就知道" />
		<input id="Button1" type="button" value="搜索" />
	</body>
</html>

focus() 仅仅用于让元素获取焦点
onselect：选中单行或者多行文本框中的内容时，就会触发 onselect 事件

每次点击搜索框，自动帮我们把文本框内的文本全部选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var oSearch = document.getElementById("search");
				oSearch.onclick = function()
				{
					this.select();
				};
			};
		</script>
	</head>
	<body>
		<input id="search" type="text" value="百度一下，你就知道" />
	</body>
</html>

onchange：用于具有多个选项的表单元素；单选框选择某一项时触发；复选框选择某一项时触发；下拉列表选择某一项时触发
单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var ofruit = document.getElementsByName("fruit");
				var op = document.getElementById("content");
				for(var i = 0; i < ofruit.length; i++)
				{
					ofruit[i].onchange = function()
					{
						if(this.checked)
						    op.innerHTML = "你选择的是：" + this.value;
					};
				}
			}
		</script>
	</head>
	<body>
		<div>
			<label><input type="radio" name="fruit" value="苹果" />苹果</label>
			<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
		</div>
		<p id="content"></p>
	</body>
</html>

复选框的全选与反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var oselectall = document.getElementById("selectAll");
				var ofruit = document.getElementsByName("fruit");
				
				oselectall.onchange = function()
				{
					// 如果选中，即 this.checked 返回 true
					if(this.checked){
						for(var i = 0; i < ofruit.length; i++)
						    ofruit[i].checked = true;
					}else{
						for(var i = 0; i < ofruit.length; i++)
						    ofruit[i].checked = false;
					}
				};
			}
		</script>
	</head>
	<body>
		<div>
			<p><label><input id="selectAll" type="checkbox"/>全选/反选:</label></p>
			<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
			<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
		</div>
	</body>
</html>

下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var olist = document.getElementById("list");
				olist.onchange = function()
				{
					var link = this.options[this.selectedIndex].value;
					window.open(link); //打开一个新的窗口
				};
			}
		</script>
	</head>
	<body>
		<select id="list">
			<option value="http://www.baidu.com">百度</option>
			<option value="http://www.sina.com.cn">新浪</option>
			<option value="http://www.qq.com">腾讯</option>
			<option value="http://www.sohu.com">搜狐</option>
		</select>
	</body>
</html>

编辑事件

oncopy：防止页面内容被复制

document.body.oncopy = function()
{
    return false;
}

onselectstart：防止页面内容被选取

document.body.onselectstart = function()
{
    return false;
}

oncontextmenu：禁止鼠标右键

document.oncontextmenu = function()
{
    return false;
}

页面事件

onload：表示文档加载完成后再执行的一个事件

window.onload = function()
{
    ......
}

onbeforeunload：表示离开页面之前触发的一个事件

window.onbeforeunload = function()
{
    ......
}

一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的

事件进阶

在 JavaScript 中，想要给元素添加一个事件的两种方式是 事件处理器 和 事件监听器

事件处理器

通过 HTML 属性的方式来给元素添加一个事件
事件处理器没办法为一个元素添加多个相同的事件

变量名.onclick = function()
{
    ......;
};

事件监听器

addEventListener()：为一个元素添加事件，可以为同一种元素添加多个相同的事件

obj.addEventListenner(type, fn, false)
/*
obj是一个 DOM 对象，用 getElementById()、getElementsByTagName()等方法获取元素节点
type 是一个字符串，指的是事件类型
fn 是一个函数名，或者匿名函数
false 表示事件冒泡阶段的调用
*/

// fn 是一个函数名
obtn.addEventListener("click", alertMes, false);
function alertMes()
{
    alert("JavaScript");
}
// 调用匿名函数
obtn.addEventListener("click", function(){
    alert("JavaScript");
}, false);

实际开发中，可能使用多次 window.onload，但是 JavaScript 只执行最后一次 window.onload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addLoadEvent(func)
			{
				var oldonload = window.onload;
				if(typeof window.onload != "function"){
				    window.onload = func;
				}else{
					window.onload = function()
					{
						oldonload();
						func();
					}
				}
			}
			addLoadEvent(function(){
				var obtn1 = document.getElementById("btn1");
				obtn1.onclick = function()
				{
					alert("第一次");
				};
			});
			addLoadEvent(function(){
				var obtn2 = document.getElementById("btn2");
				obtn2.onclick = function()
				{
					alert("第二次");
				};
			});
			addLoadEvent(function(){
				var obtn3 = document.getElementById("btn3");
				obtn3.onclick = function()
				{
					alert("第三次");
				};
			});
		</script>
	</head>
	<body>
		<input id="btn1" type="button" value="按钮1" /><br />
		<input id="btn2" type="button" value="按钮2" /><br />
		<input id="btn3" type="button" value="按钮3" /><br />
	</body>
</html>

removeEventListener()：为元素解绑某个事件

obj.removeEventListener(type, fn, false);
/*
obj:是一个DOM对象, 使用 getElementById()、getElementsByTagName()等方法获取
type: 字符串, 指的是事件类型, fn 必须是一个函数名, 而不能是一个函数
*/

解除事件监听器添加的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function(){
				var odiv = document.getElementById("content");
				var obtn = document.getElementById("btn");	
				// 为 div 添加事件
				odiv.addEventListener("click", changeColor, false);
				// 点击按钮后,为 div 解除事件
				obtn.addEventListener("click",function(){
					odiv.removeEventListener("click", changeColor, false);
				}, false);
				function changeColor(){
					this.style.color = "hotpink";
				}
			}
		</script>
	</head>
	<body>
		<p id="content">学习网</p>
		<input id="btn" type="button" value="解除" />
	</body>
</html>

解除事件处理器添加的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function(){
				var odiv = document.getElementById("content");
				var obtn = document.getElementById("btn");	
				// 为 div 添加事件
				odiv.onclick = changeColor;
				// 点击按钮后,为 div 解除事件
				obtn.addEventListener("click",function(){
					odiv.onclick = null;
				}, false);
				function changeColor(){
					this.style.color = "hotpink";
				}
			}
		</script>
	</head>
	<body>
		<p id="content">学习网</p>
		<input id="btn" type="button" value="解除" />
	</body>
</html>

event 对象

event对象：事件有关的详细信息临时保存的指定的地方

属性 说明
t y p e type type 事件类型
k e y C o d e keyCode keyCode 键码值
s h i f t K e y shiftKey shiftKey 是否按下 S h i f t Shift Shift 键
c t r l K e y ctrlKey ctrlKey 是否按下 C t r l Ctrl Ctrl 键
a l t K e y altKey altKey 是否按下 A l t Alt Alt 键

shiftKey、ctrlKey、altKey 返回的是布尔值

type

type：获取事件的类型， . 运算符访问

keyCode

keyCode：获取按下了键盘中的哪个键

event.keyCode;  // 返回的是一个数值
按键 键码
W(上) 87
S(下) 83
A(左) 65
D(右) 68
⬆ 38
⬇ 40
⬅ 37
➡ 39

获取上下左右方向键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function(){
				var ospan = document.getElementsByTagName("span")[0];
				window.addEventListener("keydown", function(e){
					if(e.keyCode == 38 || e.keyCode == 68){
						ospan.innerHTML = "上";
					}else if(e.keyCode == 39 || e.keyCode == 68){
						ospan.innerHTML = "右";
					}else if(e.keyCode == 40 || e.keyCode == 83){
						ospan.innerHTML = "下";
					}else if(e.keyCode == 37 || e.keyCode == 65){
						ospan.innerHTML = "左";
					}else{
						ospan.innerHTML = "";
					}
				}, false);
			}
		</script>
	</head>
	<body>
		<div>你控制的方向是:<span style="font-weight: bold; color: hotpink;"></span></div>
	</body>
</html>

this 对象

哪个 DOM 对象调用了 this 所在的函数，那么 this 指向的就是哪个 DOM 对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var btns = document.getElementsByTagName('button');
				// btns得到的是伪数组  里面的每一个元素 btns[i]
				for (var i = 0; i < btns.length; i++) {
				    btns[i].onclick = function() {
				        // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
				        for (var i = 0; i < btns.length; i++) {
				            btns[i].style.backgroundColor = '';
				        }
				        // (2) 然后才让当前的元素背景颜色为pink 留下我自己
				        this.style.backgroundColor = 'pink';
				    }
				}
			}
		</script>
	</head>
	<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
	</body>
</html>