1.事件绑定
1.DOM0级事件处理程序：
// 行内绑定
<h1 id="myBtn" onclick="alert(11)'">点击文本!</h1>
// js 绑定
document.getElementById("myBtn").onclick=function(){alert(22)};
2.DOM2级事件处理程序
// 非IE
document.getElementById("myBtn"). addEventListener("click",function(){alert(33)},false);
// IE
document.getElementById("myBtn"). attachEvent("click",function(){alert(33)});
DOM0级给同一元素绑定多个相同的事件后面的会覆盖前面的，
DOM2级可以给同一元素绑定多个相同的事件。
2.取消绑定
1.取消DOM0级事件处理程序
document.getElementById("myBtn").onclick=null
2.取消DOM2级事件处理程序
// 非IE
document.getElementById("myBtn"). removeEventListener("click",function(){alert(44)},false);
// IE
document.getElementById("myBtn"). detachEvent("click",function(){alert(33)});
3.事件对象
1557215991179.jpg
Event对象的一些兼容性写法：
1.获得event对象兼容性写法
event || (event = window.event);
2.获得target兼容型写法
event.target||event.srcElement
3.阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
4.阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
4.事件捕获与事件冒泡
事件流：是指从页面接收事件的顺序，不同浏览器团队在事件的处理上提出了相反的概念。
事件捕获：IE 由外向内，先父后子，从body开始；
事件冒泡：网景 由内向外，先子后父，从元素开始；
事件流分的三个阶段：事件捕获-- 目标阶段--事件冒泡
141533286861687.png
5.阻止事件冒泡
XXX.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
6.阻止浏览器的默认行为
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
7.阻止浏览器的右键菜单
document.oncontextmenu = function(){
return false;
}
8.获取键盘事件的keyCode
function getKeyCode(e){
//兼容IE和Firefox获得keyBoardEvent对象
e = e ? e : (window.event ? window.event : "")
//兼容IE和Firefox获得keyBoardEvent对象的键值
return e.keyCode ? e.keyCode : e.which;
}
//IE：e.keyCode
//fireFox: e.which
