前端开发JS事件触发过程-模型

前端手机端开发模板
前端开发模板引擎
前端如何开发模板

html 代码

<!DOCTYPE html>
<head>
    <meta charset=utf-8 />
    <title>js Bin</title>
    <style media=”screen”>
        * {
box-sizing:border-box;
margin:0;
padding:20px;
transition:background800ms;
}
height:100%;
background:hsl(193,66%,55%);
font:bold40pxhelvetica,sans-serif;
color:red;
}
body {
height:100%;
background:hsl(193,66%,65%);
}
div {
height:100%;
background:hsl(193,66%,75%);
}
ul {
height:100%;
list-style:none;
background:hsl(193,66%,85%);
}
li {
height:100%;
background:hsl(193,66%,95%);
}
.highlight {
background:red;
}
</style>
</head>
<body>
    <div class=””>
        <ul>
            <li>Click on a layer to watch the event move through the DOM tree.<br>点我就是了~</li>
        </ul>
    </div>
    <script type=”text/javascript”>
        var html = document.documentElement;
        var body = document.body;
        var div = body.querySelector(‘div’);
        var ul = body.querySelector(‘ul’);
        var li = body.querySelector(‘li’);
        var pause = 200;
        // Capture
        html.addEventListener(‘click’, callback, true);
        body.addEventListener(‘click’, callback, true);
        div.addEventListener(‘click’, callback, true);
        html.addEventListener(‘click’, callback, true);
        ul.addEventListener(‘click’, callback, true);
        li.addEventListener(‘click’, callback, true);
        // Bubble
        html.addEventListener(‘click’, callback, false);
        body.addEventListener(‘click’, callback, false);
        div.addEventListener(‘click’, callback, false);
        html.addEventListener(‘click’, callback, false);
        ul.addEventListener(‘click’, callback, false);
        li.addEventListener(‘click’, callback, false);
        function callback(event) {
            var ms = event.timeout = (event.timeout + pause) || 0;
            var target = event.currentTarget;
            setTimeout(function () {
                target.classList.add(‘highlight’);
                setTimeout(function () {
                    target.classList.remove(‘highlight’);
                }, pause);
            }, ms);
        }
    </script>
</body>
</html>
open edx 模板前端开发
前端开发汇报总结ppt模板
web前端开发自我介绍模板
» 本文来自:前端开发者 » 《前端开发JS事件触发过程-模型》
» 本文链接地址:https://www.rokub.com/6194.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!