JS——动态添加事件和移除事件（有待补充...）
动态的添加事件：利用 attachEvent 和 addEventListener
IE 支持 attachEvent：
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("测试");
}
或者：
obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener：
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("测试");
}
或者：
obj.addEventListener("click", function(){alert("测试");}, false);
注意： attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。
综合应用：
if (window.attachEvent) { //IE 的事件代码 } else { //其它浏览器的事件代码 }
下面说下addEventListener第三个参数以及应用。TRUE：事件捕获阶段，事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。FALSE：事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function regEvent() {
document.getElementById('id1').addEventListener('click', function () { changeRed(); }, true);
document.getElementById('id2').addEventListener('click', function () { changeYellow(); }, true);
}
function changeRed() {
document.getElementById("p1").style.color = 'red';
}
function changeYellow() {
document.getElementById("p2").style.color = 'yellow';
}
</script>
</head>
<body>
<p id="p1">会变成红色</p>
<p id="p2">会变成黄色</p>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:red; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:1"></div>
</div>
<button type="button" onclick="regEvent()">点击</button>
</body>
</html>
注释：虽然利用addEventListener进行了事件的注册，但是有个问题就是在注册事件完成后，点击子div会触发触发父div的事件。下面是解救办法：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function regEvent() {
document.getElementById('id1').addEventListener('click', function () { changeRed(); }, false);//必须设为false
document.getElementById('id2').addEventListener('click', function () { changeYellow(this, event); }, false);//必须设为false
}
function changeRed() {
document.getElementById("p1").style.color = 'red';
}
function changeYellow(obj, evt) {
document.getElementById("p2").style.color = 'yellow';
if (window.event) {
evt.cancelBubble = true;//ie浏览器下阻止冒泡。cancelBubble不是w3c标准，只支持ie，stopPropagation现在也支持ie
} else {
evt.stopPropagation();//其它浏览器下阻止冒泡
}
}
</script>
</head>
<body>
<p id="p1">会变成红色</p>
<p id="p2">会变成黄色</p>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:red; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:1"></div>
</div>
<button type="button" onclick="regEvent()">点击</button>
</body>
</html>
stopPropagation() 方法：不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
注释：上例中addEventListener方法第三个参数必须设为false（冒泡状态）。
preventDefault() 方法：取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。下面是例子，取消了a标签的跳转功能。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function myself(e) {
alert('1');
e.preventDefault();
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="a1" onclick="myself(event)">百度</a>
</body>
参考：stopPropagation() 方法、js 事件冒泡、事件捕获、stopPropagation、preventDefault、事件的canceBubble属性
