<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/* 依次为 ①捕获阶段，②目标阶段，③冒泡阶段，
第一阶段：事件从文档根元素开始逐层向下传递，直到找到事件目标，
第二阶段：找到事件目标并触发相应的事件，
第三阶段：从目标逐层向上返回到根节点，
*/
window.onload=function() {
var btn = document.getElementById("btn");
//我的们btn.onclick onclick事件可以理解为是dom的一个属性它可以被赋值事件 但后面的事件会覆盖先前的事件
btn.addEventListener("click", function () {
alert(1)
}, false);
//这个addEventListene增加监听事件可以为btn这dom附加多个事件,并且是同一类型的事件
//他的参数是3个 1.普通触发事件onclick去掉on(str) 2.回调函数触发事件执行的函数 (函数) 3.这个函数会不会在捕获阶段执行 (布尔)
btn.addEventListener("click", function () {
alert(2)
}, false);
btn.addEventListener("click", function () {
alert(3)
}, false);
bind(btn,"click",function(){
alert("我好了!");
})
//成功执行
/*******************bind函数**************/
function bind(obj,eventStr,callback){
//*ie已经死了!!!!不要tmIe
obj.addEventListener(eventStr,callback,false);
//attchEvent是Ie8以下的且会使用call函数绑定至对象他的事件参数要加on
//callback.call.(obj) 将window的函数绑定给obj
}
//若我们将addEventListener的第三个参数改为true 那么就会在捕获阶段执行也就是能够冒泡的事件都会直接执行
//我们的事件先是从最底层捕获然后在目标事件位置触发事件
//然后再执行冒泡事件
//但true后就是边捕获边触发了,也可以理解为冒泡事件的提前
}
</script>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>
|