Event(事件)的传播与冒泡
时间:2022-04-22
本文章向大家介绍Event(事件)的传播与冒泡,主要内容包括特性说明和原理图:、示例代码(ie8-示例不提供)、Js代码、应用场景、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
特性说明和原理图:
- 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡
- 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome、safari、opera、firefox都支持cancelBubble属性。
- Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能在元素的冒泡阶段。
- stopPropagatin()方法用于阻止事件的传播,如果设置在捕获阶段,则目标和冒泡阶段不会被执行;
- cancelBubble属性只能阻止冒泡阶段,对捕获和目标阶段的事件不能阻止
- preventDefault()和window.event.returnValue用于标准浏览器和ie9+,都可以阻止默认事件。ie8-可以用returnValue,preventDefault()。
示例代码(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 ));
});
});
- 实现一个完整的event流的Demo
- 在cont的捕获事件处有阻止事件传播的代码
- 阻止默认事件只用于验证
应用场景
- 捕获阶段的事件应用场景较少,一般情况下都应用在目标和冒泡阶段。
- 现阶段w3c的标准事件已普遍受支持,如果不兼容ie8-浏览器可以废弃一些兼容性代码。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP 实现Redis发布订阅消息及时通讯
- 简单几步,用云开发搞定短信验证码登录
- 重要的进程就让Supervisor 来守护吧!
- 机器学习基础:令你事半功倍的pipeline处理机制
- django 中如何将字典变量传给template视图层的JS
- Spring第三天:Spring的AOP的注解开发、Spring的声明式事务、JdbcTemplate
- Spring Boot中集成Slf4j 与Logback
- 一文搞定 Linux 常用高频命令
- 推荐一款科研必备的Python数据可视化神器——PyQtGraph
- 机器学习基础:可视化方式理解决策树剪枝
- 神级代码注释-这次是来搞笑的
- Gremlin 图查询概述
- JS,PHP,Python,Java对JSON数据的处理
- 基于Canal与Flink实现数据实时增量同步(二)
- Spring第四天:SSH的整合、HibernateTemplate的使用、OpenSessionInViewFilter的使用