事件（Event）知识整理

鼠标事件

鼠标移动到目标元素上的那一刻，首先触发mouseover
之后如果光标继续在元素上移动，则不断触发mousemove
如果按下鼠标上的设备(左键,右键,滚轮……)，则触发mousedown
当设备弹起的时候触发mouseup
目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。)触发scroll
滚动滚轮触发mousewheel，这个要区别于scroll
鼠标移出元素的那一刻，触发mouseout

 

事件注册

现在共有三种事件注册方案。
①DOM0事件注册：通过给元素的属性赋值来绑定事件，注意，这种方案只能绑定有一个处理句柄。
如果绑定两次，则先绑定的句柄会被替代。
例如

//注册事件处理句柄
dom.onclick = function(){
    //TODO
}
//注销事件处理句柄
dom.onclick = null;

这种方式在所有主流浏览器上都可以使用。

但很多时候我们需要注册多个处理句柄到一个事件上，而且还可能要动态的增删某个处理句柄
下面的方案就能解决这个需求。

②DOM2事件注册(IE以外)

target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture);

target ：文档节点、document、window 或 XMLHttpRequest。 
type ：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture ：true->事件捕获阶段处理句柄；false->事件冒泡阶段处理句柄。一般用 false。

例如：

function func(){}
dom.addEventListner("click",func,false);
dom.removeEventListner("click",func,false);

③IE事件注册

target.attachEvent(type, listener);
target.detachEvent(type, listener);
target ：文档节点、document、window 或 XMLHttpRequest。
type ：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
例如：
dom.attachEvent("click",func);
dom.detachEvent("click",func);

两者使用的原理大体相同，可还是有些有差异的地方需要注意

1.对执行的优先级不一样，实例讲解如下：

ele.attachEvent("onclick",method1); 
ele.attachEvent("onclick",method2); 
ele.attachEvent("onclick",method3);
执行顺序为method3->method2->method1

ele.addEventListener("click",method1,false); 
ele.addEventListener("click",method2,false); 
ele.addEventListener("click",method3,false);
执行顺序为method1->method2->method3

2.事件处理句柄的作用域不同
DOM0和DOM2方案的句柄中,this指向的是触发事件的DOM对象
而IE事件注册方案中的this指向的是window
例如：

var scroll = document.getElementById("scroll");
window.id = 10;
function handler() {
    alert(this.id);
}
if (scroll.addEventListener) {
    scroll.addEventListener("click", handler, false);
} else {
    scroll.attachEvent("onclick", handler);
}

结果：

IE --> 10
Chrome -->scroll
FF -->scroll

兼容后的方法

var func = function() { };
//例：addEvent(window,"load",func)
function addEvent(elem, type, fn) {
    if (elem.attachEvent) {
        elem.attachEvent('on' + type, fn);
        return;
    }
    if (elem.addEventListener) {
        elem.addEventListener(type, fn, false);
    }
}

//例：removeEvent(window,"load",func)
function removeEvent(elem, type, fn) {
    if (elem.detachEvent) {
        elem.detachEvent('on' + type, fn);
        return;
    }
    if (elem.removeEventListener) {
        elem.removeEventListener(type, fn, false);
    }
}

获取事件对象和事件源(触发事件的元素)

function eventHandler(e){
    //获取事件对象
    e = e || window.event;//IE和Chrome下是window.event FF下是e
    //获取事件源
    var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target
}

取消事件默认行为(例如点击一个<a>后不跳转页面而是执行一个函数)

function eventHandler(e) {
    e = e || window.event;
    // 防止默认行为
    if (e.preventDefault) {
        e.preventDefault();//IE以外
    } else {
        e.returnValue = false;//IE
        //也可以用return false 两者的区别请看下面的①
    }
}
① 拿我们最常用的<a>举例。我们有时候要点击一个链接，但只是执行一个函数，并且不能跳转。
这时候就要求取消它的默认行为了。 方法有很多种，如果想了解的话请猛点这里
这里只想通过下面的这种方法来体现 e.returnValue=false 与 return false的区别。
<a id="xx" href="" onclick="func(event);">Click</a>
function func(e){
    //TODO
    //return false;//无效,页面仍然会跳转
    e.returnValue = false;
}

阻止事件冒泡

function myParagraphEventHandler(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();//IE以外
    } else {
        e.cancelBubble = true;//IE
    }
}

事件委托
例如，你有一个很多行的大表格，在每个<tr>上绑定点击事件是个非常危险的想法，因为性能是个大问题。流行的做法是使用事件委托。
事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。
事件委托依赖于事件冒泡，如果事件冒泡到table之前被禁用的话，那以下代码就无法工作了。

myTable.onclick = function () {
    e = e || window.event;
    var targetNode = e.target || e.srcElement;

    // 测试如果点击的是TR就触发
    if (targetNode.nodeName.toLowerCase() === 'tr') {
        alert('You clicked a table row!');
    }
}