zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    远程连接桌面报:这可能是由于credssp加密oracle修正
    MVC断点续传
    [COCI2011-2012#5] POPLOCAVANJE 后缀自动机
    [SDOI2016]生成魔咒 后缀自动机
    [JSOI2009]密码 AC自动机
    CF17E Palisection manacher
    [JSOI2007]字符加密 后缀数组
    [POI2012]OKR-A Horrible Poem hash
    [APIO2014]回文串 manacher 后缀数组
    [SHOI2011]双倍回文 manacher
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12607620.html
Copyright © 2011-2022 走看看