一.事件机制
事件的种类
事件的添加和删除
IE低版本浏览器兼容问题
1.事件的种类
1)普通事件
onclick 鼠标单击触发
ondbclick 鼠标双击触发
onmouseup 鼠标抬起触发
onmousedown 鼠标按下触发
onmouseever鼠标移动到元素上触发
onmouseout 鼠标离开元素触发
onmousemove 鼠标在元素上移动时触发
onkeydown 键盘按下触发
onkeyup 键盘抬起触发
onkeypress 键盘按键按下的时候触发
keydown与keypress的区别：
当所有按键按下时，都会触发keydown;
只有字符键、数字键和符号键被按下时，才能触发keypress。
当按键为功能键、方向键只能触发keydown，不触发keypress。
2)表单相关事件
onfocus 元素获取焦点触发
onblur 元素失去焦点触发
onchange 元素失去焦点且内容变化时触发
常用(改变下拉列表的选项)
oninput 文本框输入时触发
onpropertychange ie专属， oninput一样
onsubmit 表单提交时触发
onreset 表单重置时触发
3)页面相关事件
onload 页面内容加载完毕时触发
onscroll 页面滚动的时候触发
onresize
Window的事件，当浏览器窗口发生变化时触发
oncontextmenu 当右键弹出上下文菜单时触发
改变浏览器大小，宽度大于600像素则背景色为红色，小于600像素背景色为蓝色
网页文档的跟标签:
document.documentElement
获取浏览器宽度:
document.documentElement.offsetWidths
2.事件绑定
1)以前的事件绑定
div.onclick = function(){
console.log("事件1");
}
div.onclick = function(){
console.log("事件2");
}
如果想要两个事件都触发，只能将两个事件的代码封装到各自的函数中，在一个事件中调用
结构:
<div>
js
为div添加两个单击事件，测试单击时会触发哪个？
实现两个事件都触发，当单机div时，输出'事件1'
'事件2'
2)
如果我希望多个事件都能触发，怎么办？
新的事件绑定方式：
添加监听事件
语法:
事件源.addEventlistener(事件名，事件处理函数，触发事件的方式);
var div=document.getElementById('d1');
div.addEventlistener('click',fun,true/false);
参数说明:
事件:(必须)
onclick --> click
oninput --> input
使用引号包裹起来
fun:(必须)
事件处理函数
参数3:(可选)
规定以说明方式触发事件，事件句柄是在冒泡阶段执行还是在捕获阶段执行
false是在冒泡阶段执行，
true是在捕获阶段执行，
默认是false
注意:IE5-IE9不支持
案例:(03.事件监听.html)
使用事件监听方式实现02的功能实现
3)IE低版本的事件监听
语法：
div.attachEvent('事件名'，事件处理函数);
如:
div.attachEvent('onclick',fun);
attach 绑
detach 解绑
event 事件
参数1: 事件名，使用引号包裹，'onclick'
参数2: 事件处理程序
点击一个按钮，在控制台输出:
'IE的第一个事件'
'IE的第二个事件'
测试在不同的浏览器的支持情况
4）添加兼容标准浏览器和IE低版本浏览器的监听
/*
ele:事件源
event:事件名
fun:事件处理函数
ft:事件触发的方式(true/false)
*/
function addEvent(ele,event,fun,ft){
//标准浏览器会输出undefined
//判断是否是IE低版本浏览器
if(ele.attachEvent){
ele.attachEvent('on'+event,fun);
}else{
ele.addEventlistener(event,fun,ft);
}
}
addEvent(btn,'click',fun,false);
用所有浏览器兼容的方式实现04案例的功能，并测试。
5)删除事件监听
DOM0级
事件源.on事件类型=null;
如:div.onclick = null;
DOM2级别(标准浏览器)
事件源.removeEventListener('事件类型',事件处理函数，true/false);
注意:通过addEventListener添加的监听，只能通过removeEventListener删除，删除时传入的参数与添加时传入的参数一样。
IE低版本浏览器
事件源.detachEvent('on事件类型'，事件处理函数);
注意:解绑时的事件源、事件类型和事件处理函数需要和绑定时相同。
兼容IE和标准浏览器的实现
function removeEvent(ele,event,fun,ft){
if(ele,detachEven){
ele.detackEvent('on'+event,fun);
}else{
ele.removeEventListener(event,fun,ft);
}
}
注意:如果使用匿名函数作为事件处理函数，则这个事件无法删除
如:下面
div.addEventListener('click',function(){
alert(123);
},false);
为按钮添加两个单击事件，再删除第二个单击事件
单击按钮后查看控制台的输出信息
添加监听和移除监听需要考虑浏览器的兼容性