Microsoft模型：给element绑定click事件
- element.attachEvent('onclick',doSomething);
W3C模型：给element绑定click事件
- element.addEventListener('click',doSomething,false);
W3C模型的关键是addEventListener()方法。它有3个参数: the event type, the function to be executed and a boolean (true or false) .
这个模型的优势在于，我们可以添加任意数量的event listener到某个元素。
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
当element被点击时，绑定到element上的2个函数都会执行。但是w3c模型没有说明哪一个event handler会先执行，所以你不能假设startDragDrop()在spyOnUser()之前执行.
移除 event handler可以使用 removeEventListener() 方法.
element.removeEventListener('click',spyOnUser,false)
W3C model支持匿名方法:
- element.addEventListener('click',function () {
- this.style.backgroundColor = '#cc0000'
- },false)
javascript事件绑定完整例子
- <html>
- <head>
- <title>javascript事件绑定-支持chrome，ie，ff等</title>
- </head>
- <body>
- <input type="button" id="mybtn" value="javascript事件绑定" />
- <script type="text/javascript">
- //得到id="mybtn"的元素
- var element = document.getElementById("mybtn");
- if(window.ActiveXObject){//Microsoft IE浏览器
- //Microsoft模型：给element绑定click事件
- element.attachEvent('onclick',doSomething);
- }else{//标准浏览器
- //W3C模型：给element绑定click事件
- element.addEventListener('click',doSomething,false);
- }
- //自定义的事件处理函数，当事件触发时执行
- function doSomething(){
- alert(mybtn.value);
- }
- </script>
- </body>
- </html>
阅读(2925) | 评论(1) | 转发(0) |
