JavaScript事件

1.javascript事件流的概念

冒泡型事件：事件从最确定的事件目标到最不确定的事件目标的顺序触发。
捕获型事件：事件从最不确定的对象开始触发到最确定的事件目标。
IE支持冒泡型事件，而DOM标准同时支持两种事件流，捕获型事件先发生。

<meta charset="UTF-8" />
事件测试
<script type="text/javascript">
    var $ = function(id){
        return document.getElementById(id);
    };
    function main() {
        if (document.addEventListener) {
            $('outer').addEventListener('click', function(){
                alert('outer on click');
            }, true);
            $('inner').addEventListener('click', function(){
                alert('inner on click');
            }, true);
        } else {
            $('outer').attachEvent('onclick', function(){
                alert('outer on click');
            });
            $('inner').attachEvent('onclick', function(){
                alert('inner on click');
            });
        }
    }
</script>
<div style="width: 140px; height: 155px; border: 1px solid #e33333;" onclick="alert('outer on click');">
<div style="cursor: pointer; width: 100px; height: 105px; border: 1px solid #323232;" onclick="alert('inner on click');">默认冒泡，IE与Firefox同时支持</div>
</div>
<div id="outer" style="width: 140px; height: 155px; border: 1px solid #e33333;">
<div id="inner" style="cursor: pointer; width: 100px; height: 105px; border: 1px solid #323232;">捕获型事件测试</div>
</div>

Chrome Firefox：

第一个示例，点击inner，依次先提示：”inner on click”, “outer on click”，即：默认为冒泡事件类型
第二个示例，点击inner，依次先提示：”outer on click”, “inner on click”，addEventListener中的第三个参数为useCapture，默认为false，即冒泡事件类型，此示例设置为true，则外围先响应事件（捕获型事件），建议是保持为默认false。

IE：
第一个示例，点击inner，依次先提示：”inner on click”, “outer on click”，默认为冒泡事件类型
第二个示例，点击inner，依次先提示：”inner on click”, “outer on click”，attachEvent也为冒泡事件，先响应最具体的DOM元素，没有useCapture参数

总结：在DOM元素上使用的唯一的onclick事件中，IE与Firefox, Chrome同为冒泡型事件；在动态添加事件监听上面，Firefox和Chrome通过useCapture选项，可更改为捕获型事件。

2.事件处理函数及事件监听

事件处理函数：获得对象引用，将函数赋给对应事件处理属性，此类事件只能绑定唯一一个函数。
如：

var oDiv = document.getElementById("div1");
    oDiv.onchange = function (){
    alert("test");
    }

IE中，每个对象（包含window对象）都支持两个方法：
attachEvent(“name_of_event_handler”,fnHandler);
detachEvent(“name_of_event_handler”,fnHandler);
其中attachEvent中的name_of_event_handler需要添加on参数，如 onclick

Firefox或者Chrome的标准DOM中，支持的是：
addEventListener(“name_of_event”,fnHandler,bCapture);
removeEventListerner(“name_of_event”,fnHandler,bCapture);
其中 addEventListener 的 name_of_event，不需要添加on，直接写：click

<meta charset="UTF-8" />
事件触发
<script type="text/javascript">// <![CDATA[
        function otherHandler() {
            alert("other handler occur");
        }
        function otherHandler2() {
            alert("other2 handler occur");
        }
        function changeEventHandler(){
            var v1 = document.getElementById("v1");
            if (document.addEventListener) {
                v1.addEventListener("click", otherHandler, true);
                v1.addEventListener("click", otherHandler2, true);
            } else {
                v1.attachEvent("onclick", otherHandler);
                v1.attachEvent("onclick", otherHandler2);
            }
        }
        function triggerEvent() {
            var v1 = document.getElementById("v1");
            v1.click();
        }
 
// ]]></script>
<div id="v1" style="width: 140px; height: 55px; border: 1px solid #e33333;">DIV1</div>
<div style="cursor: pointer; width: 100px; height: 45px; border: 1px solid #323232;" onclick="changeEventHandler();">添加DIV1的onclick事件</div>
<input onclick="triggerEvent();" type="button" value="触发事件" />
    

div1的onclick事件添加后，div1被点击，IE和Firefox响应顺序不同
IE：先添加，后执行”other2 handler occur”，后”other handler occur”

Firefox，Chrome：先添加，先执行”other handler occur”，后”other2 handler occur”
在使用时一定要注意时序，遇到过一个弹出浮层框，弹出后在浮层监听事件处理，遇到过这个时序问题。

3.事件对象event
在IE中，事件对象就是window的一个属性window.event

function(){
    var myevent = window.event;
}

而DOM中event是作为第一个参数传递下来的：

function(){
    var oEvent = arguments[0];
}

或者是直接作为第一个参数传递下来：

function(event){
}

<script type="text/javascript">
 
        function changeEventHandler(event,aa){
            alert("事件类型：" + event.type);
            if( !( typeof event.target == 'undefined')){
                // Firefox
                alert("事件源：" + event.target);
            } else{
                // IE
                alert("事件源：" + event.srcElement);
            }
        }

</script>
<div id="v1" style="width: 140px; height: 55px; border: 1px solid #e33333;">DIV1</div>
<div style="cursor: pointer; width: 100px; height: 45px; border: 1px solid #323232;" onclick="changeEventHandler(event,'aa');">改变DIV1的onclick事件</div>

同时，event还有很多参数的，可以在Firebug中看到：



4.事件相似性
IE和DOM：

获取事件类型:oEvent.type;

获取事件代码:oEvent.keyCode;

检测ctrl,shift,alt键:oEvent.shiftKey;oEvent.ctrlKey;oEvent.altKey;

获取客户端坐标:oEvent.clientX;oEvent.clientY;

获取屏幕坐标：oEvent.screenX;oEvent.screenY;

5.事件的区别
(1).获取目标
IE: oEvent.srcElement;
DOM: oEvent.target;
注意 ：
在mouseover和mouseout中，鼠标移动过程中，如果元素包含子元素，会触发元素的mouseout和子元素的mouseover方法，其实这并不是我们想要的结果，我们希望在当前的元素里面，即使是子元素，也不进行任何的mouseout事件操作。

所以在事件触发时，需要对子元素位置进行判断，若为目标元素的子元素，则什么也不做，涉及到如何获取当前元素和子元素的，涉及到了浏览器的判断：
var fromElement = event.fromElement || event.relatedTarget;
var toElement = event.toElement || event.target;

同时需要判断toElement是否为目标元素的子元素或者其本身，具体可以参考如下链接：
mouseover和mouseout多次触发解决方法(兼容ie和firefox)

jQuery判断一个元素是否为另一个元素的子元素或者本身

(2).获取字符代码
IE: oEvent.keyCode;
DOM: String.fromCharCode(oEvent.charCode);

(3).阻止某个事件的行为
IE:oEvent.returnValue = false;
DOM:oEvent.preventDefault();

(4).停止事件冒泡
IE:oEvent.cancelBubble = true;
DOM:oEvent.stopPropagation();

function stopEvent(e) {
    if (!e) {
        e = window.event;
    }
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {//IE
        e.cancelBubble = true;
    }
}

6.事件类型
鼠标事件：click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove
每个鼠标事件都会向event填入以下属性：坐标属性clientX,clientY，type属性，target或者srcElement，shiftKey,ctrlKey,altKey，button属性

键盘事件：keydown,keypress,keyup
每个键盘事件都会向event填入以下属性：keyCode,charCode(Dom),target或者srcElement,
shiftKey,ctrlKey,altKey