DOM事件处理程序-事件对象-键盘事件

事件流：

事件流--描述的是从页面中接受事件的顺序

IE ---事件冒泡流：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

Netscape ---事件捕获流：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

使用事件处理程序：

1. HTML事件处理程序

<input type="button" value="按钮" id="btn" onclick="alert('hello')"/>
<input type="button" value="按钮" id="btn" onclick="showMessage()"/>
<script>
    function showMessages(){
        alert('hello world!');
    }
</script>
// HTML事件的缺点：
// HTML和JS代码紧密的耦合在一起

2. DOM0级事件处理程序

　　较传统的方式：把一个函数赋值给一个事件的处理程序属性

　　（用的比较多的方法简单跨浏览器的优势）

<input type="button" value="按钮2" id="btn2"/>
<script>
    var btn2 = document.getElementById('btn2'); // 取btn2按钮对象
    btn2.onclick = function(){
        alert('这是通过DOM0级添加的事件！');
    }
    btn2.onclick = null; // 删除onclick属性
</script>

// 没有HTML事件处理程序的缺点

3. DOM2级事件处理程序

　　DOM2级事件定义了两个方法：

　　　　用于处理指定和删除事件处理程序的操作

　　　　addEventListener()和removeEventListner()。

　　　　接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值

<input type="button" value="按钮3" id="btn3"/>
<script>
    function showMes(){
        alert('hello world !')
    }
    var btn3 = document.getElementById('btn3'); 
    // 可以在一个按钮上添加多个事件
    btn3.addEventListener('click',showMes,false);
    btn3.addEventListener('click',function(){
        alert(this.value);
    },false);
    // 删除事件
    // btn3.removeEventListener('click',showMes,false);
</script>

4. IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

　　接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

　　（不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡！）

<input type="button" value="按钮3" id="btn3" />
<script>
    function showMes(){
        alert('hello world !');
    }
    var btn3 = document.getElementById('btn3'); 
    btn3.attachEvent('onclick',showMes);
    btn3.detachEvent('onclick',showMes);
</script>

5. 跨浏览器的事件处理程序

<input type="button" value="按钮3" id="btn3" />
<script type="text/javascript">
function showMes(){
    alert("hello world!");
}
// 跨浏览事件处理程序
var eventUtil = {
    // 添加句柄 怎么给元素添加事件
    addHandler:function(element,type,handler){
        if(element.addEventListener){     // 判断的是DOM2级
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){     // IE事件处理程序判断
            element.attachEvent("on" + type,handler);
        }else{     // DOM0级处理程序判断
            element["on" + type] = handler;
        }
    },
    // 删除句柄 怎么给元素删除事件
      removeHandler:function(element,type,handler){
        if(element.removeEventListener){     // 判断的是DOM2级
            element.removeEventListener(type,handler,false);
        }else if(element.tetachEvent){     // IE事件处理程序判断
            element.tetachEvent("on" + type,handler);
        }else{     // DOM0级处理程序判断
            element["on" + type] = null;
        }
    }
}
eventUtil.addHandler(btn3,'click',showMes);
eventUtil.removeHandler(btn3,'click',showMes);
</script>

事件对象：

什么是事件对象？在触发DOM上的事件时都会产生一个对象

事件对象event

1. DOM中的事件对象

　　1）type属性用于获取事件类型

　　2）target属性用于获取事件目标

　　3）stopPropagation()方法用于阻止事件冒泡

　　4）preventDefault()方法阻止事件的默认行为

function showMes(event){
    alert(event.type);  // click
}
function showMes(event){
    alert(event.target);  // 这个事件加在什么目标上（那个元素的）
    alert(event.target.nodeName);  // 目标节点名称
}

2. IE中的事件对象

　　1）type属性用于获取事件类型

　　2）srcElement属性用于获取事件的目标

　　3）cancelBubble属性用于阻止事件冒泡

　　　　　　设置为true表示阻止冒泡　　　　设置false表示不阻止冒泡

　　4）returnValue属性用于阻止事件的默认行为

　　　　　　设置为true表示阻止事件的默认行为

function showMes(event){
    event = event || window.event;     // IE8以前的浏览器需要用window.event
    var ele = event.target || event.srcElement;
    alert(ele);
}

// 跨浏览事件处理程序
var eventUtil = {
    // 怎么获取兼容两个浏览器的事件对象
    getEvent:function(event){
        return event?event:window.event;
    },
    // 怎么获取事件的类型
    getType:function(event){
        return event.type;
    },
    // 怎么获取事件来自于哪个元素
    getElement:function(event){
        return event.target || event.srcElement;
    },
    // 怎么阻止取消事件的默认行为
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    // 怎么阻止事件冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){  // 以属性的方式来判断
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
}

键盘事件：

keyDown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件

keyPress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件

keyUp：当用户释放键盘上的键时触发

event对象上的keyCoden属性用于得到键盘对应键的键码值

console.log(event.keyCode); // 打印keyCode属性