您的位置：首页 > Web前端 > JavaScript

[JS][技巧]利用事件冒泡特性处理多个按钮的单击事件

2015-10-29 12:51 671 查看

以前一直不在意这个事件冒泡，只是有时候会用到

stopPropagation()

去阻止事件冒泡，最近发现，利用好了事件冒泡这一特性，有些地方会非常方便。

拿个最直观的例子来举例 ToolBar

界面

HTML

<div id="toolbar" class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Close</button>
</div>
</div>

以前我是给每一个按钮绑定一个事件，这里不做例子了，直接写如何利用事件冒泡这一特性进行绑定。

var toolbar = {
Left: function () {
alert('Left');
},
Middle: function () {
alert('Middle');
},
Right: function () {
alert('Right');
},
Close: function () {
alert('Close');
}
}
document.getElementById('toolbar').onclick = function (e) {
var fun = toolbar[e.target.textContent];
if (fun) { fun(); }
};

直接给这些按钮所在的

#toolbar

绑定click事件，然后通过

e.target

可以得到对按钮的引用，最后再根据textContent对按钮文本进行判断即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航