这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 Event(事件)的传播与冒泡。具有很好的参考价值,下面跟着小编一起来看下吧
特性说明和原理图:
示例代码 (ie8 - 示例不提供)
html 代码
- <body class="body">
- <div class="log">
- </div>
- <input type="text" id="inTxt" name="intxt" />
- <div class="wrap">
- <div class="cont">
- <button type="button" class="button" id="btn">
- 按钮
- </button>
- <select name="stopType" id="stopType">
- <option value="1">
- StopPropagation
- </option>
- <option value="2">
- cancelBubble
- </option>
- </select>
- <button type="button" class="button" id="btnReject">
- cont阻止捕获或冒泡
- </button>
- </div>
- </div>
- </body>
层级关系:body->wrap->cont->button,可以对照上面的原理
Js 代码
- $(function() {
- var $log = $('.log'),
- $wrap = $('.wrap'),
- $cont = $('.cont'),
- $btn = document.getElementById('btn'),
- $stopType = $('#stopType'),
- $body = $('body'),
- $inTxt = $('#inTxt'),
- $btnReject = $('#btnReject');
- var ePhase = ["", "捕获", "目标", "冒泡"]
- var setBorderColor = function($dom, color, time, event) {
- $dom = $($dom);
- $log.html($log.html() + $dom.attr('class') + '[' + ePhase[event.eventPhase] + ']' + '<br/>') var timeIndex = window.setTimeout(function() {
- $dom.CSS({
- 'borderColor': color,
- 'borderWidth': '4px'
- });
- },
- time);
- }
- //捕获
- $body[0].addEventListener('click',
- function(event) {
- $log.html($log.html() + "-------------------<br>");
- setBorderColor($body, '#0866ff ', 0, event);
- },
- true);
- $wrap[0].addEventListener('click',
- function(event) {
- setBorderColor($wrap, 'yellow', 2000, event);
- },
- true);
- $cont[0].addEventListener('click',
- function(event) {
- event = event || window.event;
- if ($stopType.val() == '1') {
- event.stopPropagation();
- } else {
- event.cancelBubble = true;
- }
- setBorderColor($cont, 'green', 1000, event);
- },
- true);
- $btn.addEventListener('click',
- function(event) {
- setBorderColor($btn, 'red', 0, event);
- },
- true);
- $btnReject[0].addEventListener('click',
- function(event) {
- setBorderColor($btnReject, 'gray ', 0, event);
- },
- true);
- //冒泡
- $body[0].addEventListener('click',
- function(event) {
- setBorderColor($body, '#0866ff ', 0, event);
- },
- false);
- $wrap[0].addEventListener('click',
- function(event) {
- setBorderColor($wrap, 'yellow', 2000, event);
- },
- false);
- $cont[0].addEventListener('click',
- function(event) {
- setBorderColor($cont, 'green', 1000, event);
- },
- false);
- $btn.addEventListener('click',
- function(event) {
- setBorderColor($btn, 'red', 0, event);
- },
- false);
- $btnReject[0].addEventListener('click',
- function(event) {
- setBorderColor($btnReject, 'gray ', 0, event);
- },
- false);
- //阻止默认事件
- $inTxt.keypress(function(event) {
- //event.preventDefault();
- window.event.returnValue = false;
- $body.append(String.fromCharCode(event.keyCode));
- });
- });
效果图
应用场景
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0623/328196.html