Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 初步理解css定位与事件监听与事件委托（实现简易下拉菜单）
Blogger Information
Blog 11
fans 0
comment 0
visits 13364
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
初步理解css定位与事件监听与事件委托（实现简易下拉菜单）
Blueprint
Original
1185 people have browsed it

CSS定位

定位的使用：

  • 4种定位方式：静态(static)、相对(relative)、绝对(absolute)、固定(fixed)
  • 定位的偏移属性：left/right/top/bottom

1. 静态定位

语法：position:static

  1. <body>
  2.   <style>
  3.     .box1 {
  4.       width: 200px;
  5.       height: 200px;
  6.       background-color: red;
  7.       /* 设置静态定位、偏移 */
  8.       position: static;
  9.       top: 20px;
  10.       left: 20px;
  11.     }
  12.     .box2 {
  13.       width: 400px;
  14.       height: 400px;
  15.       background-color: gray;
  16.     }
  17.   </style>
  18.   <div class="box1">1</div>
  19.   <div class="box2">2</div>
  20. </body>

标准流元素设置了静态定位和不设置是一样的，且偏移对静态定位无效，对其他元素也没有影响

2.相对定位

  1. 语法：` position:relative`
  1.  <body>
  2.    <style>
  3.      * {
  4.        margin: 0%;
  5.        padding: 0;
  6.      }
  7.      .box1 {
  8.        width: 100px;
  9.        height: 100px;
  10.        border: 1px solid red;
  11.        /* 相对定位、偏移 */
  12.        position: relative;
  13.        top: 20px;
  14.        left: 20px;
  15.      }
  16.      .box2 {
  17.        width: 200px;
  18.        height: 200px;
  19.        background-color: gray;
  20.      }
  21.    </style>
  22.    <div class="box1">1</div>
  23.    <div class="box2">2</div>
  24.  </body>

  • 相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置
  • 不会对标准流的元素造成影响
  • 可以覆盖标准流的元素

3.绝对定位

语法：position:absolute

  1. <body>
  2.   <style>
  3.     * {
  4.       margin: 0%;
  5.       padding: 0;
  6.     }
  7.     .box1 {
  8.       width: 100px;
  9.       height: 100px;
  10.       border: 1px solid red;
  11.       /* 设置绝对定位、偏移 */
  12.       position: absolute;
  13.       top: 20px;
  14.       left: 20px;
  15.     }
  16.     .box2 {
  17.       width: 200px;
  18.       height: 200px;
  19.       background-color: gray;
  20.     }
  21.   </style>
  22.   <div class="box1">1</div>
  23.   <div class="box2">2</div>
  24. </body>

  • 偏移位置参考设置过定位的父系元素，父系元素不设定，以html为参考

4.绝对定位

语法：position:fixed

  1. <body>
  2.   <style>
  3.     .box2 {
  4.       width: 100px;
  5.       height: 100px;
  6.       background-color: #eee;
  7.       position: fixed;
  8.     }
  9.   </style> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  10.   <div class="box2"></div>
  11.   </body>

  • 脱离文档流
  • 不会随着滚动条滚动
定位 脱标否 偏移否 参照
static 否 否
relative 否 是 自身
absolute 是 是 含定位父级元素
fixed 脱 是 浏览器视口

5.定位元素的层叠效果

语法：z-index:值

取值：

  • 数字
  • auto（默认值，与父级相同）

z-index只针对定位元素有效果（但不包括静态定位）
z-index值越大，层级越高

事件

1.什么是事件

一种“触发”到“响应”的机制
用户的行为 + 浏览器感知（捕获）到用户的行为+事件处理程序

事件三要素

  • 事件源：触发事件的元素
  • 事件类型：事件触发的方式（如，鼠标点击、移动或键盘点击等）
  • 事件的处理程序：事件触发后腰执行的代码（函数形式）

2.事件绑定

  • 行内绑定（元素属性）
  1. <body>
  2.     <input type="button" value="按钮" id="btn" onclick="alert(2)">
  3. </body>
  5. <body>
  6.     <input type="button" value="按钮" id="btn" onclick="f()">
  7. </body>
  8. <script>
  9.     function f(){
  10.         console.log(3);
  11.     }
  12. </script>
  • 动态绑定（节点对象属性）
  1. <body>
  2.     <input type="button" value="按钮" id="btn">
  3. </body>
  4. <script>
  5.     var btn = document.getElementById('btn');
  6.     btn.onclick = function(){
  7.         alert(4);
  8.     }
  9. </script>

获取节点对象，然后修改节点对象的属性值

以上两种事件绑定，需要在事件名称前加on

  • 事件监听（节点对象方法）
  1. <body>
  2.     <input type="button" value="按钮" id="btn">
  3. </body>
  4. <script>
  5.     var btn = document.getElementById('btn');
  6.     btn.addEventListener('click',function(){
  7.         alert(5);
  8.     });
  9. </script>

每一个节点对象都提供了 addEventListener 方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序；
事件监听可以多次执行一个对象的同名事件。

  • 移除事件监听
  1. <body>
  2.     <input type="button" value="按钮" id="btn">
  3. </body>
  4. <script>
  5.     function f(){
  6.         alert(5);
  7.     }
  8.     var btn = document.getElementById('btn');
  9.     btn.addEventListener('click',f);
  10.     btn.removeEventListener('click',f);
  11. </script>

