JS事件绑定与冒泡实例详解
程序员文章站
2022-05-15 21:00:46
...
本文主要和大家分享JS事件绑定与冒泡实例详解，希望能帮助到大家。
XAMPP
A Apache 阿帕奇服务器 M Mysql P PHP P PERL
JSON
JSON 轻量级的数据交换格式
XML 一种数据交换格式
JSON用来表示对象和数组
var json = '["171204",{"name":"张飞","age":"20"},{"name":"关羽","age":"22"}]';// 通过JS自带的JSON.parse可以把JSON格式的字符串转化为对象var obj = JSON.parse(json);console.log(obj);
模仿外卖页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON</title>
<style type="text/css">
.one{
text-align:center;
overflow:hidden;
width:700px;
margin:0px auto;
padding-left:20px;
}
.pA{
text-align:center;
}
.pB{
text-align:left;
border:1px blue solid;
}
.two{
padding-left:10px;
float:left;
width:320px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
padding-bottom:10px;
}
.three{
float:left;
padding-bottom:5px;
margin-left:5px;
margin-top:10px;
}
.img1{
background-image:url(1.jpg);
background-size:150px 100px;
height:100px;
border:1px red solid;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
var list = '{"address":"泗泾镇九干路168号","shopList":[{"name":"1众一品过桥米线",
"cd":[{"title":"2黄焖鸡大份微辣","pir":"20","pl":["3土豆","鸡肉","姜","青椒"]},{"title":
"4黄焖鸡大份中辣","pir":"20","pl":["5土豆","鸡肉","姜","尖椒"]},{"title":"6黄焖鸡大份重辣",
"pir":"20","pl":["7土豆","鸡肉","姜","5个尖椒"]}]},{"name":"8老友记黄焖鸡","cd":
[{"title":"9肥牛米线","pir":"20","pl":["10米线","青菜","肥牛","豆芽"]},{"title":"11鱼豆腐米线",
"pir":"18","pl":["12米线","青菜","鱼豆腐","豆芽"]},{"title":"香菇米线","pir":"16","pl":
["13米线","青菜","香菇","豆芽"]}]},{"name":"14众一品黄焖鸭","cd":[{"title":"14肥牛米线",
"pir":"20","pl":["15米线","青菜","肥牛","豆芽"]},{"title":"16鱼豆腐米线","pir":"18",
"pl":["17米线","青菜","鱼豆腐","豆芽"]},{"title":"18香菇米线","pir":"16","pl":["19米线","青菜",
"香菇","豆芽"]}]},{"name":"众一品黄焖猪","cd":[{"title":"20肥牛米线","pir":"20","pl":
["米线","青菜","肥牛","豆芽"]},{"title":"21鱼豆腐米线","pir":"18","pl":["米线",
"青菜","鱼豆腐","豆芽"]},{"title":"22香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"23众一品黄焖狗","cd":[{"title":"24肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"25鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},{"title":"26香菇米线","pir":"16",
"pl":["米线","青菜","香菇","豆芽"]}]}]}';
var listObj = JSON.parse(list);
var body = document.getElementsByTagName('body')[0];
var p1 = document.createElement("p");
var pA = document.createElement("p");
var pB = document.createElement("p"); p1.className="one"; pA.className="pA"; p1.style.border="1px blue solid"; pA.innerHTML = "地址:" + listObj.address; pB.innerHTML = "商家:"; pB.className = "pB"; body.appendChild(p1); p1.appendChild(pA); p1.appendChild(pB); for(var i=0; i<listObj.shopList.length;i++){
var shop = listObj.shopList[i];
var p2 = document.createElement("p"); p2.className="two";
var h4 = document.createElement("h4"); p2.style.border="1px red solid"; p1.appendChild(p2); p2.appendChild(h4); h4.innerHTML = shop.name;
for(var j=0; j<shop.cd.length;j++){
var p3 = document.createElement("p"); p2.appendChild(p3); p3.style.width="150px"; p3.className="three"; p3.style.border="1px black solid";
var cd = shop.cd[j]; p3.innerHTML = cd.title;
var img = document.createElement("p"); img.className="img1"; p3.appendChild(img);
var p4 = document.createElement("p"); p4.innerHTML = cd.pir; p3.appendChild(p4);
var p8 = document.createElement("p"); p8.innerHTML = "配料:"; for(var k=0; k<cd.pl.length;k++){ p8.innerHTML = p8.innerHTML + cd.pl[k];
} p3.appendChild(p8);
}
}
</script>
</html>
AJAX
ajax.html
<!DOCTYPE html><html lang="en">
<head>
<meta charsert="UTF-8" />
<title>JSON</title>
</head>
<body>
</body>
<script type="text/javascript">
// 1.创建请求对象
var request = new XMLHttpRequest(); // 2.设置请求并发送 true代表异步 false代表同步
request.open("GET","text.jason",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState==4 && request.status==200){ // 请求成功
console.log(request.responseText);
}
} </script></html>
text.json
{"address":"泗泾镇九干路168号","shopList":[{"name":"1众一品过桥米线",
"cd":[{"title":"2黄焖鸡大份微辣","pir":"20","pl":["3土豆","鸡肉","姜","青椒"]},{"title": "4黄焖鸡大份中辣","pir":"20","pl":["5土豆","鸡肉","姜","尖椒"]},{"title":"6黄焖鸡大份重辣",
"pir":"20","pl":["7土豆","鸡肉","姜","5个尖椒"]}]},{"name":"8老友记黄焖鸡","cd": [{"title":"9肥牛米线","pir":"20","pl":["10米线","青菜","肥牛","豆芽"]},{"title":"11鱼豆腐米线",
"pir":"18","pl":["12米线","青菜","鱼豆腐","豆芽"]},{"title":"香菇米线","pir":"16","pl": ["13米线","青菜","香菇","豆芽"]}]},{"name":"14众一品黄焖鸭","cd":[{"title":"14肥牛米线",
"pir":"20","pl":["15米线","青菜","肥牛","豆芽"]},{"title":"16鱼豆腐米线","pir":"18",
"pl":["17米线","青菜","鱼豆腐","豆芽"]},{"title":"18香菇米线","pir":"16","pl":["19米线","青菜", "香菇","豆芽"]}]},{"name":"众一品黄焖猪","cd":[{"title":"20肥牛米线","pir":"20","pl": ["米线","青菜","肥牛","豆芽"]},{"title":"21鱼豆腐米线","pir":"18","pl":["米线", "青菜","鱼豆腐","豆芽"]},{"title":"22香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"23众一品黄焖狗","cd":[{"title":"24肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"25鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},{"title":"26香菇米线","pir":"16",
"pl":["米线","青菜","香菇","豆芽"]}]}]}
事件绑定
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<title>事件绑定</title>
<style>
.redp{ width:200px; height:200px; background-color:red; }
</style>
</head>
<body>
<p class="redp"></p>
</body>
<script>
var redp = document.getElementsByClassName('redp')[0]; // 事件绑定 - 可以给一个元素绑定多个相同的事件
redp.addEventListener("click", function(){
console.log(1);
},false);
redp.addEventListener("click",f2,false); function f2(){
console.log(2);
}
redp.removeEventListener("click",f2,false); </script></html>
事件绑定与冒泡
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{ width:600px; height:600px; background-color:red; margin:100px auto; overflow:hidden; }
.mid{ width:400px; height:400px; background-color:gold; margin:100px auto; overflow:hidden; }
.item{ height:200px; width:200px; background-color:blue; margin:100px auto; }
</style>
</head>
<body>
<p class="box">
<p class="mid">
<p class="item">
</p>
</p>
</p>
</body>
<script>
var box = document.getElementsByClassName('box')[0]; var mid = document.getElementsByClassName('mid')[0]; var item = document.getElementsByClassName('item')[0];
box.addEventListener("click",function(){
console.log("box");
},false);
mid.addEventListener("click",function(ev){
// 取消冒泡 - 阻止事件冒泡
ev.cancelBubble = true; // 第一种方法
ev.stopPropagation(); // 第二种方法
console.log("mid"); // 兼容写法 主要一些IE浏览器不支持
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancelBubble = true;
} // 阻止默认事件
ev.preventDefault(); // 第一种写法
ev.returnValue = false; // 第二种写法
return false; // 第三种写法
},false);
item.addEventListener("click",function(){
console.log("item");
},false);
事件委托
console.log(ev.target);if(ev.target != this){
console.log();}
相关推荐：
js事件绑定快捷键以ctrl+k为例_javascript技巧
以上就是JS事件绑定与冒泡实例详解的详细内容，更多请关注其它相关文章！