Javascript事件冒泡和捕捉
捕捉模式从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> “Javascript事件冒泡和捕捉” 的相关文章
websql的使用方法
<!-- 三个核心方法 openDatabase:这个方法使用现有数据库或创建...
js获取当前位置信息, js获取当前位置经纬度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...
js图片旋转插件jqueryrotate
jQuery 插件——jqueryrotate，它可以实现旋转效果。jqueryrotate 支持所有主流浏览器，包括 IE6。如果提示方法不存在,可能是你的Jquery版本过低或者过高。基本语法:$('#img').rotate(90);//旋转90度其他的参数:参数类型说明默认值...
javascript使用原型为内置对象增加方法
//字面量的形式创建原型对象 /* function Box(){} Box.prototype={ 'name':'gao', age:23, fun:function(){ return this.name+'--'+...
ES6中let与var的区别
var的作用域是全局的,let的作用域是块级的,直接看代码(其他的小区别忽略):<script type="text/javascript"> for (var a = ...