您的位置：首页 > 其它

关于DOM事件的一个例子

2016-07-09 11:17 369 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航