<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event</title>
<style>
.target {
float: left;
width: 100px;
height: 100px;
background: #359;
}
.outer-div {
display: none;
float: left;
width: 150px;
height: 80px;
border: 1px solid #888;
}
.inner-div {
float: left;
width: 80px;
height: 50px;
background: #194;
}
</style>
</head>
<body>
<!-- single -->
<div class="target"></div>
<div class="outer-div">
<div class="inner-div"></div>
</div>
<!-- // mutil -->
<ul>
<li>
<div class="target"></div>
</li>
</ul>
<script type="text/javascript">
/**
* 知识点，事件捕获、执行、冒泡
* #指定捕获过程发生
* addEventListener(event, func, useCapture)
* useCapture：是否在捕获阶段触发？默认false
* #阻止继续捕获
* (w3c)
* window.captureEvents(Event.eventType)
* window.releaseEvents(Event.eventType)
* (IE)
* object.setCapture()
* object.releaseCapture()
* #阻止继续冒泡
* event.stopPropagation()、
* (IE)event.cancelBubble = true;
* #不能冒泡的事件
* mouseenter、mouseleave、focus、blur
*/
var timer = null;
var target = document.querySelector('.target');
var outer = document.querySelector('.outer-div');
var inner = document.querySelector('.inner-div');
inner.addEventListener('click', function(event) { console.log('click inner')}, false);
target.addEventListener('mouseenter', function(event) {
openOuter();
});
target.addEventListener('mouseleave', closeOuter);
outer.addEventListener('mouseenter', function(event) {
console.log('enter outer');
openOuter();
});
outer.addEventListener('mouseleave', function(event) {
console.log('leave outer');
closeOuter();
});
inner.addEventListener('mouseenter', function(event) { console.log('enter inner'); });
inner.addEventListener('mouseleave', function(event) { console.log('leave inner'); });
function openOuter() {
clearTimeout(timer);
outer.style.display = 'block';
}
function closeOuter() {
timer = setTimeout(function() {
outer.style.display = 'none';
}, 200);
}
</script>
</body>
</html>
<!-- single -->
<div class="target"></div>
<div class="outer-div">
<div class="inner-div"></div>
</div>
