捕捉模式从DOM最顶层一直到最后一层,冒泡正好相反,具体运行以下实例测试.
<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="utf-8"> </head> <body> <style> #china{ width:500px; height: 500px; } div{ border: 1px solid #333; width:80%; height: 80%; margin: 10%; } </style> <div id="china"> 我是中国区域 <div id="shanxi"> 我是陕西区域 <div id="xian"> 我是西安区域 </div> </div> </div> <script> //获取中国,陕西,西安三大对象 var china =document.getElementById('china'); var shanxi=document.getElementById('shanxi'); var xian =document.getElementById('xian'); //第三个参数,是否捕捉,默认值是false,不捕捉即默认为冒泡【目前是捕捉模式】 // china.addEventListener('click',function(){console.log('China')},true); // shanxi.addEventListener('click',function(){console.log('Shanxi')},true); // xian.addEventListener('click',function(){console.log('Xian')},true); //第三个参数,是否捕捉,默认值是false,不捕捉即默认为冒泡【目前是冒泡模式】 china.addEventListener('click',function(){console.log('China')},false); shanxi.addEventListener('click',function(){console.log('Shanxi')},false); xian.addEventListener('click',function(){console.log('Xian')},false); </script> </body> </html>
离线缓存的开启实例使用apache设置 1.apache配置文件搜索Addtype,我的addtype已经存在项目,如下 AddType application/x-compress .Z AddType application/x-gz...
TmodJS是一套完整的前端模块框架。 虽然我们PHP框架自带各种模板引擎,但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面,拼接HTML真的是很头疼的一件事情。...
https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:37.6767600000,112.7297800000&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU&referer=p...
<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="utf-8"> </head> <bo...
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取mac地址</title> </head&g...