以下是一段用于测试两种事件流的类型:捕获(capture)和冒泡(bubble),如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
document.onreadystatechange = function () {
if(document.readyState=="complete") {
var inner = document.getElementById('inner');
var banner = document.getElementById('banner');
if(inner.addEventListener){
inner.addEventListener('click',function(){
alert(1.1);
},true);
banner.addEventListener('click',function(){
alert(2.1);
},true);
document.body.addEventListener('click',function(){
alert(3.1);
},true);
}else if(inner.attachEvent){
inner.attachEvent('onclick',function(){
alert(1.1);
});
}
}
}
clickHandlerOnBody = function(){
alert(3);
}
clickHandlerOnDiv = function(){
alert(2);
}
clickHandlerOnInner = function(){
alert(1);
}
</script>
<title>Demo System</title>
</head>
<body id="body" onclick="clickHandlerOnBody()">
body
<div id='banner' style="width:100px;height:100px;background-color:red;"
onclick="clickHandlerOnDiv()">
banner
<div id='inner' style="width:50px;height:50px;background-color:yellow;"
onclick="clickHandlerOnInner()">inner</div>
</div>
</body>
</html>
点击inner输出的firefox下输出的结果是:
3.1
2.1
1
1.1
2
3
而不是:
3.1
2.1
1.1
1
2
3
原因是什么?
另外,不知道两种捕获类事件流的具体使用场景,stackoverflow上的回答也只是说为了兼容IE,一般都是bubble事件流。
分享到:
相关推荐
videojs播放rtmp、m3u8直播流,测试源代码,需要部署在服务器中(tomcat或IIS或http-server)中,同时需要开启网站支持flash,具体注意事项或步骤见使用须知。另外,资源提供各热点rtmp在线流供测试使用
videojs播放rtmp流,测试代码,需要部署到服务器上(包括但不限于tomcat,iis),路径为test/tes2.html。videojs播放rtmp流,测试代码,需要部署到服务器上(包括但不限于tomcat,iis),路径为test/tes2.html。videojs...
而`flv.js`是Adobe Systems公司开发的一个开源JavaScript库,目的是为了在没有Flash Player的情况下也能在现代浏览器中播放FLV视频内容,从而实现对这种格式的兼容和支持。 `flv.js`的核心功能是将FLV文件解码并在...
本文将深入探讨如何使用Video.js在网页上播放RTMP流,并在不同浏览器上进行测试,特别是IE和火狐,以及如何在服务器环境中部署。 首先,RTMP(Real-Time Messaging Protocol)是一种实时传输协议,常用于在线直播和...
4. **使用文件流加载PDF**:在JavaScript中,使用PDF.js的`PDFDocumentProxy`对象加载文件流。以下是一个基本示例: ```javascript var loadingTask = pdfjsLib.getDocument({ data: yourFileStreamData, // 这里...
JavaScript事件流是网页交互的核心机制,它描述了用户操作如何从HTML元素传递到浏览器窗口的过程。事件流主要有三种模式:捕获模式、目标模式和冒泡模式。在深入讲解之前,我们先了解一下“js右键菜单”这个概念。...
5. **测试播放**:现在,访问部署后的网页,Video.js应该能够加载并播放指定的RTMP流。 值得注意的是,RTMP在某些现代浏览器(尤其是移动设备上的浏览器)中可能不被支持。在这种情况下,你可能需要提供其他如HLS...
"js工作流示例源码"是一个关于如何在JavaScript中实现工作流管理的项目实例。工作流是指一系列有组织的活动,这些活动按照一定的规则和顺序进行,以完成一个特定的目标或任务。在Web开发中,工作流可以用于处理复杂...
### JavaScript开发中的测试 在JavaScript开发中,测试是不可或缺的一部分,尤其是对于复杂的应用程序。JavaScript是一种动态类型语言,可能会导致一些不易察觉的错误,因此单元测试显得尤为重要。Sazerac提供了一...
通过对这些文件的深入研究,可以更直观地了解videojs在实际项目中的应用,包括如何设置RTMP源,如何配置HLS流,以及如何在原生环境中集成和调试videojs播放器。 总结来说,videojs通过其强大的可扩展性和跨平台兼容...
"JS播放12路MP4视频测试"的场景可能出现在监控系统、在线教育平台或是多媒体展示等需要同时展示多路视频流的应用中。这个项目的核心是利用JavaScript处理多媒体元素(`<video>`标签)并进行有效管理,以实现同时播放...