• day16---Dom绑定时间的方式


    1、Dom绑定时间的方式,可以使用addEventListener,这样控制台中输出的文本不会被覆盖

       <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                #test{
                    background-color: red;
                     300px;
                    height: 400px;
                }
            </style>
        </head>
        <body>
            <div id="test">
                asdf
            </div>
            <script>
                var mydiv=document.getElementById('test');
                /* // console.log(mydiv);
                mydiv.onclick=function(){
                    console.log('asdfg');
                }
                mydiv.onclick=function(){
                    console.log('asdkk');
                } */   //使用该方式,控制台输出内容会覆盖
                mydiv.addEventListener('click',function(){console.log('aaa'),false});
                mydiv.addEventListener('click',function(){console.log('bbb'),false});
                //false代表事件的模型
            </script>
        </body>

    执行结果如下,当点击div时,控制台会输出 aaa,bbb

    2、addEventListener('click',function(){console.log('bbb'),false})

    第三个参数可以为false或true

    当参数为false时,代码如下:

       <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                #main{
                    background-color: red;
                     300px;
                    height: 400px;
                }
                #content{
                    background-color: pink;
                     150px;
                    height: 200px;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div id="content"></div>
            </div>
        </body>
        <script>
            var mymain=document.getElementById("main");
            var mycontent=document.getElementById("content");
            mymain.addEventListener("click",function(){console.log("main")},false);
            mycontent.addEventListener("click",function(){console.log("content")},false);
        </script>

    执行结果如下:当点击content时,控制台输出 content  main;当点击main时,控制台输出 main

    当参数为true时,代码如下:

         mymain.addEventListener("click",function(){console.log("main")},true);
            mycontent.addEventListener("click",function(){console.log("content")},true);

    执行结果如下:点击content时,出现 main content;点击main时,控制台输出main;在此点击content时,控制台输出 main content

  • 相关阅读:
    服务器的小程序,可以通过浏览器访问该服务器自定义的内容
    GUI小程序---理解GUI
    迷你MyBank
    使用Scanner输入数据-读取文本数据
    文件拷贝代码模型
    File文件操作类
    链表
    ThreadLocal类使用理解
    二叉树
    比较器比较对象数组Comparable和Comparator区别
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12607620.html
Copyright © 2020-2023  润新知