Javascript事件总结(二)

前一篇文章,比较详细的讲了下javascript的事件流和事件处理程序,下面接着讨论javascript的事件对象和事件委托。


事件对象

在触发DOM上的事件时,会产生一个事件对象event。这个对象包含了所有和事件有关的信息(例如导致事件的元素,事件的类型等)。具体内容可以看W3School,下面讲一下兼容各种浏览器的事件对象:

1、获取event对象

function getEvent(event){
    return event ? event : window.event;
}

2、获取事件目标

function getTarget(event){
    return event.target || event.srcElement;
}

3、取消事件的默认行为

function preventDefault(event){
    if(event.preventDefault){
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}

4、阻止事件冒泡

function stopPropagation(event){
    if(event.stopPropagation){
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

使用方法举例:

var link = document.getElementById('link');
link.onclick = function(event){
    alert('link');
    preventDefault(event);
}


事件委托

事件处理程序过多的时候,会有几个问题:

  1. 每个事件处理函数都是对象,都会占内存,所以事件处理程序越多,性能越差。
  2. 必须事先指定所有的事件处理程序,事件处理程序越多,访问DOM的次数就越多,会延迟整个页面交互就绪的时间。

所以,建议使用事件委托来解决这些问题。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理一类的事件。例如:

<ul>
    <li><a id="a1" href="http://keenwon.com/955.html">jQuery最佳实践<a></li>
    <li><a id="a2" href="http://keenwon.com/992.html">Handlebars.js 中文文档</a></li>
</ul>

我们想给上面的两个链接添加click事件,我们可以这么做:

document.onclick = function(e){
    e = e || window.event;
    var target = e.srcElement ? e.srcElement : e.target;
    
    switch(target.id){
        case 'a1':
            //点击了a1
            break;
        case 'a2':
            //点击了a2
            break;
    }
}

关于事件委托还有更“高端”应用,例如bootstrap等类库,直接在标签上加data-toggle 属性就可以开启控件,其原理也是事件委托。



标签:

无觅相关文章插件,快速提升流量