<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>
<button id="aa">aa</button>
</li>
<li>
<button id="bb">bb</button>
</li>
<li>
<button id="cc">cc</button>
</li>
<li id="li1"><p id="p1">冒泡传递</p></li>
<li id="li2"><p id="p2">捕获传递</p></li>
</ul>
<script>
document.getElementById("aa").addEventListener("click",
function()
{
alert("hello");
});
document.getElementById("bb").addEventListener("click",
function()
{
alert("world");
});
document.getElementById("cc").addEventListener("click",
function()
{
alert("abc");
});
document.getElementById("p1").addEventListener("click",
function()
{
alert("p");
},false);
document.getElementById("li1").addEventListener("click",
function()
{
alert("li");
},false);
document.getElementById("p2").addEventListener("click",
function()
{
alert("p");
},true);
document.getElementById("li2").addEventListener("click",
function()
{
alert("li");
},true);
</script>
</body>
</html>