js事件--基础

1、事件注册

平常我们绑定事件的时候用dom.onxxxx=function(){}的形式。

这种方式是给元素的onxxxx属性赋值，只能绑定有一个处理句柄。但很多时候我们需要绑定多个处理句柄到一个事件上，而且还可能要动态的增删某个处理句柄。

下面的事件注册方式就能解决这个需求。

1 // IE以外的其他浏览器
2 // target ：文档节点、document、window 或 XMLHttpRequest。 
3 // type ：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
4 // listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
5 // useCapture ：是否使用捕捉，一般用 false,事件触发时，会将一个 Event 对象传递给事件处理程序。
6 
7 target.addEventListener(type,listener,useCapture);//添加
8 target.removeEventListener(type,listener,useCapture);//删除

1 // IE浏览器
2 // target ：文档节点、document、window 或 XMLHttpRequest。 
3 // type ：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。 
4 // listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
5 
6 target.attachEvent(type, listener);//添加
7 target.detachEvent(type, listener);// 移除

attachEvent和addEventListener 两者使用的原理相同，可对执行的优先级不一样，实例讲解如下：

1 ele.attachEvent("onclick",method1); 
2 ele.attachEvent("onclick",method2); 
3 ele.attachEvent("onclick",method3); 
4 //attachEvent 执行顺序为method3->method2->method1 
5 
6 ele.addEventListener("click",method1,false); 
7 ele.addEventListener("click",method2,false); 
8 ele.addEventListener("click",method3,false); 
9 //addEventListener 执行顺序为method1->method2->method3

兼容后的为某一事件附加其它的处理事件

兼容后的方法 
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); 
    } 
}

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

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

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

 1 function eventHandler(e) { 
 2     e = e || window.event; 
 3     // 防止默认行为 
 4     if (e.preventDefault) { 
 5         e.preventDefault();//IE以外 
 6     } else { 
 7         e.returnValue = false;//IE 
 8         //注意：这个地方是无法用return false代替的 
 9         //return false只能取消元素
10     }
11 }

4、阻止事件冒泡

1 function myParagraphEventHandler(e) { 
2     e = e || window.event; 
3     if (e.stopPropagation) { 
4         e.stopPropagation();//IE以外 
5     } else { 
6         e.cancelBubble = true;//IE 
7     } 
8 }

5、事件委托

例如，你有一个很多行的大表格，在每个<tr>上绑定点击事件是个非常危险的想法，因为性能是个大问题。流行的做法是使用事件委托。

事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。
事件委托依赖于事件冒泡，如果事件冒泡到table之前被禁用的话，那以下代码就无法工作了。

1 myTable.onclick = function () { 
2     e = e || window.event; 
3     var targetNode = e.target || e.srcElement; 
4     // 测试如果点击的是TR就触发 
5     if (targetNode.nodeName.toLowerCase() === 'tr') { 
6         alert('You clicked a table row!'); 
7     } 
8 }

6、事件函数的解除绑定

和事件的绑定其实是相对应的，如果需要接触事件的绑定，运行对应的函数就可以了。如果是原生JS绑定则对应运行removeEventListener()和detachEvent()。

如果是jQuery的bind()和delegate()绑定，也是存在对应的解绑函数用以清除注册事件，比如unbind()和undelegate()。

看一个代码示例：

 1 var EventUtil = { 
 2     //注册 
 3     addHandler: function(element, type, handler){ 
 4         if (element.addEventListener){ 
 5             element.addEventListener(type, handler, false); 
 6         } else if (element.attachEvent){ 
 7             element.attachEvent("on" + type, handler); 
 8         } else { 
 9             element["on" + type] = handler; 
10         } 
11     }, 
12     //移除注册 
13     removeHandler: function(element, type, handler){ 
14         if (element.removeEventListener){ 
15             element.removeEventListener(type, handler, false); 
16         } else if (element.detachEvent){ 
17             element.detachEvent("on" + type, handler); 
18         } else { 
19             element["on" + type] = null; 
20         } 
21     }              
22 };

猜你喜欢