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

最新推荐文章于 2021-08-05 12:43:50 发布

wangsongll

最新推荐文章于 2021-08-05 12:43:50 发布

阅读量90

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wangsongll/article/details/79592557

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、事件绑定

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

wangsongll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础第十课（事件绑定，事件捕获和冒泡,ajax）

一、事件绑定&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;事件绑定&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