您的位置：首页 > Web前端 > HTML

HTML基础第十课（事件绑定，事件捕获和冒泡,ajax）

2018-03-17 15:29 459 查看

一、事件绑定

<!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];

//事件绑定 -可以给一个元素绑定多个相同事件
//addEventListener(,,)
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;//1
ev.stopPropagation();//2

//兼容的写法
if(ev.stopPropagation){
ev.stopPropagation();//1
}else{
ev.cancelBubble = true;//2
}
console.log("小明")

//阻止默认事件 三种
ev.preventDefault();
ev.returnValue = false;
return false;
},false);

//事件委托

</script>
</html>

三、AJAX

<script type="text/javascript">
//1.创建请求对象
var request = new XMLHttpRequest();
//2.设置请求并发送  true:异步处理
request.open("GET","test.json",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState==4&& request.status==200){
//请求成功
//            console.log(request.responseText);
var reon = JSON.parse(request.responseText);
console.log(reon.address);
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航