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

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

XAMPP

A Apache 阿帕奇服务器M MysqlP PHPP PERL

登录后复制

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);

登录后复制

模仿外卖页面

nbsp;html>                                        .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;            }                                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);            }        }    

登录后复制

AJAX

ajax.html

nbsp;html>                                            // 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);            }        }    

登录后复制

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

登录后复制

事件绑定

nbsp;html>                                        .redp{                width:200px;                height:200px;                background-color:red;            }                        
                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);    

登录后复制

事件绑定与冒泡

nbsp;html>                                        .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;            }                        
            
                
                
                                    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);

登录后复制

事件委托

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

登录后复制

相关推荐：

js事件绑定快捷键以ctrl+k为例_javascript技巧

jQuery事件绑定功能基础讲解

javascript事件绑定、触发和删除示例代码详解

以上就是JS事件绑定与冒泡实例详解的详细内容，更多请关注【创想鸟】其它相关文章！