Maison >interface Web >js tutoriel >Explication détaillée de la liaison d'événements JS et des exemples de bulles
Explication détaillée de la liaison d'événements JS et des exemples de bulles
- 小云云original
- 2018-03-13 17:35:281112parcourir
Cet article partage principalement avec vous l'explication détaillée des exemples de liaison et de bouillonnement d'événements JS, j'espère qu'il pourra vous aider.
>
A Apache 阿帕奇服务器 M Mysql P PHP P PERLtext.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);Liaison d'événement<!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>Liaison d'événement et bouillonnement
Événement délégation
<!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>Recommandations associées :
{"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":["米线","青菜","香菇","豆芽"]}]}]}touche de raccourci de liaison d'événement js prenant ctrl+k comme exemple_compétences javascript<!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); jQuery Explication de base de la fonction de liaison d'événementconsole.log(ev.target);if(ev.target != this){
console.log();}Explication détaillée de l'exemple de code de liaison, de déclenchement et de suppression d'événements javascript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'héritage JSArticle suivant：Explication détaillée de l'héritage JS
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript