JavaScript 中的事件类型
1. 事件类型
(1)事件的定义
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
事件类型
事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件。
事件目标
事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须同时指定类型和目标。像 window 上的 load 事件或者链接的 click 事件。在客户端 js 的应用程序中，Window、Document、和 Element 对象是最常见的事件目标，但是某些事件也是由其它类型的对象触发的。
事件处理程序或事件监听程序
我们用户在页面中进行的点击这个动作 ，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load 等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
事件对象
事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件对象定义一组属性。
事件传播：事件传播是浏览器决定那个对象触发其事件处理程序的过程
(2)事件模型
（1） 内联模型
在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。
（2）脚本模型
由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。
（3）DOM2 模型
“DOM2 级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：
addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)。
(3)传统的事件类型
鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.function(){
var arr=document.getElementsByTagName('div');
for(var i=0;i<arr.length;i++){
arr[i].style.width=200+'px';
arr[i].style.height=200+'px';
// 随机函数 Math.random(): 随机范围是0-1之间的数字
var color1=Math.random()*255;
var color2=Math.random()*255;
var color3=Math.random()*255;
arr[i].style.background='rgb('+color1+','+color2+','+color3+')';
if(i==0){
arr[i].onmouseover=cir;
}else if(i==1){
arr[i].onmousedown=lin;
}
}
//鼠标移入到第一个div上之后，改变为圆形
function cir(){
this.style.borderRadius=100+'px'
}
//鼠标点击第二个元素，这个元素渐变
function lin(){
this.style.background='linear-gradient(to right,yellow,green)';
}
}
</script>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
键盘事件
<script type="text/javascript">
// onkeyup:键盘被松开
document.onkeyup=function(){
alert('键盘被松开触发的事件');
}
// onkeydown:键盘被按下
document.onkeydown=function(){
alert('键盘被按下时触发的事件');
}
// onkeypress:键盘被按下并松开
document.onkeypress=function(){
alert('键盘被按下并松开时触发的事件');
}
</script>
事件对象 Event
兼容方式
当参数为 event时的兼容方式
<script type="text/javascript">
document.onclick=function(event){
var oEvent=event || window.event;
// 结果为:"[object MouseEvent]"
console.log(oEvent);
}
</script>
当参数为ev时的兼容方式
<script type="text/javascript">
window.function(){
document.onclick=function(ev){
//兼容浏览器
var oEvent=ev || event;
//结果为:"[object MouseEvent]"
console.log(oEvent);
}
}
</script>
event 常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.function(){
var btn1=document.getElementById('btn1');
document.onclick=function(ev){
//兼容浏览器
var oEvent=ev || event;
//返回触发事件的元素
var oCurrent=oEvent.target || oEvent.srcElement;
//返回结果："[object HTMLInputElement]"
console.log(oCurrent);
//返回事件类型"click"
console.log(oEvent.type);
/结果为：/"[object HTMLInputElement]"
console.log(oEvent.currentTarget);
//在事件对象是document的时候 返回结果为//"[object HTMLDocument]"
console.log(oEvent.currentTarget);
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="事件处理程序" />
</body>
</html>
target和currentTarget之间的区别：
在事件对象是document的前提下，前者返回的结果为："[object HTMLHtmlElement]"；后者返回的结果为:"[object HTMLDocument]"
表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.function(){
//获取第一个文本框
var txt1=document.for1.userName;
// alert(txt1);
//给获取到的元素添加失去焦点事件
txt1.onblur=function(){
if(txt1.value!='admin'){
//假设用户输入有误，需把文本框的焦点重新设置个当前这个元素
// 使用方法focus()
document.getElementById('span1').innerText='用户名输入错误，重新输入';
txt1.focus();
txt1.value='';
}else{
document.getElementById('span1').innerText='用户名输入正确';
}
}
//在文本1中有默认的值admin，但是在用户点击文本框获得焦点时，清除内容
txt1.onfocus=function(){
this.value='';
this.style.background='yellow';
}
}
</script>
</head>
<body>
<form method="get" name="for1">
<label for="userName">
账户：<input type="text" value="admin" name="userName" id="userName" />
</label>
<span id="span1">错误信息提示。。。。</span>
<br />
<label for="pwd">
密码：<input type="password" name="pwd" id="pwd" />
</label>
<br />
<label for="rad">
性别：<input type="radio" name="rad1" id="rad"/>男
</label>
<label for="rad1">
<input type="radio" name="rad1" id="rad1" />女
</label>
</form>
</body>
</html>
三级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script type="text/javascript">
window.function(){
var select_prov=document.getElementById('select_prov');
var select_city=document.getElementById('select_city');
select_prov.onchange=function(){
//清空城市下拉框
select_city.innerHTML='';
select_city.innerHTML='<option>---请选择城市---</option>';
//获取省份选中的索引
var index_prov=select_prov.selectedIndex;
var arr_city=['西安市','宝鸡市','渭南市','咸阳市'];
if(index_prov==1){ //表示陕西省
for(var i=0;i<arr_city.length;i++){
select_city.innerHTML+='<option>'+arr_city[i]+'</option>';
}
}
}
}
</script>
</head>
<body>
省份:
<select id="select_prov">
<option>---请选择省份---</option>
<option value="陕西省">陕西省</option>
<option value="甘肃省">甘肃省</option>
<option value="河南省">河南省</option>
<option value="四川省">四川省</option>
</select>
城市:
<select id="select_city">
<option>---请选择城市---</option>
<option>西安市</option>
<option>宝鸡市</option>
<option>咸阳市</option>
<option>渭南市</option>
<option>兰州市</option>
<option>天水市</option>
<option>平凉市</option>
<option>武威市</option>
<option>郑州市</option>
<option>许昌市</option>
<option>成都市</option>
<option>广元市</option>
</select>
</body>
</html>