![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：事件的知识点其实就那几个， 背也背下来了
Collection
Collection
<!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>下拉菜单</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}a {color: #fff;text-decoration: none;}.clearfix{zoom:1;}.clearfix:after{content: '';clear: both;width: 0;height: 0;visibility: hidden;display: block;}li{list-style: none;}nav{background: #000000;}nav>ul>li{float: left;width: 200px;padding: 10px 0;text-align: center;}nav>ul>li{position: relative;}nav>ul>li>ul{display: none;position: absolute;/*z-index: -1;*/background: #f1f1f1;top: 40px;width: 100%;}nav>ul>li>ul>li{padding: 5px 10px;text-align: center;}nav>ul>li>ul a{color:#000;}</style></head><body><nav class="clearfix"><ul><li><a href="">一级菜单1</a><ul><li><a href="">二级菜单1</a></li><li><a href="">二级菜单1</a></li><li><a href="">二级菜单1</a></li><li><a href="">二级菜单1</a></li></ul></li><li><a href="">一级菜单2</a><ul><li><a href="">二级菜单2</a></li><li><a href="">二级菜单2</a></li><li><a href="">二级菜单2</a></li><li><a href="">二级菜单2</a></li></ul></li><li><a href="">一级菜单3</a></li><li><a href="">一级菜单4</a><ul><li><a href="">二级菜单4</a></li><li><a href="">二级菜单4</a></li><li><a href="">二级菜单4</a></li><li><a href="">二级菜单4</a></li></ul></li></ul></nav><script>const navs = document.querySelectorAll("nav>ul>li");// console.log(navs);//forEach() 用于调用数组的每个元素并传递给函数navs.forEach(function (nav) {nav.addEventListener("mouseover", showMenu);nav.addEventListener("mouseout", hideMenu);});//显示二级菜单function showMenu(ev){if( ev.target.nodeName === "A" && ev.target.nextElementSibling !== null){ev.target.nextElementSibling.style.display = "block";}}//关闭二级菜单function hideMenu(ev) {if( ev.target.nodeName === "A" && ev.target.nextElementSibling !== null){ev.target.nextElementSibling.style.display = "none";}// console.log(ev.children)// if(ev.target.children.length > 1) {// console.log(ev.target);// ev.target.children[1].style.display = "none";// }}</script></body></html>
1、<style>直接写入样式</style>2、<link rel="stylesheet" href="style.css">3、<style>@import url("style.css");@import "style.css";</style>
<!--打开一个网页--><a href="https://www.baidu.com/">百度</a><!--下载文件--><a href="XXX.zip">下载该文档</a><!--发邮件--><a href="mailto: 111111@qq.com">点我发邮件</a><!--打电话--><a href="tel: 18055553333">18055553333</a><!--锚点--><div id="top">111</div><a href="#top">置顶</a>
_blank :在新窗口中打开被链接文档。_self :默认。在相同的框架中打开被链接文档。_parent :在父框架集中打开被链接文档。_top :在整个窗口中打开被链接文档。framename :在指定的框架中打开被链接文档。
position：元素默认在页面中按文档流的顺序进行排列static 默认值。没有定位，元素出现在正常的流中。absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。relative 生成相对定位的元素，相对于其正常位置进行定位。inherit 规定应该从父元素继承 position 属性的值。
<button>按钮1</button><button>按钮2</button><button class="button">按钮3</button><script>//获取满足条件的所有元素 document.querySelectorAll("tag") document.querySelectorAll(".class") document.querySelectorAll("#id")const btn = document.querySelectorAll('button');console.log(btn);//NodeList(2) [button, button]//获取满足调价的第一个元素const btn1 = document.querySelector('button');console.log(btn1);//<button>按钮1</button>//addEventListener(事件类型，事件方法)； event:事件 listener:监听（倾听者）//可以给一个元素多次添加同一个事件，并控制事件触发的阶段const btn2 = document.querySelector(".button");btn2.addEventListener("click", function(e){console.log(e.target);});btn2.addEventListener("click", function(e){console.log("111");})</script>
冒泡：由内层向外层层层触发,false可省略e.addEventListener("click", fun, false);捕获；由外层向内层层层触发e.addEventListener("click", fun, true);
<ul class="weituo"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li></ul><script>// 事件代理： 用父级代理所有子元素以及更下一级的元素上的同名事件document.querySelector(".weituo").addEventListener("click", function(ev){console.log(ev.target);//<li>... 返回的是当前正在触发事件的元素console.log(ev.currentTarget);//<ul>... 返回的是事件绑定者})</script>