JavaScript 事件操作

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

DOM0级和DOM2级事件处理程序