removeEventListener方法移除的监听函数，
必须与对应的addEventListener方法的参数完全一致，
而且必须在同一个元素节点，否则无效

3.事件的传播

事件冒泡：当多个嵌套的标签。都绑定了同名事件，点击内部的标签，会间接触发上层的事件。（三种事件绑定方式默认监听冒泡阶段，由内向外）

事件捕获：与冒泡的传播顺序相反，有外向内触发，捕获阶段只能通过addEventListener方法进行设置（第三个参数设置为true）

4.事件委托

event.target:事件触发的节点
event.currentTarget:事件绑定的节点

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父
节点上，由父节点的监听函数统一处理多个子元素的事件。
这种方法叫做事件的代理也叫 事件委托 也有人称为 事件代理

简易下拉菜单

  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <ul id="nav">
  10.       <li><a href="">首页</a></li>
  11.       <li><a href="">视频教程</a></li>
  12.       <li><a href="">入门教程</a></li>
  13.       <li><a href="">社区问答</a></li>
  14.       <li>
  15.         <a href="">技术文章</a>
  16.         <ul>
  17.           <li><a href="">头条</a></li>
  18.           <li><a href="">博客</a></li>
  19.           <li><a href="">PHP教程</a></li>
  20.           <li><a href="">PHP框架</a></li>
  21.           <li><a href="">PHP小知识</a></li>
  22.           <li><a href="">mysql教程</a></li>
  23.           <li><a href="">html教程</a></li>
  24.           <li><a href="">css教程</a></li>
  25.           <li><a href="">js教程</a></li>
  26.           <li><a href="">服务器运维</a></li>
  27.         </ul>
  28.       </li>
  29.       <li>
  30.         <a href="">资源下载</a>
  32.         <ul>
  33.           <li><a href="">PHP工具</a></li>
  34.           <li><a href="">在线工具</a></li>
  35.           <li><a href="">手册下载</a></li>
  36.           <li><a href="">学习课件</a></li>
  37.           <li><a href="">js特效</a></li>
  38.           <li><a href="">后端模板</a></li>
  39.           <li><a href="">网站源码</a></li>
  40.           <li><a href="">类库下载</a></li>
  41.         </ul>
  42.       </li>
  43.       <li><a href="">工具下载</a></li>
  44.       <li><a href="">PHP培训</a></li>
  45.     </ul>
  46.   </body>
  47. </html
  50. <style>
  51. //初始化网页
  52.     * {
  53.   margin: 0;
  54.   padding: 0;
  55. }
  56. //清除a标签默认样式
  57. a {
  58.   display: inline-block;
  59.   text-decoration: none;
  60.   color: #ccc;
  61.   font-size: 14px;
  62.   width: 100px;
  63.   box-sizing: border-box;
  64.   padding-left: 15px;
  65. }
  67. //导航栏样式
  68. #nav {
  69.   height: 50px;
  70.   background-color: black;
  71.   line-height: 50px;
  72.   vertical-align: auto;
  73. }
  74. //清除li标签默认样式
  75. li {
  76.   list-style: none;
  78.   float: left;
  80.   box-sizing: border-box;
  81. }
  83. //相对定位，为次级列表提供定位容器
  84. #nav > li {
  85.   position: relative;
  86. }
  87. //鼠标浮动到a标签上的样式
  88. #nav > li > a:hover {
  89.   color: white;
  90. }
  91. //子菜单的样式，默认不显示
  92. #nav > li > ul {
  93.   position: absolute;
  94.   top: 50px;
  95.   left: -5px;
  96.   border: 1px solid #ccc;
  97.   border-radius: 5%;
  98.   background-color: #eee;
  99.   width: 200px;
  100.   line-height: 30px;
  102.   display: none;
  103. }
  106. </style>
  108. <script>
  109. //获取节点集合
  110.   const navs = document.querySelectorAll("#nav>li");
  111. //遍历集合
  112.   navs.forEach(function (nav) {
  113.     nav.addEventListener("mouseover", show);//监听鼠标移入，绑定事件处理函数
  114.     nav.addEventListener("mouseout", hidden;//监听鼠标移出，绑定事件处理函数
  115.   });
  117. //完善事件处理函数
  118. //显示函数
  119.   function show(ev) {
  120.   //判断是否有子菜单
  121.     if (ev.target.nextElementSibling !== null) {
  122.     //修改节点属性值
  123.       ev.target.nextElementSibling.style.display = "block";
  124.     }
  125.   }
  126. //隐藏函数
  127.   function hidden(ev) {
  128.      //受冒泡影响，需要规避li的影响
  129.     if (ev.target.nextElementSibling !== null && ev.target.nodeName !== "a") {
  130.     //修改节点属性值
  131.       ev.target.nextElementSibling.style.display = "none";
  132.     }
  133.   }
  134. </script>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实这个下拉菜单，已经相当专业了， 不算简易了， 许多 商业项目也没过如此，差别仅是样式好看些， 内部逻辑是一样的， 能完全理解这里用到技术， 对于初学者来说， 已经不错了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post