一、事件綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件綁定</title>
<style type="text/css">
.redDiv{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="redDiv">
</div>
</body>
<script type="text/javascript">
var redDiv = document.getElementsByClassName("redDiv")[0];
redDiv.addEventListener("click",f1(),false);
redDiv.addEventListener("click",f2(),false);
redDiv.removeEventListener("click",f2,false);
function f2(){
console.log(3);
}
function f1(){
console.log(1);
}
</script>
</html>
二、事件捕獲和冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件捕獲和冒泡</title>
<style type="text/css">
.box{
width: 600px;
height: 500px;
margin: 0px auto;
background-color: rebeccapurple;
padding-top: 100px;
}
.mid{
width: 400px;
height: 300px;
margin: 0px auto;
padding-top: 100px;
background-color: darkcyan;
}
.item{
width: 200px;
height: 200px;
margin: 0px auto;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box">
<div class="mid">
<div class="item">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var box =document.getElementsByClassName("box")[0];
var mid =document.getElementsByClassName("mid")[0];
var item =document.getElementsByClassName("item")[0];
box.addEventListener("click",function(){
console.log("明爺")
},false);
mid.addEventListener("click",function(){
console.log("明爸")
},false);
item.addEventListener("click",function(ev){
ev.cancelBubble=true;
ev.stopPropagation();
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancelBubble = true;
}
console.log("小明")
ev.preventDefault();
ev.returnValue = false;
return false;
},false);
</script>
</html>
三、AJAX
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open("GET","test.json",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState==4&& request.status==200){
var reon = JSON.parse(request.responseText);
console.log(reon.address);
}
}
</script>
