在 《细说 jQuery 事宜篇（三） – 事宜流传》 中提到了事宜冒泡能够形成的弊病，当时举了 mouseout 的例子，关于 mouseout 这个特殊情况，我们能够用 hover 要领来处置惩罚，然则关于 hover 要领没法处置惩罚的情况，我们又应当怎样处置惩罚呢？
为此，我们必需经由历程接见事宜对象来转变事宜历程。
事宜对象是一种
DOM构造，它会在元素取得处置惩罚事宜的时机时传递给挪用的事宜处置惩罚顺序。这个对象中包含着与事宜有关的信息。
事宜对象 event 的 target 属性指的是事宜目的，它将保留发作事宜的目的元素。
起首，我们举一个 hover 没法处置惩罚的例子：
<div class="wrapper">
<span class="bar">
<a href="http://segmentfault.com" target="_blank">segmentfault</a>
</span>
</div>
款式为：
div {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
我们的需求是仅仅当点击 div 地区时增加一个背景色，然则点击 a 标签时并不转变背景色。
增加款式为：
.blueBg {
background-color: lightblue;
}
jQuery 代码为：
$('div').click(function() {
$('div').addClass('blueBg');
});
此时点击 div 后:
但由于事宜冒泡的存在，当我们点击 a 标签跳出页面后，发明 div 的背景色也被转变。所以，接下来我们就要想办法转变事宜历程来阻挠这个行动。
阻挠事宜冒泡
应用事宜对象的 .stopPropagation() 要领能够阻挠事宜冒泡。下面我们来阻挠 a 标签向上冒泡。修正 jQuery 代码以下：
$('a').click(function(event) {
event.stopPropagation();
});
$('div').click(function(event) {
$('div').addClass('blueBg');
});
此时，再点击 a 标签将不会转变 div 的背景色。
然则依据 jQuery 文档的申明，stopPropagation 要领对 live 和 delegate 绑定的事宜是不支持的。
阻挠默许行动
假如此时我们还希望能阻挠 a 标签的默许行动，也就是翻开一个页面的行动，这里我们须要用到事宜对象的 .preventDefault() 要领。
$('a').click(function(event) {
event.preventDefault();
event.stopPropagation();
});
$('div').click(function(event) {
$('div').addClass('blueBg');
});
此时，点击 a 标签不仅不会转变 div 的背景色，也不会翻开新的页面，也就是说默许行动被阻挠。
事宜托付
曾写过一篇引见事宜托付的博文 – 《Javascript – 事宜托付是怎样事情的？》。这里就不细致写了，然则 jQuery 供应了特地的要领来完成事宜托付，就是应用 .on() 要领。
关于之前博文的例子：
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
// 取得父级元素并增加 click 事宜监听
document.getElementById("parent-list").addEventListener("click",function(e) {
// e.target 即 click 事宜发作的元素，同时推断该元素是不是是一个 li 标签
if(e.target && e.target.nodeName == "LI") {
// console 输出被点击的 li 标签的 id
console.log("List item ",e.target.id," was clicked!");
}
});
</script>
利于 jQuery 的 on 要领能够简写为：
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script type="text/javascript">
$(function() {
$('#parent-list').on('click', 'li', function(e) {
console.log("List item ",e.target.id," was clicked!");
})
});
</script>
