事件（event)是javascript应用跳动的心脏，进行交互，使网页动起来
事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键
事件还可能是web网页加载完成，用户滑动窗口，改变窗口大小
通过js可以监听特定事件的发生，并规定让某些事件发生，以对这些事件作出响应
对用户行为或者页面自身行为的一种监听
当某种行为触发之后，会调用指定的函数执行
事件一般要配合函数使用！！通过事件驱动函数的执行
作用：
1.验证用户输入的数据
2.增加页面的动感效果
元素与元素之间的交互，用户与页面之间的交互，前段与后端的交互
事件流：
分两个阶段：捕获阶段和冒泡阶段（IE)提出
捕获：先由不具体的元素接收事件，最具体的节点最后才能接收到事件
冒泡：先从具体的接收元素，然后逐步向上传播不具体的元素
事件名称：click 点击 ， mousemove 鼠标移动 ， load 加载
onload 加载事件 onclick 点击事件的处理函数
事件三种方式DOM事件级别：3级
1.行内事件HTML事件：就是将事件处理函数作为html的属性来使用；耦合度高
不属于DOM事件级中的任意一种
1）<input type="button" value="按钮" onclick="alert(js行内事件');"/>
2）<input type="button" value="按钮" onclick="showMsg();"/>
js-->function showMsg () {
alert('js行内事件2');
}
如果方法名改变，那么就改两处，方法名和引用位置都要改,不方便!!!
2.DOM0级事件处理--解耦
步骤：
(1)先获取需要绑定事件的元素对象
(2)给该元素对象绑定事件
缺点：DOM0级事件，不能给同一个元素对象绑定同类型的事件，
因为后面的事件覆盖前面的事件处理函数
取消事件：onclick=null ;把时间置为空
<input type="button" value="按钮" id="btn"/>
js-->var inputs = document.getElementById("btn");
inputs.onclick = function () { \也可以使用链式操作
//func回调函数，也叫监听函数
alert("你好");
}
3.DOM2事件：才分捕获和冒泡，D0没有
获取元素，绑定事件 addEventListener listen听 listener监听
传入三个参数：addEventListener(事件名称，事件处理方法，是否冒泡）
用DOM2级事件，不需要加on 如onclick——>click
可以绑定多个事件，之间不会覆盖
缺点：兼容问题（跟IE有关！！)
取消事件：removeEventlistener('事件名称字符串'，事件处理方法，是否冒泡）
4.DOM3级事件
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
IE兼容DOM2
1.IE8以及以下不支持 addEventListener,removeEventListener
那么要使用[两个参数，不需要指定是否冒泡]
attachEvent(事件名[带on的事件名],处理方法
detachEvent(事件名[带on的事件名],处理方法）
2.在IE9,IE10中同时支持这两种方式
3.在IE11 只支持addEventListener,removeEventListener
封装事件：让元素对象同时支持现代浏览器和IE8以及以下的浏览器
抓住两者不同点
如果window.addEventListener 存在就用他绑定
如果不存在用attachEvent
/** 文档注释
* @func: 兼容各个浏览器的DOM2事件
* @param: {obj} 要被绑定事件的对象
* @param: {eventType} 事件类型
* @param: {fn} 事件处理的方法
function bindEvent(obj,eventType,fn){ //fn方法名，fn()调用
if(window.addEventListener){
obj.addEventListener(eventType,fn,false)
}else{
obj.attachEvent('on'+eventType,fn)
}
事件冒泡：
false:代表在冒泡阶段执行
('click',fn1,false)
true:代表在捕获阶段执行
('click',fn1,true)
在函数里面阻止冒泡
1.第一步在函数里面定义一个形参event
2.调用方法 event.stopPropagation();stop泡
function fn1(event){
event.stopPropagation();//阻止冒泡!!!
alert('我是目标事件!');
}
事件捕获：由父到子的传递过程
事件捕获和事件冒泡：
捕获阶段
document.body.addEventListener('click',function(){
alert('我是body,紧随document触发'）;
document.body.style.background='red';
},true);
冒泡阶段
document.body.addEventListener('click',function(){
alert('----');
document.body.style.background='';
},false};
写在一起时，最终背景无颜色变化，应注释冒泡阶段代码
计算器：
1.加法
sum.onclick=function(){
var v1=Number(num1.value); //默认得到就是字符串类型
var v2=Number(num2.value);
result.value=v1+v2;
}
2.加减乘除运算
result.value = eval(num1.value) 把一段字符串解析成js代码
3.退格
num.value=num.value.slice(0,num.value.length-1);
鼠标事件
onclick: 鼠标单击事件 使用率90%
ondblclick: 鼠标双击事件
onmousedown: 鼠标上的按钮被按下时
onmouseup: 鼠标按下后，松开时激发的事件
d.onmousedown = function () {
console.log('鼠标被按下!!');
};
onmouseover: 当鼠标移动入到某对象范围的上方时触发的事件 over超过，上方
onmousemove: 鼠标移动时触发的事件
onmouseout: 当鼠标移出离开某对象范围时触发的事件
把大问题分成小问题，去解决
鼠标控制键盘hover特效：
event.target 指向当前的事件元素 event.target==M true
var array = document.getElementsByClassName('btn');
obj.onmouseover = function (event) {
event.target.style.color = 'red';
obj.onmouseout = function () {
键盘事件：
onkeypress: 当键盘上的某个键被按下并释放时触发事件
贪吃蛇：没反应
onkeydown: 当键盘上某个按键被按下时触发的事件，cl会一在直打印
onkeyup: 当键盘上某个按键被放开时触发的事件，按键松开时，cl打印
贪吃蛇用此事件
注意：页面内必须有被聚焦的对象
event.keyCode 返回键盘码
document.onkeypress = function(){
键盘控制运动
var div = document.getElementById('div');
document.onkeyup = function (event) {
var code = event.keyCode;
if (code == 38) {
//往左走
div.style.top = (div.offsetTop-100)<0?0:div.offsetTop-100 +'px';
} else if (code == 40) {
div.style.top = div.offsetTop+100 +'px';
} else if (code == 37) {
div.style.left = (div.offsetLeft-100)<0?0:div.offsetLeft-100 +'px';
} else if (code == 39) {
div.style.left = div.offsetLeft+100 +'px';
}
};
document.onmousemove=function(e){
mov.style.left= e.pageX+'px';
}
mov.style.left= e.pageX+'px';
}
全局鼠标移动，放大镜跟着移动
Event对象
1.跟特定事件相关，且包含该事件的属性和方法的对象
2.可以传递给事件处理程序
3.通过传入的参数，在函数内部可以访问到所有的方法和属性
兼容性：IE8 以及以下不传入event对象
用window.event 做兼容
btn.onclick = function(event){
event=event || window.event //使用‘或’进行兼容
Event对象：事件方法
1.stopPropagation: 阻止冒泡，就是在子元素上触发事件，不会触发父元素的事件
兼容性：IE8及以下，用cancelBubble代替stopPropagation
用法：event.cancelBubble = true;
2.preventDefault: 阻止浏览器默认行为！！！如：a标签跳转或者表单提交
兼容性：IE9及以下，用returnValue属性为false来实现
用法：event.returnValue=false;
实例封装
1.阻止冒泡
child.onclick = function (event) {
event = event || window.event;//使用或进行兼容
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
2.阻止默认行为
a.onclick = function (event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
Event对象属性：4块
1.type: 返回事件类型，如click
2.target: 返回事件触发的目标元素
兼容性：IE8及以下用 srcElement
btn.onclick = function (e) {
e = e || window.event;//取IE的event对象
var ele = e.target || e.srcElement;//取出元素,兼容IE8 srcElement
console.log(e.type); //click
console.log(ele); //<button id="btn">事件属性</button>
3.鼠标事件属性
screenX: 当前鼠标点距离屏幕左上角的水平距离
screenY: 当前鼠标点距离屏幕左上角的垂直距离
clientX: 当前鼠标点距离浏览器左上角的水平距离
clientY: 当前鼠标点距离浏览器左上角的垂直距离
pageX: 当前鼠标点距离页面(document/body)左上角的水平距离
pageY: 当前鼠标点距离页面(document/body)左上角的垂直距离
button: 获取鼠标 点击那个键 ;非IE浏览器中0为鼠标左键，1为鼠标中键，2为鼠标右键
which: 返回Unicode码
4> 键盘事件属性:
keycode : 返回键盘码
ctrlKey: 是否按下ctrl键,如果按了,返回true,否则返回false
shiftKey: 是否按下shift键,如果按了,返回true,否则返回false
altKey: 是否按下alt键,如果按了,返回true,否则返回false
文档事件
onload: 当页面加载完成后，触发！！在整个页面加载完后触发
onresize: 当浏览器窗口大小被改变时，触发！
onscroll: 当页面滚动的时候触发
onbeforeunload: 当页面关闭或者刷新的时候触发
需要配合return来使用。用event.returnValue="提示信息"解决兼容性
老的浏览器会把return之后的值返回，但是部分新浏览器只能使用默认的提示框
window.onscroll = function () {
console.log('文档滚动了!!!');
window.onbeforeunload = function (event) {
event.returnValue = '你要离我而去吗?!';
返回顶部
document.body.scrollTop可以获取页面滚动的高度，同时可以赋值，更改滚动的高度
表单事件:
onfocus：当某个元素获得焦点时触发的事件
onblur：当前元素失去焦点时触发的事件
onchange：当前元素失去焦点并且元素的内容发生改变而触发的事件
onreset：当表单中reset的属性被激发时触发的事件
onsubmit：一个表单被提交时触发的事件
我们可以的通过form表单的name属性,获取整个表单!!!，action="#"提交到本地，submit才有效果
事件（event)是javascript应用跳动的心脏，进行交互，使网页动起来
事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键
事件还可能是web网页加载完成，用户滑动窗口，改变窗口大小
通过js可以监听特定事件的发生，并规定让某些事件发生，以对这些事件作出响应
对用户行为或者页面自身行为的一种监听
当某种行为触发之后，会调用指定的函数执行
事件一般要配合函数使用！！通过事件驱动函数的执行
作用：
1.验证用户输入的数据
2.增加页面的动感效果
元素与元素之间的交互，用户与页面之间的交互，前段与后端的交互
事件流：
分两个阶段：捕获阶段和冒泡阶段（IE)提出
捕获：先由不具体的元素接收事件，最具体的节点最后才能接收到事件
冒泡：先从具体的接收元素，然后逐步向上传播不具体的元素
事件名称：click 点击 ， mousemove 鼠标移动 ， load 加载
onload 加载事件 onclick 点击事件的处理函数
事件三种方式DOM事件级别：3级
1.行内事件HTML事件：就是将事件处理函数作为html的属性来使用；耦合度高
不属于DOM事件级中的任意一种
1）<input type="button" value="按钮" onclick="alert(js行内事件');"/>
2）<input type="button" value="按钮" onclick="showMsg();"/>
js-->function showMsg () {
alert('js行内事件2');
}
如果方法名改变，那么就改两处，方法名和引用位置都要改,不方便!!!
2.DOM0级事件处理--解耦
步骤：
(1)先获取需要绑定事件的元素对象
(2)给该元素对象绑定事件
缺点：DOM0级事件，不能给同一个元素对象绑定同类型的事件，
因为后面的事件覆盖前面的事件处理函数
取消事件：onclick=null ;把时间置为空
<input type="button" value="按钮" id="btn"/>
js-->var inputs = document.getElementById("btn");
inputs.onclick = function () { \也可以使用链式操作
//func回调函数，也叫监听函数
alert("你好");
}
3.DOM2事件：才分捕获和冒泡，D0没有
获取元素，绑定事件 addEventListener listen听 listener监听
传入三个参数：addEventListener(事件名称，事件处理方法，是否冒泡）
用DOM2级事件，不需要加on 如onclick——>click
可以绑定多个事件，之间不会覆盖
缺点：兼容问题（跟IE有关！！)
取消事件：removeEventlistener('事件名称字符串'，事件处理方法，是否冒泡）
4.DOM3级事件
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
IE兼容DOM2
1.IE8以及以下不支持 addEventListener,removeEventListener
那么要使用[两个参数，不需要指定是否冒泡]
attachEvent(事件名[带on的事件名],处理方法
detachEvent(事件名[带on的事件名],处理方法）
2.在IE9,IE10中同时支持这两种方式
3.在IE11 只支持addEventListener,removeEventListener
封装事件：让元素对象同时支持现代浏览器和IE8以及以下的浏览器
抓住两者不同点
如果window.addEventListener 存在就用他绑定
如果不存在用attachEvent
/** 文档注释
* @func: 兼容各个浏览器的DOM2事件
* @param: {obj} 要被绑定事件的对象
* @param: {eventType} 事件类型
* @param: {fn} 事件处理的方法
function bindEvent(obj,eventType,fn){ //fn方法名，fn()调用
if(window.addEventListener){
obj.addEventListener(eventType,fn,false)
}else{
obj.attachEvent('on'+eventType,fn)
}
事件冒泡：
false:代表在冒泡阶段执行
('click',fn1,false)
true:代表在捕获阶段执行
('click',fn1,true)
在函数里面阻止冒泡
1.第一步在函数里面定义一个形参event
2.调用方法 event.stopPropagation();stop泡
function fn1(event){
event.stopPropagation();//阻止冒泡!!!
alert('我是目标事件!');
}
事件捕获：由父到子的传递过程
事件捕获和事件冒泡：
捕获阶段
document.body.addEventListener('click',function(){
alert('我是body,紧随document触发'）;
document.body.style.background='red';
},true);
冒泡阶段
document.body.addEventListener('click',function(){
alert('----');
document.body.style.background='';
},false};
写在一起时，最终背景无颜色变化，应注释冒泡阶段代码
计算器：
1.加法
sum.onclick=function(){
var v1=Number(num1.value); //默认得到就是字符串类型
var v2=Number(num2.value);
result.value=v1+v2;
}
2.加减乘除运算
result.value = eval(num1.value) 把一段字符串解析成js代码
3.退格
num.value=num.value.slice(0,num.value.length-1);
鼠标事件
onclick: 鼠标单击事件 使用率90%
ondblclick: 鼠标双击事件
onmousedown: 鼠标上的按钮被按下时
onmouseup: 鼠标按下后，松开时激发的事件
d.onmousedown = function () {
console.log('鼠标被按下!!');
};
onmouseover: 当鼠标移动入到某对象范围的上方时触发的事件 over超过，上方
onmousemove: 鼠标移动时触发的事件
onmouseout: 当鼠标移出离开某对象范围时触发的事件
把大问题分成小问题，去解决
鼠标控制键盘hover特效：
event.target 指向当前的事件元素 event.target==M true
var array = document.getElementsByClassName('btn');
obj.onmouseover = function (event) {
event.target.style.color = 'red';
obj.onmouseout = function () {
键盘事件：
onkeypress: 当键盘上的某个键被按下并释放时触发事件
贪吃蛇：没反应
onkeydown: 当键盘上某个按键被按下时触发的事件，cl会一在直打印
onkeyup: 当键盘上某个按键被放开时触发的事件，按键松开时，cl打印
贪吃蛇用此事件
注意：页面内必须有被聚焦的对象
event.keyCode 返回键盘码
document.onkeypress = function(){
键盘控制运动
var div = document.getElementById('div');
document.onkeyup = function (event) {
var code = event.keyCode;
if (code == 38) {
//往左走
div.style.top = (div.offsetTop-100)<0?0:div.offsetTop-100 +'px';
} else if (code == 40) {
div.style.top = div.offsetTop+100 +'px';
} else if (code == 37) {
div.style.left = (div.offsetLeft-100)<0?0:div.offsetLeft-100 +'px';
} else if (code == 39) {
div.style.left = div.offsetLeft+100 +'px';
}
};
document.onmousemove=function(e){
mov.style.left= e.pageX+'px';
}
mov.style.left= e.pageX+'px';
}
全局鼠标移动，放大镜跟着移动
Event对象
1.跟特定事件相关，且包含该事件的属性和方法的对象
2.可以传递给事件处理程序
3.通过传入的参数，在函数内部可以访问到所有的方法和属性
兼容性：IE8 以及以下不传入event对象
用window.event 做兼容
btn.onclick = function(event){
event=event || window.event //使用‘或’进行兼容
Event对象：事件方法
1.stopPropagation: 阻止冒泡，就是在子元素上触发事件，不会触发父元素的事件
兼容性：IE8及以下，用cancelBubble代替stopPropagation
用法：event.cancelBubble = true;
2.preventDefault: 阻止浏览器默认行为！！！如：a标签跳转或者表单提交
兼容性：IE9及以下，用returnValue属性为false来实现
用法：event.returnValue=false;
实例封装
1.阻止冒泡
child.onclick = function (event) {
event = event || window.event;//使用或进行兼容
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
2.阻止默认行为
a.onclick = function (event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
Event对象属性：4块
1.type: 返回事件类型，如click
2.target: 返回事件触发的目标元素
兼容性：IE8及以下用 srcElement
btn.onclick = function (e) {
e = e || window.event;//取IE的event对象
var ele = e.target || e.srcElement;//取出元素,兼容IE8 srcElement
console.log(e.type); //click
console.log(ele); //<button id="btn">事件属性</button>
3.鼠标事件属性
screenX: 当前鼠标点距离屏幕左上角的水平距离
screenY: 当前鼠标点距离屏幕左上角的垂直距离
clientX: 当前鼠标点距离浏览器左上角的水平距离
clientY: 当前鼠标点距离浏览器左上角的垂直距离
pageX: 当前鼠标点距离页面(document/body)左上角的水平距离
pageY: 当前鼠标点距离页面(document/body)左上角的垂直距离
button: 获取鼠标 点击那个键 ;非IE浏览器中0为鼠标左键，1为鼠标中键，2为鼠标右键
which: 返回Unicode码
4> 键盘事件属性:
keycode : 返回键盘码
ctrlKey: 是否按下ctrl键,如果按了,返回true,否则返回false
shiftKey: 是否按下shift键,如果按了,返回true,否则返回false
altKey: 是否按下alt键,如果按了,返回true,否则返回false
文档事件
onload: 当页面加载完成后，触发！！在整个页面加载完后触发
onresize: 当浏览器窗口大小被改变时，触发！
onscroll: 当页面滚动的时候触发
onbeforeunload: 当页面关闭或者刷新的时候触发
需要配合return来使用。用event.returnValue="提示信息"解决兼容性
老的浏览器会把return之后的值返回，但是部分新浏览器只能使用默认的提示框
window.onscroll = function () {
console.log('文档滚动了!!!');
window.onbeforeunload = function (event) {
event.returnValue = '你要离我而去吗?!';
返回顶部
document.body.scrollTop可以获取页面滚动的高度，同时可以赋值，更改滚动的高度
表单事件:
onfocus：当某个元素获得焦点时触发的事件
onblur：当前元素失去焦点时触发的事件
onchange：当前元素失去焦点并且元素的内容发生改变而触发的事件
onreset：当表单中reset的属性被激发时触发的事件
onsubmit：一个表单被提交时触发的事件
我们可以的通过form表单的name属性,获取整个表单!!!，action="#"提交到本地，submit才有效果