zoukankan      html  css  js  c++  java
  • 50-window.addEventListener和document.addEventListener区别

    原文:https://blog.csdn.net/MLGB__NIU/article/details/79107984

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <script>
        window.addEventListener('click',function(){
            console.log('window addEventListener');
        },false);
        document.addEventListener('click',function(){
            console.log('document addEventListener')
        },false);
    </script>
    </body>
    </html>
    

      

    界面上点击一个button按钮,button实际上是被body“包裹”起来的,body是被html“包裹”起来的,html是被document“包裹”起来的,document是被window“包裹”起来的。所以,在你的鼠标点下去的时候,最先获得这个点击的是最外面的window,然后经过一系列传递才会传到最后的目标button,当传到button的时候,这个事件又会像水底的泡泡一样慢慢往外层穿出,直到window结束。

    做有积累的事~~
  • 相关阅读:
    【SQL】182. Duplicate Emails
    【SQL】181. Employees Earning More Than Their Managers
    【SQL】180. Consecutive Numbers
    【SQL】178. Rank Scores
    【SQL】177. Nth Highest Salary
    如何处理postman Self-signed SSL certificate blocked错误
    Radio checked 属性
    转成百分比
    内建函数
    队列
  • 原文地址:https://www.cnblogs.com/robinunix/p/13672389.html
Copyright © 2011-2022 走看看