<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js事件流模型</title>
</head>
<style>
#con{
width:200px;
height:200px;
background: orange;
}
#outer{
position: relative;
top: 50px;
left: 50px;
width:100px;
height:100px;
background: #eeddff;
}
#inner{
position: relative;
top: 251px;
left: 25px;
width:50px;
height:50px;
background: #44ddff;
}
</style>
<body>
<div id="con">
con
<div id="outer">
outer
<div id="inner">inner</div>
</div>
</div>
<script>
</script>
</body>
</html>
1.执行顺序
document->html->body-con->outer->ineer->outer->con->body->html->document
2.响应某个时间的函数叫做事件处理程序
function fnHandler(){}
<script>
// js事件流
// 事件添加
var con = document.getElementById(‘con‘);
// con.addEventListener(‘click‘,function(){
// alert(‘123‘);
// });
// con.addEventListener(‘click‘,function(){
// alert(‘123‘);
// },false);
// con.addEventListener(‘click‘,function(){
// alert(‘123‘);
// },true);
// DOM事件流
// DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
// DOM2级事件定义了两个方法addEventListener()和removeEventListener()
// IE不同的它有自己的方法attachEvent()和detachEvent
var eventUtils = {
// addEventHandler:function(){}
addEventHandler: function(el,event,fnHandler){
// console.log(‘test‘);
if(el.addEventListener){
console.log(el.addEventListener);
el.addEventListener(event,fnHandler,true)
}
else{
console.log(el.attachEvent);
el.attachEvent(‘on‘+event,fnHandler)}
},
removeEventHandler: function(el,event,fnHandler){
// console.log(‘test‘);
if(el.removeEventListener){
console.log(el.removeEventListener);
el.removeEventListener(event,fnHandler,true)
}
else{
console.log(el.detachEvent);
el.detachEvent(‘on‘+event,fnHandler)}
}
}
eventUtils.addEventHandler(con,‘click‘,function(){
alert(‘123‘);
});
</script>
时间： 2024-10-21 23:40:54