微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 初步理解css定位与事件监听与事件委托（实现简易下拉菜单）

博主信息

博文 11

粉丝 0

访问量 17518

专题推荐

更多>

CSS定位

定位的使用：

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

1. 静态定位

语法：position:static

<body>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 设置静态定位、偏移 */
      position: static;
      top: 20px;
      left: 20px;
    }
    .box2 {
      width: 400px;
      height: 400px;
      background-color: gray;
    }
  </style>
  <div class="box1">1</div>
  <div class="box2">2</div>
</body>

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

2.相对定位

语法：` position:relative`

 <body>
   <style>
     * {
       margin: 0%;
       padding: 0;
     }
     .box1 {
       width: 100px;
       height: 100px;
       border: 1px solid red;
       /* 相对定位、偏移 */
       position: relative;
       top: 20px;
       left: 20px;
     }
     .box2 {
       width: 200px;
       height: 200px;
       background-color: gray;
     }
   </style>
   <div class="box1">1</div>
   <div class="box2">2</div>
 </body>

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

3.绝对定位

语法：position:absolute

<body>
  <style>
    * {
      margin: 0%;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /* 设置绝对定位、偏移 */
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .box2 {
      width: 200px;
      height: 200px;
      background-color: gray;
    }
  </style>
  <div class="box1">1</div>
  <div class="box2">2</div>
</body>

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

4.绝对定位

语法：position:fixed

<body>
  <style>
    .box2 {
      width: 100px;
      height: 100px;
      background-color: #eee;
      position: fixed;
    }
  </style> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  <div class="box2"></div>
  </body>

脱离文档流
不会随着滚动条滚动

定位	脱标否	偏移否	参照
static	否	否
relative	否	是	自身
absolute	是	是	含定位父级元素
fixed	脱	是	浏览器视口

5.定位元素的层叠效果

语法：z-index:值

取值：

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

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

事件

1.什么是事件

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

事件三要素

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

2.事件绑定

行内绑定（元素属性）

<body>
    <input type="button" value="按钮" id="btn" onclick="alert(2)">
</body>
<body>
    <input type="button" value="按钮" id="btn" onclick="f()">
</body>
<script>
    function f(){
        console.log(3);
    }
</script>

动态绑定（节点对象属性）

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        alert(4);
    }
</script>

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

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

事件监听（节点对象方法）

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        alert(5);
    });
</script>

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

移除事件监听

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    function f(){
        alert(5);
    }
    var btn = document.getElementById('btn');
    btn.addEventListener('click',f);
    btn.removeEventListener('click',f);
</script>

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

3.事件的传播

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

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

4.事件委托

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

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

简易下拉菜单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="nav">
      <li><a href="">首页</a></li>
      <li><a href="">视频教程</a></li>
      <li><a href="">入门教程</a></li>
      <li><a href="">社区问答</a></li>
      <li>
        <a href="">技术文章</a>
        <ul>
          <li><a href="">头条</a></li>
          <li><a href="">博客</a></li>
          <li><a href="">PHP教程</a></li>
          <li><a href="">PHP框架</a></li>
          <li><a href="">PHP小知识</a></li>
          <li><a href="">mysql教程</a></li>
          <li><a href="">html教程</a></li>
          <li><a href="">css教程</a></li>
          <li><a href="">js教程</a></li>
          <li><a href="">服务器运维</a></li>
        </ul>
      </li>
      <li>
        <a href="">资源下载</a>
        <ul>
          <li><a href="">PHP工具</a></li>
          <li><a href="">在线工具</a></li>
          <li><a href="">手册下载</a></li>
          <li><a href="">学习课件</a></li>
          <li><a href="">js特效</a></li>
          <li><a href="">后端模板</a></li>
          <li><a href="">网站源码</a></li>
          <li><a href="">类库下载</a></li>
        </ul>
      </li>
      <li><a href="">工具下载</a></li>
      <li><a href="">PHP培训</a></li>
    </ul>
  </body>
</html
<style>
//初始化网页
    * {
  margin: 0;
  padding: 0;
}
//清除a标签默认样式
a {
  display: inline-block;
  text-decoration: none;
  color: #ccc;
  font-size: 14px;
  width: 100px;
  box-sizing: border-box;
  padding-left: 15px;
}
//导航栏样式
#nav {
  height: 50px;
  background-color: black;
  line-height: 50px;
  vertical-align: auto;
}
//清除li标签默认样式
li {
  list-style: none;
  float: left;
  box-sizing: border-box;
}
//相对定位，为次级列表提供定位容器
#nav > li {
  position: relative;
}
//鼠标浮动到a标签上的样式
#nav > li > a:hover {
  color: white;
}
//子菜单的样式，默认不显示
#nav > li > ul {
  position: absolute;
  top: 50px;
  left: -5px;
  border: 1px solid #ccc;
  border-radius: 5%;
  background-color: #eee;
  width: 200px;
  line-height: 30px;
  display: none;
}
</style>
<script>
//获取节点集合
  const navs = document.querySelectorAll("#nav>li");
//遍历集合
  navs.forEach(function (nav) {
    nav.addEventListener("mouseover", show);//监听鼠标移入，绑定事件处理函数
    nav.addEventListener("mouseout", hidden;//监听鼠标移出，绑定事件处理函数
  });
//完善事件处理函数
//显示函数
  function show(ev) {
  //判断是否有子菜单
    if (ev.target.nextElementSibling !== null) {
    //修改节点属性值
      ev.target.nextElementSibling.style.display = "block";
    }
  }
//隐藏函数
  function hidden(ev) {
     //受冒泡影响，需要规避li的影响
    if (ev.target.nextElementSibling !== null && ev.target.nodeName !== "a") {
    //修改节点属性值
      ev.target.nextElementSibling.style.display = "none";
    }
  }
</script>