简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >事件代理冒泡与捕捉，css元素定位，鼠标经过事件实现下拉菜单

事件代理冒泡与捕捉，css元素定位，鼠标经过事件实现下拉菜单

A-.
A-.原创
2020年06月15日 22:57:57934浏览

1、css中的定位：

css样式中的定位大致有4种：静态定位，相对定位，绝对定位，固定定位。

  • 静态定位（position：static）

    一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于 标准流。

  • 相对定位（position：relative）

    相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。

  • 绝对定位（position：absolute）

    如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）。

  • 固定定位（position：fixed）

    相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

2、冒泡与捕捉，事件代理

  • 冒泡与捕捉

    捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
    冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发。
事件触发阶段类型 特征 参数设置
冒泡 由内向外传递 addEventListener(事件类型，事件方法，false），最后一个参数可省略，默认就是冒泡方法
捕获 由外向内传递 addEventListener(事件类型，事件方法，true)

  • 为什么要用事件代理

    在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，100个li就要占用100个内存空间。如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
    事件委托是利用事件的冒泡原理来实现的。

  • 事件监听

    在不使用任何框架的情况下，我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click，focus，blur等；fn是事件触发时将执行的函数方法（function）；第三个参数可以不传，默认是false，这个参数控制是否捕获触发。所以我们只穿两个参数时，这个事件是冒泡传递触发的，当第三个参数存在且为true时，事件是捕获传递触发的。

3、鼠标经过事件实现下拉菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>滑动样式</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  12.         }
  13.         a{
  14.             text-decoration: none;
  15.         }
  16.         body{
  17.             display:static;
  18.         }
  19.         .header{
  20.             width: 100%;
  21.             background: #000;;
  22.         }
  23.         .content{
  24.             margin: 0 auto;
  25.             width: 980px;
  26.         }
  27.         ul,dl{
  28.            list-style: none;
  29.         }
  30.         ul.nav::after{
  31.            content: '';
  32.            display: block;
  33.            width: 100%;
  34.            clear: both;
  35.         }
  36.         .nav>li{
  37.            padding: 0px 20px;
  38.            float: left;
  39.            cursor: pointer;
  40.            position: relative;
  41.         }
  42.         .nav>li a{
  43.             line-height: 80px;
  44.            color: #fff;
  45.         }
  46.         .nav>li:hover{
  47.             background-color: #363c41;
  48.         }
  49.         .nav-active{
  50.             background-color: #363c41;
  51.         }
  52.         .nav-li-chlid{
  53.             display: none;
  54.             position:absolute;
  55.             top: 80px;
  56.             left: 0px;
  57.             width: 200px;
  58.             color: #363c41;
  59.             background-color: #fff;
  60.             box-shadow:0 2px 4px rgba(0,0,0,.12);
  61.             border: rgba(0,0,0,.12) 1px solid;
  62.             animation-name: navLiAnmation;
  63.             animation-duration: 0.3;
  64.             animation-fill-mode: both;
  65.         }
  66.         .nav-li-chlid>dd{
  67.             float: left;
  68.             padding: 10px;
  69.             text-align: center;
  70.             box-sizing: border-box;
  71.             display: inline-block;
  72.             width: 50%;
  73.         }
  74.         .nav-li-chlid>dd a{
  75.             line-height: 30px;
  76.            color: #363c41;
  77.         }
  78.         @keyframes navLiAnimation {
  79.             0%{
  80.                 transform: translate3d(0,30px,0);
  81.                 opacity: .3;
  82.             }
  83.             100%{
  84.                 transform: translate3d(0,0,0);
  85.                 opacity: 1;            
  86.             }
  87.         }
  88.     </style>
  89. </head>
  90. <body>
  91.     <div class="header">
  92.         <ul class="nav content">
  93.             <li>
  94.                 <a href="">首页</a>
  95.             </li>
  96.             <li>
  97.                 <a href="">入门教程</a>
  98.             </li>
  99.             <li>
  100.                 <a href="">社区问答</a>
  101.                 <dl class="nav-li-chlid">
  102.                     <dd>
  103.                         <a>社区问答</a>
  104.                     </dd>
  105.                     <dd>
  106.                         <a>社区问答</a>
  107.                     </dd>
  108.                     <dd>
  109.                         <a>社区问答</a>
  110.                    </dd>
  111.                     <dd>
  112.                         <a>社区问答</a>
  113.                     </dd>
  114.                     <dd>
  115.                         <a>社区问答</a>
  116.                     </dd>
  117.                     <dd>
  118.                         <a>头条</a>
  119.                     </dd>
  120.                 </dl>
  121.             </li>
  122.             <li>
  123.                 <a href="">技术文章</a>
  124.                 <dl class="nav-li-chlid">
  125.                     <dd>
  126.                         <a>技术文章</a>
  127.                     </dd>
  128.                     <dd>
  129.                         <a>技术文章</a>
  130.                     </dd>
  131.                     <dd>
  132.                         <a>技术文章</a>
  133.                    </dd>
  134.                     <dd>
  135.                         <a>技术文章</a>
  136.                     </dd>
  137.                     <dd>
  138.                         <a>头条</a>
  139.                     </dd>
  140.                     <dd>
  141.                         <a>头条</a>
  142.                     </dd>
  143.                 </dl>
  144.             </li>
  145.             <li>
  146.                 <a href="">资料下载</a>
  147.                 <dl class="nav-li-chlid">
  148.                     <dd>
  149.                         <a>资料下载</a>
  150.                     </dd>
  151.                     <dd>
  152.                         <a>资料下载</a>
  153.                     </dd>
  154.                     <dd>
  155.                         <a>资料下载</a>
  156.                    </dd>
  157.                     <dd>
  158.                         <a>资料下载</a>
  159.                     </dd>
  160.                     <dd>
  161.                         <a>资料下载</a>
  162.                     </dd>
  163.                     <dd>
  164.                         <a>资料下载</a>
  165.                     </dd>
  166.                 </dl>
  167.             </li>
  168.             <li>
  169.                 <a href="">php培训</a>
  170.                 <dl class="nav-li-chlid">
  171.                     <dd>
  172.                         <a>php培训</a>
  173.                     </dd>
  174.                     <dd>
  175.                         <a>php培训</a>
  176.                     </dd>
  177.                     <dd>
  178.                         <a>php培训</a>
  179.                    </dd>
  180.                     <dd>
  181.                         <a>php培训</a>
  182.                     </dd>
  183.                     <dd>
  184.                         <a>php培训</a>
  185.                     </dd>
  186.                     <dd>
  187.                         <a>php培训</a>
  188.                     </dd>
  189.                 </dl>
  190.             </li>
  191.         </ul>
  192.     </div>
  193. </body>
  194. <script>
  195.     const navs = document.querySelectorAll('.nav > li');
  196.     navs.forEach(function(nav){
  197.         nav.addEventListener('mouseover',showSubMenu);
  198.         nav.addEventListener('mouseout',closeSubMenu)
  199.     });
  200.      // 显示子菜单
  201.     function showSubMenu(event){
  202.         console.log(event.target)
  203.         //target是指触发事件的元素，currentTarget是指绑定该触发事件的元素
  204.         //搞清楚node节点与节点元素，nextElementSibling获取到的是相邻的兄弟节点元素，nextSibling获取到的是相邻的兄弟节点
  205.         //其中通过firstChild和lastChild获得HTML Node是不可取的。因为，根据浏览器的不同，firstChild有可能返回parentObj的属性对象。
  207.         if(event.target.nextElementSibling!==null){
  208.             event.target.nextElementSibling.style.display = 'block'
  209.         }
  210.     }
  211. // 关掉子菜单
  212.     function closeSubMenu(event){
  213.         if(event.target.nodeName==='A' && event.target.nextElementSibling!==null){
  214.             event.target.nextElementSibling.style.display = 'none'
  215.         }
  216.     }
  217. </script>
  218. </html>
上一条：导航菜单栏下一条：作业 03
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多