事件的类型
事件的定义
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
事件类型
事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。
事件目标
事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须同时指定类型和目标。像 window 上的 load 事件或者链接的 click 事件。
事件处理程序或事件监听程序
我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load 等都是事件的名称。
响应某个事件的函数则称为事件、处理程序，或者叫做事件侦听器。
事件对象
事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。
所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件对象定义一组属性。
事件传播
事件传播是浏览器决定那个对象触发其事件处理程序的过程
事件模型
内联模型
这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。
虽然内联在早期使用较多，但它是和 HTML 混写的，并没有与 HTML 分离。
脚本模型
由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。
这种处理方式就是脚本模型。
DOM2 模型
“DOM2 级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：
addEventListener()， removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)。
传统的事件类型
鼠标事件
HTML文档的head部分的JavaScript代码
<script type="text/javascript">
//鼠标事件
/* onclick: 单击事件 仅鼠标左键按下
ondblclick: 双击事件
onmouseenter: 鼠标悬浮
onmouseover: 鼠标悬浮
onmousedown: 鼠标按钮被按下 鼠标左右键皆可
onmouseleave: 鼠标离开
onmouseout: 鼠标离开
onmouseup: 鼠标按键被松开
onmousemove: 鼠标移动
onmousewheel: 鼠标滑轮事件 */
window.onload=function(){
//获取页面元素
//onclick: 单击事件 仅鼠标左键按下
var myClick=document.getElementsByClassName('div1')[0];
myClick.onclick=function(){
myClick.style.background="skyblue";
alert('你单击了按钮');
}
//ondblclick: 双击事件
var myDblclick=document.getElementsByClassName('div1')[1];
myDblclick.ondblclick=function(){
myDblclick.style.background="pink";
alert('你双击了按钮');
}
//onmouseenter: 鼠标悬浮
var myMouseEnter=document.getElementsByClassName('div1')[2];
myMouseEnter.onmouseenter=function(){
myMouseEnter.style.background="lawngreen";
alert('鼠标悬浮(onmouseenter)');
}
//onmouseenter: 鼠标悬浮
var myMouseOver=document.getElementsByClassName('div1')[3];
myMouseOver.onmouseover=function(){
myMouseOver.style.background="red";
alert('鼠标悬浮(onmouseenter)');
}
//onmousedown: 鼠标按钮被按下 鼠标左右键皆可
var myMouseDown=document.getElementsByClassName('div1')[4];
myMouseDown.onmousedown=function(){
myMouseDown.style.background="yellow";
alert('鼠标按钮被按下');
}
//onmouseleave: 鼠标离开
var myMouseLeave=document.getElementsByClassName('div1')[5];
myMouseLeave.onmouseleave=function(){
myMouseLeave.style.background="hotpink";
alert('鼠标离开(onmouseleave)');
}
//onmouseout: 鼠标离开
var myMouseOut=document.getElementsByClassName('div1')[6];
myMouseOut.onmouseout=function(){
myMouseOut.style.background="cornflowerblue";
alert('鼠标离开(onmouseout)');
}
//onmouseup: 鼠标按键被松开
var myMouseUp=document.getElementsByClassName('div1')[7];
myMouseUp.onmouseup=function(){
myMouseUp.style.background="tomato";
alert('鼠标按键被松开');
}
//onmousemove: 鼠标移动
var myMouseMove=document.getElementsByClassName('div1')[8];
myMouseMove.onmousemove=function(){
myMouseMove.style.background="orangered";
alert('鼠标移动');
}
//onmousewheel: 鼠标滑轮事件
var myMouseWheel=document.getElementsByClassName('div1')[9];
myMouseWheel.onmousewheel=function(){
myMouseWheel.style.background="plum";
alert('鼠标滑轮事件');
}
}
</script>
body中的代码块
<button class="div1">鼠标单击</button>
<button class="div1">鼠标双击</button>
<button class="div1">鼠标悬浮(onmouseenter)</button>
<button class="div1">鼠标悬浮(onmouseover)</button>
<button class="div1">鼠标按钮被按下</button>
<button class="div1">鼠标离开(onmouseleave)</button>
<button class="div1">鼠标离开(onmouseout)</button>
<button class="div1">鼠标按键被松开</button>
<button class="div1">鼠标移动</button>
<button class="div1">鼠标滑轮事件</button>
键盘事件
keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起
body中的代码块
input id="name" type="text" onkeydown="myKeyDown()" onkeyup="myKeyUp()">
HTML文档的head部分的JavaScript代码
// keydown：按键按下
// keyup：按键抬起
/*输出输入的字符*/
function myKeyDown() {
console.log(document.getElementById('name').value);
}
/*按键结束，字体转换为大写*/
function myKeyUp() {
var text1 = document.getElementById('name').value;
document.getElementById('name').value = text1.toUpperCase();
}
事件对象 Event
JavaScript的Event对象用来描述JavaScript事件，Event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。一旦事件发生，便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的event对象。
Event对象的主要属性和方法、
Event是JavaScript的重要事件，event代表事件的状态，专门负责对事件的处理，其属性和方法能帮助用户完成很多和用户交互的操作。
type：事件的类型，就是HTML标签属性中，没有on前缀之后的字符串，例如Click就代表单击事件。
srcElement：事件源，就是发生事件的元素
button:声明了被按下的鼠标键，是一个整数。0代表没有按键，1代表鼠标左键，2代表鼠标右键，4代表鼠标的中间键，如果按下了多个鼠标键，就把这些值加在一起，所以3就代表左右键同时按下。
clientX/clientY：是指事件发生的时候，鼠标的横纵坐标，返回的是整数，它们的值是相对于包容窗口的左上角生成的。
offsetX/offsetY：鼠标指针相对于源元素位置，可确定单击image对象的哪个像素。
altKey，ctrlKey，shiftKey:指鼠标事件发生时，是否同时按住了Alt，Ctrl或者shift键，返回一个布尔值。
keyCode：返回keydown和keyup事件发生时，按键的代码以及keypress事件的Unicode字符。
//JavaScript代码块
window.onload=function(){
var text1=document.getElementById('txt1');
text1.onkeypress=function(event){
alert(event.keyCode);
}
}
//body中的代码
<input type="text" id="txt1" />
fromElement、toElement:前者是指mouseover事件移动过的文档元素，后者指在mouseout事件中鼠标移动到的文档元素。
表单事件
onsubmit 提交事件
onfocus 获取焦点事件
onblur 失去焦点事件
提交事件例子
<!--JavaScript代码块-->
<script type="text/javascript">
window.onload=function(){
//获取form表单,从而添加提交事件
var form=document.getElementById('form1');
// form.onsubmit=function(){
// //表示通过name获取表单元素的值
// var name=document.form1.text1.value;
// alert(name);
//
// }
document.getElementById('form1').onsubmit=function(){
var name=document.form1.text1.value;
alert(name);
}
}
</script>
<!--body中的代码-->
<body>
<form name="form1" action="" method="post" id="form1">
<input type="text" value="" name="text1" />
<br />
<input type="submit" name="submit_01" value="提交"/>
</form>
</body>
获取焦点和失去焦点例子
<!--JavaScript代码块-->
<script type="text/javascript">
//问题:鼠标离开(失去焦点事件)文本框1的时候,将其文本框值转换为大写
//onblur: 表示的是失去焦点事件
function blur_01(value){
// alert(value);
//函数之间的调用
TextUpperCase(value); //在一个函数中调用另外的一个函数
}
//以下这个函数是用来转换为大写的函数
function TextUpperCase(value){
document.write(value.toUpperCase());
}
function focus_01(color){
// document.getElementById('fname').style.background=color;
var color1=document.getElementById('fname');
color1.style.background=color;
}
</script>
<!--body中的代码-->
<!--blur_01(this.value): this指向的是事件的目标 在这里是第一个input文本框-->
<p>请输入你的英文名字:
<input type="text" id="fname" onfocus="focus_01('skyblue');" onblur="blur_01(this.value)">
</p>
<p>请输入你的年龄:
<input type="text" id="age">
</p>
2018年12月13日17:55:05