JavaScript事件绑定

本文介绍一些JavaScript事件绑定的常用方法及其优缺点，同时在最后展示一个由 Dean Edwards 写的一个比较完美的事件绑定方案。

传统方式

    element.onclick = function(e){
        // ...
    };

传统绑定的优点
- 非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
- 处理事件时，this关键字引用的是当前元素，这很有帮组
传统绑定的缺点
- 传统方法只会在事件冒泡中运行，而非捕获和冒泡
- 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
- 事件对象参数(e)仅非IE浏览器可用

W3C方式

    element.addEventListener('click', function(e){
        // ...
    }, false);

W3C绑定的优点
- 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
- 在事件处理函数内部，this关键字引用当前元素。
- 事件对象总是可以通过处理函数的第一个参数(e)捕获。
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
W3C绑定的缺点

IE不支持，你必须使用IE的attachEvent函数替代。

IE方式

    element.attachEvent('onclick', function(){
        // ...
    });

IE方式的优点
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。
IE方式的缺点

IE仅支持事件捕获的冒泡阶段
事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
事件对象仅存在与window.event参数中
事件必须以ontype的形式命名，比如，onclick而非click
仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

Dean Edwards的方案（addEvent/removeEvent库）

   function addEvent(elementment, type, handler) {
    
        // 为每个事件处理函数赋予一个独立的ID
        if(!handler.$$guid) handler.$$guid = addEvent.guid++;
    
        // 为元素建立一个事件类型的散列表
        if(!elementment.events) elementment.events = {};
    
        // 为每对元素/事件建立一个事件处理函数的散列表
        var handlers = elementment.events[type];
    
        if(!handlers) {
            handlers = elementment.events[type] = {};
            // 存储已有的事件处理函数(如果已存在一个)
            if(elementment["on" + type]) {
                handlers[0] = elementment["on" + type];
            }
        }
    
        // 在散列表中存储该事件函数
        handlers[handler.$$guid] = handler;
    
        // 赋予一个全局事件处理函数来出来所有工作
        elementment["on" + type] = handleEvent;
    }
    
    // 创建独立ID的计数器
    addEvent.guid = 1;
    
    function removeEvent(elementment, type, handler) {
        // 从散列表中删除事件处理函数
        if(elementment.events && elementment.events[type]) {
            delementte elementment.events[type][handler.$$guid];
        }
    }
    
    function handleEvent(event) {
        var returnValue = true;
    
        // 获取事件对象(IE使用全局的事件对象)
        event = event || fixEvent(window.event);
    
        // 获取事件处理函数散列表的引用
        var handlers = this.events[event.type];
    
        // 依次执行每个事件处理函数
        for(var i in handlers) {
            this.$$handerEvent = handlers[i];
            if(this.$$handlerEvent(event) === fasle) {
                returnValue = false;
            }
        }
        return returnValue;
    }
    
    // 增加一些IE事件对象缺乏的方法
    function fixEvent(event) {
        event.preventDefault = fixEvent.preventDefault;
        event.stopPropagation = fixEvent.stopPropagation;
        return event;
    }
    
    fixEvent.preventDefault = function() {
        this.returnValue = false;
    }
    
    fixEvent.stopPropagation = function() {
        this.cancelBubble = true;
    }

addEvent的优点
- 可以在所有浏览器中工作，就算是更古老无任何支持的浏览器
- this关键字可以在所有的绑定函数中使用，指向的是当前元素
- 中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数
- 不管浏览器类型，事件对象总是作为第一个对象传入
addEvent的缺点

仅工作在冒泡阶段（因为它深入使用事件绑定的传统方式）

Javascript的事件绑定主要有四种方法（一下在IE中运行正常，但不保证其他浏览器）：

[注：onXXX为某一事件，fun为某一function，domId为某一DOM对象id，event类型见后边附录。]

1、在DOM中，直接用onXXX="fun();"进行绑定

2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定

3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定

4、用<script for="domId" event="onXXX">fun();</script> 进行绑定

[html] view plain copy

<html>
<head>
<title>event test</title>
</head>
<body onload="init()">
<button id="btn1" onclick="display()" >绑定方式一</button>
<button id="btn2">绑定方式二</button>
<button id="btn3">绑定方式三</button>
<button id="btn4">绑定方式四</button>
</body>
</html>
<script type="text/javascript">
function init() {
document.getElementById("btn2").onclick = display;//为button2绑定事件
document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件
}
function display(event) {
var targ;//触发事件的对象引用
if (!event) {
var event = window.event;//获得当前事件(IE)
}
if (event.target) {//IE没有target
targ = evente.target;
} else if (event.srcElement) {//适用于IE
targ = event.srcElement;
}
//对触发事件的对象进行操作
alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
targ.disabled="disabled" ;
}
<script>
<script for="btn3" event="onclick">
display();//为button3绑定事件
<script>

附一：event事件：

onabort：图像的加载被中断
onblur：元素失去焦点
onchange：域的内容被改变
onclick：当用户点击某个对象时调用的事件句柄
ondblclick：当用户双击某个对象时调用的事件句柄
onerror：在加载文档或图像时发生错误
onfocus：元素获得焦点
onkeydown：某个键盘按键被按下
onkeypress：某个键盘按键被按下并松开
onkeyup：某个键盘按键被松开
onload：一张页面或一幅图像完成加载
onmousedown：鼠标按钮被按下
onmousemove：鼠标被移动
onmouseout：鼠标从某元素移开
onmouseover：鼠标移到某元素之上
onmouseup：鼠标按键被松开
onreset：重置按钮被点击
onresize：窗口或框架被重新调整大小
onselect：文本被选中
onsubmit：确认按钮被点击
onunload：用户退出页面

附二：IE event属性：

cancelBubble：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement ：对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode ：对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY ：发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue：如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement ：对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement：对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y：事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

《精通JavaScript》读书笔记

posted @ 2017-01-11 19:29 天涯海角路阅读(170) 评论(0) 收藏举报

刷新页面返回顶部

天涯海角路

JavaScript事件绑定

传统方式

W3C方式

IE方式

Dean Edwards的方案（addEvent/removeEvent库）

公告