JS事件绑定与冒泡实例详解-tutorial js-php.cn

JS事件绑定与冒泡实例详解

小云云

Lepaskan： 2018-03-13 17:35:28

asal

1041 orang telah melayarinya

本文主要和大家分享JS事件绑定与冒泡实例详解，希望能帮助到大家。

XAMPP

A Apache 阿帕奇服务器
M Mysql
P PHP
P PERL

Salin selepas log masuk

JSON

JSON 轻量级的数据交换格式
XML 一种数据交换格式
JSON用来表示对象和数组

var json = &#39;["171204",{"name":"张飞","age":"20"},{"name":"关羽","age":"22"}]&#39;;// 通过JS自带的JSON.parse可以把JSON格式的字符串转化为对象var obj = JSON.parse(json);console.log(obj);

Salin selepas log masuk

模仿外卖页面

<!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 = &#39;{"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":["米线","青菜","香菇","豆芽"]}]}]}&#39;;

        var listObj = JSON.parse(list);
        var body = document.getElementsByTagName(&#39;body&#39;)[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>

Salin selepas log masuk

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>

Salin selepas log masuk

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":["米线","青菜","香菇","豆芽"]}]}]}

Salin selepas log masuk

事件绑定

<!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(&#39;redp&#39;)[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>

Salin selepas log masuk

事件绑定与冒泡

<!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(&#39;box&#39;)[0];        var mid = document.getElementsByClassName(&#39;mid&#39;)[0];        var item = document.getElementsByClassName(&#39;item&#39;)[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);

Salin selepas log masuk

事件委托

console.log(ev.target);if(ev.target != this){
    console.log();}

Salin selepas log masuk

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

JS事件绑定与冒泡实例详解

本文主要和大家分享JS事件绑定与冒泡实例详解，希望能帮助到大家。

XAMPP

JSON

模仿外卖页面

AJAX

ajax.html

text.json

事件绑定

事件绑定与冒泡

事件委托