事件绑定

在JavaScript中,事件是个复杂的问题。事件冒泡(event bubbling)和委托正在取代内联事件(inline onclick)操作(一些特殊的“初始页”除外)。

假设你有一个图片网格,需要启动一个modal lightbox窗口。千万不要采取下面的做法,示例采用的是jQuery,如果你使用相似的库或者其他,冒泡机制也同样适合传统的JavaScript。

相关的HTML代码:

<div id="grid-container">
    <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a>
    <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a>
    <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a>
    ...
</div>

bad code:

$('a').on('click', function(){
    callLightbox(this);
});
这段代码假设调用lightbox,里面传递一个anchor元素并且引用全屏图片。与其绑定每个anchor元素还不如直接使用#grid-container元素。


nice code:

$("#grid-container").on("click", "a", function(event){
    callLightbox(event.target);
});
在这段代码中,this和event.target都表示anchor元素。同样你也可以在任何父元素上使用。只要保证所定义的元素是事件目标就行(event's target)。


你可能感兴趣的:(JavaScript,事件绑定)