<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>
<ul id="ul">
<li class="item" id="add">add</li>
<li class="item" id="del">del</li>
<li class="item" id="move">move</li>
</ul>
</body>
</html>
<script>
// DOM事件流
// DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
// DOM2级事件定义了两个方法addEventListener()和removeEventListener()
// IE不同的它有自己的方法attachEvent()和detachEvent
// 事件冒泡
// ie事件流叫事件冒泡
// 第三个参数设置为false -事件冒泡阶段触发事件
// 事件捕获
// ie事件流叫事件冒泡
// 第三个参数设置为false -事件冒泡阶段触发事件
// Netscape（网景）浏览器是一个网络信息浏览器，也是开发其公司，门户网站的名称。
// 事件捕获
// 第三个参数设置为true -事件捕获阶段触发事件
var eventUtils = {
// addEventHandler:function(){}
addEventHandler: function(el,event,fnHandler){
// console.log('test');
if(el.addEventListener){
console.log(el.addEventListener);
el.addEventListener(event,fnHandler,false)
}
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,false)
}
else{
// console.log(el.detachEvent);
el.detachEvent('on'+event,fnHandler)}
}
}
</script>
<script>
// 事件委托
// 事件委托是通过事件冒泡原理实现的一个高效率js编码
// 原理：减少js操作dom 实现浏览器性能提升
window.onload = function(){
// alert();
var ul = document.getElementById('ul');
// var lis
// = document.getElementById('li');
// 点击事件委托
eventUtils.addEventHandler(ul,'click',function(e){
console.log(e);
var ev =(e)?e:window.event;
var target = ev.target || ev.srcElement;
console.log(target.id);
});
// 移入变红，移出变白
var moveHover = {
mouseover:function(){
eventUtils.addEventHandler(ul,'mouseover',function(e){
// console.log(e);
var ev =(e)?e:window.event;
var target = ev.target || ev.srcElement;
// console.log(target.id);
if(target.nodeName.toLowerCase() == 'li'){
target.style.background ='red';
}
});
},
mouseout:function(){
eventUtils.addEventHandler(ul,'mouseout',function(e){
// console.log(e);
var ev =(e)?e:window.event;
var target = ev.target || ev.srcElement;
// console.log(target.id);
if(target.nodeName.toLowerCase() == 'li'){
target.style.background ='#fff';
}
});
}
};
moveHover.mouseover();
moveHover.mouseout();
};
</script>
