首页 > js教程 > 正文

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

原创 2018-03-13 17:35:28 0 2


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

XAMPP

A Apache 阿帕奇服务器
M Mysql
P PHP
P 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);

模仿外卖页面

<!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 = '{"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);
            }
        }
    </script>
</html>

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>

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

事件绑定

<!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('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);    </script></html>

事件绑定与冒泡

<!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('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事件绑定与冒泡实例详解的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript 详解 实例
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节