• JavaScript的学习之BOM和DOM，就这一篇就OK了！（超详细）

    目录

    Day28 JavaScript(2)

    1、BOM对象

    1.1 window对象

    1.2 Location ( 地址栏)对象

    1.3 本地存储对象

    2、DOM对象(JS核心)

    2.1 查找标签

    2.2 绑定事件

    2.3 操作标签

    2.4 常用事件

    Day28 JavaScript(2)

    1、BOM对象

    BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。

    1.1 window对象

    • 窗口方法

    1. // BOM  Browser object model 浏览器对象模型
    2. ​
    3. // js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
    4. console.log( window );
    5. ​
    6. // alert()  弹出一个警告框
    7. window.alert("hello");
    8. ​
    9. //confirm  弹出一个确认框,点击确认,返回true, 点击取消,返回false
    10. var ret = confirm("您确认要删除当前文件么?");
    11. console.log( ret  );
    12. ​
    13. // 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
    14. var ret = prompt("请输入一个内容","默认值");
    15. console.log( ret );
    16. ​
    17. // close() 关闭当前浏览器窗口
    18. window.close();
    19. ​
    20. //打开一个新的浏览器窗口
    21. window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px";
    22.             

    • 定时方法

    setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次。 ​

    1. // 设置循环定时器
    2. var ID = window.setInterval(code,millisec)   // 每millisec毫秒执行一次code
    3. // 取消循环定时器
    4. window.clearInterval(ID);
    5. ​
    6. // 设置单次定时器
    7. var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
    8. // 取消单次定时器
    9. window.clearTimeout(ID);

    其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。

    显示时间案例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. ​
    9. <input id="ID1" type="text" >
    10. <button onclick="begin()">开始button>
    11. <button onclick="end()">停止button>
    12. ​
    13. <script>
    14.     function showTime(){
    15.            var nowd2=new Date().toLocaleString();
    16.            var temp=document.getElementById("ID1");
    17.            temp.value=nowd2;
    18. ​
    19.     }
    20.     var ID;
    21.     function begin(){
    22.         if (ID==undefined){
    23.              showTime();
    24.              ID=setInterval(showTime,1000);
    25.         }
    26.     }
    27.     function end(){
    28.         clearInterval(ID);
    29.         ID=undefined;
    30.     }
    31. ​
    32. script>
    33. ​
    34. body>
    35. html>

    1.2 Location ( 地址栏)对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <button onclick="func1()">查看Location对象button>
    9. <button onclick="func2()">跳转到百度button>
    10. <button onclick="func3()">F5button>
    11. <script>
    12.     function func1(){
    13.         console.log( location );
    14.     }
    15.     // 地址栏对象控制和操作地址栏
    16.     // 所谓的地址就是当前页面所在地址
    17.     // 地址结构:
    18.     // 协议://域名:端口/路径/文件名?查询字符串#锚点
    19.     console.log( `协议=>${location.protocol}` );
    20.     console.log( `端口=>${location.port}` );
    21.     console.log( `域名=>${location.hostname}` );
    22.     console.log( `域名:端口=>${location.host}` );
    23.     console.log( `路径=>${location.pathname}` );
    24.     console.log( `查询字符串=>${location.search}` );
    25.     console.log(`完整的地址信息=>${location.href}`);
    26. ​
    27.     function func2(){
    28.         // location.href="http://www.baidu.com"; // 页面跳转
    29.         location.assign("http://www.baidu.com"); // 页面跳转
    30.     }
    31. ​
    32.     function func3(){
    33.         location.reload(); // 刷新页面
    34.     }
    35. script>
    36. body>
    37. html>

    1.3 本地存储对象

    使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。

    1. localStorage    本地永久存储
    2.   localStorage.setItem("变量名","变量值");   保存一个数据到存储对象
    3.   localStorage.变量名 = 变量值               保存一个数据到存储对象
    4. ​
    5.   localStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
    6.   localStorage.变量名              获取存储对象中保存的指定变量对应的数据
    7. ​
    8.   localStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
    9.   localStorage.clear()               从存储对象中删除所有数据
    10. ​
    11. sessionStorage  本地会话存储
    12.   sessionStorage.setItem("变量名","变量值");   保存一个数据到存储对象
    13.   sessionStorage.变量名 = 变量值               保存一个数据到存储对象
    14. ​
    15.   sessionStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
    16.   sessionStorage.变量名              获取存储对象中保存的指定变量对应的数据
    17. ​
    18.   sessionStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
    19.   sessionStorage.clear()               从存储对象中删除所有数据

    练习：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <button onclick="func1()">设置一个数据button>
    9. <button onclick="func2()">查看一个数据button>
    10. <script>
    11.     function func1(){
    12.         localStorage.setItem("name","yuan");
    13.     }
    14. ​
    15.     function func2(){
    16.         var ret = localStorage.getItem("name");
    17.         console.log(ret);
    18.     }
    19. script>
    20. body>
    21. html>

    localStorage和sessionStorage的区别：

    1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

    2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

    3、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

    4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

     

    2、DOM对象(JS核心)

    DOM document Object Model 文档对象模型

    1. // 整个html文档,会保存一个文档对象document
    2. // console.log( document ); // 获取当前文档的对象

     

    2.1 查找标签

    • 直接查找标签

    1. document.getElementsByTagName("标签名")
    2. document.getElementById("id值")
    3. document.getElementsByClassName("类名")

    1、方法的返回值是dom对象还是数组

    2、document对象可以是任意dom对象，将查询范围限制在当前dom对象

    • 导航查找标签

    1. elementNode.parentElement           // 父节点标签元素
    2. elementNode.children                // 所有子标签
    3. elementNode.firstElementChild       // 第一个子元素节点 (不包括文本节点)
    4. elementNode.lastElementChild        // 最后一个子标签元素
    5. elementNode.nextElementSibling     // 下一个兄弟标签元素
    6. elementNode.previousElementSibling  // 上一个兄弟标签元素

    • CSS选择器查找

    1. document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
    2. document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. ​
    9. ​
    10. <div id="i1">DIV1div>
    11. ​
    12. <div class="c1">DIVdiv>
    13. <div class="c1">DIVdiv>
    14. <div class="c1">DIVdiv>
    15. ​
    16. ​
    17. <div class="outer">
    18.     <div class="c1">itemdiv>
    19. div>
    20. ​
    21. ​
    22. <div class="c2">
    23.     <div class="c3">
    24.         <ul class="c4">
    25.             <li class="c5" id="i2">111li>
    26.             <li>222li>
    27.             <li>333li>
    28.         ul>
    29.     div>
    30. div>
    31. ​
    32. <script>
    33.  
    34.    // 直接查找
    35. ​
    36.    var ele = document.getElementById("i1");  // ele就是一个dom对象
    37.    console.log(ele);
    38. ​
    39.    var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]
    40.    console.log(eles);
    41. ​
    42.    var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]
    43.    console.log(eles2);
    44. ​
    45.    var outer = document.getElementsByClassName("outer")[0];
    46.    var te = outer.getElementsByClassName("c1");
    47.    console.log(te);
    48. ​
    49.    // 导航查找
    50. ​
    51.     var c5 = document.getElementsByClassName("c5")[0];
    52.     console.log(c5);  // c5是一个DOM对象
    53. ​
    54.     console.log(c5.parentElement.lastElementChild);  // 返回值是dom对象
    55.     console.log(c5.parentElement.children);  // 返回值是dom对象数组
    56.     console.log(c5.nextElementSibling.nextElementSibling);
    57.     console.log(c5.parentElement.children);
    58. ​
    59.     // css选择器
    60. ​
    61.     var dom = document.querySelector(".c2 .c3 .c5");
    62.     console.log(":::",dom);
    63. ​
    64.     var doms = document.querySelectorAll("ul li");
    65.     console.log(":::",doms);
    66.     
    67. script>
    68. ​
    69. body>
    70. html>
    ​

    2.2 绑定事件

    • 静态绑定 ：直接把事件写在标签元素中。

    1. <div id="div" onclick="foo(this)">clickdiv>
    2. ​
    3. <script>
    4.     function foo(self){           // 形参不能是this;
    5.         console.log("foo函数");
    6.         console.log(self);   
    7.     }
    8. script>

     

    • 动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定。

    1. <p id="i1">试一试!p>
    2. ​
    3. <script>
    4. ​
    5.     var ele=document.getElementById("i1");
    6. ​
    7.     ele.onclick=function(){
    8.         console.log("ok");
    9.         console.log(this);    // this直接用
    10.     };
    11. ​
    12. script>

    一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

    多个标签绑定事件

    1. <ul>
    2.     <li>111li>
    3.     <li>222li>
    4.     <li>333li>
    5.     <li>444li>
    6.     <li>555li>
    7. ul>
    8. ​
    9. ​
    10. <script>
    11. ​
    12.     var eles = document.querySelectorAll("ul li");
    13.     for(var i=0;ilength;i++){
    14.         eles[i].onclick = function (){
    15.             console.log(this.innerHTML)
    16.             // console.log(eles[i].innerHTML)  // 结果？
    17.         }
    18.     }
    19. ​
    20. script>

     

    2.3 操作标签

    <标签名 属性1=“属性值1” 属性2=“属性值2”……>文本标签名>

    • 文本操作

    1. <div class="c1"><span>clickspan>div>
    2. ​
    3. <script>
    4. ​
    5.     var ele =document.querySelector(".c1");
    6. ​
    7.     ele.onclick = function (){
    8.         // 查看标签文本
    9.         console.log(this.innerHTML)
    10.         console.log(this.innerText)
    11.     }
    12. ​
    13.     ele.ondblclick = function (){
    14.         // 设置标签文本
    15.         this.innerHTML = "yuan"
    16.         //this.innerText = "yuan"
    17.     }
    18. ​
    19. script>

    • value操作

    像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定

    1.     <input type="text" id="i1" value="yuan">
    2.     <textarea name="" id="i2" cols="30" rows="10">123textarea>
    3.     <select  id="i3">
    4.         <option value="hebei">河北省option>
    5.         <option value="hubei">湖北省option>
    6.         <option value="guangdong">广东省option>
    7.     select>
    8. ​
    9. <script>
    10. ​
    11.     // input标签
    12.     var ele1 =document.getElementById("i1");
    13.     console.log(ele1.value);
    14.     ele1.onmouseover = function (){
    15.         this.value = "alvin"
    16.     }
    17. ​
    18.     // textarea标签
    19.     var ele2 =document.getElementById("i2");
    20.     console.log(ele2.value);
    21.     ele2.onmouseover = function (){
    22.         this.innerText = "welcome to JS world！"
    23.         this.value = "welcome to JS world！"
    24.     }
    25.     // select标签
    26.     var ele3 =document.getElementById("i3");
    27.     console.log(ele3.value);
    28.     ele3.value= "hubei"
    29. ​
    30. script>

    • css样式操作

    1. <p id="i1">Hello world!p>
    2. ​
    3. <script>
    4.     var ele = document.getElementById("i1");
    5.     ele.onclick = function (){
    6.         this.style.color = "red"
    7.     }
    8. script>

    属性操作

    1. elementNode.setAttribute("属性名","属性值")     //设置属性
    2. elementNode.getAttribute("属性名")       
    3. elementNode.removeAttribute("属性名");

    并不是所有属性都可以像value那样操作。

    • class属性操作**

    1. elementNode.className
    2. elementNode.classList.add
    3. elementNode.classList.remove

    案例：tab切换

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7.     <style>
    8.         *{
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12. ​
    13.         .tab{
    14.             width: 800px;
    15.             height: 300px;
    16.             /*border: 1px solid red;*/
    17.             margin: 200px auto;
    18.         }
    19. ​
    20.         .tab ul{
    21.             list-style: none;
    22.         }
    23. ​
    24.         .tab-title{
    25.             background-color: #f7f7f7;
    26.             border: 1px solid #eee;
    27.             border-bottom: 1px solid #e4393c;
    28.         }
    29. ​
    30.         .tab .tab-title li{
    31.             display: inline-block;
    32.             padding: 10px 25px;
    33.             font-size: 14px;
    34.         }
    35. ​
    36.         li.current {
    37.             background-color: #e4393c;
    38.             color: #fff;
    39.             cursor: default;
    40.         }
    41. ​
    42.         .hide{
    43.             display: none;
    44.         }
    45. ​
    46. ​
    47.     style>
    48. head>
    49. <body>
    50. ​
    51. ​
    52. <div class="tab">
    53.     <ul class="tab-title">
    54.         <li class="current" index="0">商品介绍li>
    55.         <li class="" index="1">规格与包装li>
    56.         <li class="" index="2">售后保障li>
    57.         <li class="" index="3">商品评价li>
    58.     ul>
    59. ​
    60.     <ul class="tab-content">
    61.         <li>商品介绍...li>
    62.         <li class="hide">规格与包装...li>
    63.         <li class="hide">售后保障...li>
    64.         <li class="hide">商品评价...li>
    65.     ul>
    66. div>
    67. ​
    68. ​
    69. <script>
    70.      var titles = document.querySelectorAll(".tab-title li");
    71.      var contents = document.querySelectorAll(".tab-content li");
    72.      
    73.      for (var i = 0;ilength;i++){
    74.          
    75.          titles[i].onclick = function () {
    76.              // (1) 触发事件标签拥有current样式
    77.              for (var j = 0;jlength;j++){
    78.                  titles[j].classList.remove("current")
    79.              }
    80. ​
    81.              console.log(this);
    82.              this.classList.add("current");
    83. ​
    84.              // (2) 显示点击title对应的详情内容
    85.              var index = this.getAttribute("index");
    86.              // console.log(this.getAttribute("index"));
    87.              // console.log(contents[index]);
    88. ​
    89. ​
    90.              for (var z = 0;zlength;z++){
    91.                  contents[z].classList.add("hide");
    92.              }
    93. ​
    94.              contents[index].classList.remove("hide");
    95.              
    96.          }
    97.          
    98.      } 
    99. ​
    100. script>
    101. ​
    102. body>
    103. html>

    • 节点操作

    1. // somenode代指：父标签且是一个dom对象（利用document找到父标签）
    2. ​
    3. // 创建节点：
    4. document.createElement("标签名")
    5. // 插入节点
    6. somenode.appendChild(newnode)             // 追加一个子节点（作为最后的子节点） 
    7. somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
    8. // 删除节点
    9. somenode.removeChild()：获得要删除的元素，通过父元素调用删除
    10. //替换节点
    11. somenode.replaceChild(newnode, 某个节点);

    案例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. ​
    9. ​
    10. <button class="add_btn">添加节点button>
    11. <button class="del_btn">删除节点button>
    12. <button class="replace_btn">替换节点button>
    13. <div class="c1">
    14.     <h3>hello JS!h3>
    15.     <h3 class="c2">hello worldh3>
    16. div>
    17. ​
    18. ​
    19. <script>
    20. ​
    21.     var add_btn = document.querySelector(".add_btn");
    22.     var del_btn = document.querySelector(".del_btn");
    23.     var replace_btn = document.querySelector(".replace_btn");
    24. ​
    25.     var c1 = document.querySelector(".c1");
    26.     var c2 = document.querySelector(".c2");
    27.     
    28.     add_btn.onclick = function () {
    29.         // 创建节点
    30. ​
    31.         var ele = document.createElement("img");  // 
    32.         ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg"
    33.         console.log(ele);
    34. ​
    35. ​
    36.         // 添加节点
    37.         // c1.appendChild(ele);
    38. ​
    39.         c1.insertBefore(ele, c2)
    40. ​
    41.     };
    42. ​
    43. ​
    44.     del_btn.onclick = function () {
    45.         // 删除子节点
    46.         c1.removeChild(c2);
    47.     };
    48. ​
    49. ​
    50.     replace_btn.onclick = function () {
    51. ​
    52.         // 创建替换节点
    53. ​
    54.         var ele = document.createElement("img");  // 
    55.         ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg"
    56.         console.log(ele);
    57. ​
    58.         // 替换节点
    59.         c1.replaceChild(ele, c2);
    60. ​
    61.     }
    62. script>
    63. ​
    64. body>
    65. html>

    2.4 常用事件

    • onload事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7. ​
    8.     <script>
    9.        window.onload = function (){
    10.             ele = document.getElementById("i1")
    11.             console.log(ele.innerHTML);
    12.        }
    13.     script>
    14.     
    15. head>
    16. <body>
    17. ​
    18. <div id="i1">yuandiv>
    19. ​
    20. body>
    21. html>

    • onsubmit事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7. head>
    8. <body>
    9. ​
    10. <form action="" id="i1">
    11.      用户名：<input type="text">
    12.      密码：  <input type="password">
    13.     <input type="submit">
    14. form>
    15. ​
    16. ​
    17. <script>
    18. ​
    19.      var ele = document.getElementById("i1");
    20.      var user = document.querySelector("#i1 [type=text]")
    21.      var pwd = document.querySelector("#i1 [type=password]")
    22.      ele.onsubmit = function (e){
    23.            console.log(user.value);
    24.            console.log(pwd.value);
    25. ​
    26.             return false;    // 终止事件执行
    27.            // e.preventDefault() // 阻止元素默认行为
    28.      }
    29. ​
    30. script>
    31. body>
    32. html>

    • onchange事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. ​
    7. head>
    8. <body>
    9. ​
    10. <select name="provonce" id="s1">
    11.     <option value="hebei">请选择省份option>
    12.     <option value="hubei">湖北省option>
    13.     <option value="hunan">湖南省option>
    14.     <option value="hebei">河北省option>
    15. select>
    16. ​
    17. <select name="provonce" id="s2">
    18.     <option value="hebei">请选择城市option>
    19. ​
    20. select>
    21. ​
    22. <script>
    23. ​
    24.    var  data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};
    25.    console.log(data);
    26.    var ele =  document.getElementById("s1");
    27.    var ele2 =  document.getElementById("s2");
    28.    ele.onchange=function () {
    29.        console.log(this.value);
    30.        var citys = data[this.value];
    31.        console.log(citys);
    32.        // 清空操作
    33.        ele2.options.length=1;
    34.        // 创建标签
    35.        for (var i=0;ilength;i++){
    36.            var option =  document.createElement("option"); // 
    37.            option.innerHTML=citys[i];
    38.            ele2.appendChild(option)
    39.        }
    40.    }
    41. ​
    42. script>
    43. ​
    44. ​
    45. body>
    46. html>

    • onmouse事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         #container{
    8.             width: 300px;
    9.         }
    10.         #title{
    11.             cursor: pointer;
    12.             background: #ccc;
    13.         }
    14.        #list{
    15.            display: none;
    16.            background:#fff;
    17.        }
    18. ​
    19.         #list div{
    20.             line-height: 50px;
    21.         }
    22.         #list  .item1{
    23.             background-color: green;
    24.         }
    25. ​
    26.          #list  .item2{
    27.             background-color: rebeccapurple;
    28.         }
    29. ​
    30.          #list  .item3{
    31.             background-color: lemonchiffon;
    32.         }
    33. ​
    34. ​
    35.     style>
    36. head>
    37. <body>
    38. <div id="container">
    39.         <div id="title">使用了mouseout事件↓div>
    40.         <div id="list">
    41.                 <div class="item1">第一行div>
    42.                 <div class="item2">第二行div>
    43.                 <div class="item3">第三行div>
    44.         div>
    45. div>
    46. <script>
    47. ​
    48. // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
    49. ​
    50. // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
    51. ​
    52.    var container=document.getElementById("container");
    53.    var title=document.getElementById("title");
    54.    var list=document.getElementById("list");
    55.    title.onmouseover=function(){
    56.        list.style.display="block";
    57.    };
    58. ​
    59.    container.onmouseleave=function(){  // 改为onmouseout试一下
    60.        list.style.display="none";
    61.    };
    62. ​
    63. /*
    64. ​
    65. 因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
    66. 上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";
    67. ​
    68. */
    69. script>
    70. body>
    71. html>

    • onkey事件

    1. <input type="text" id="t1"/>
    2. ​
    3. <script type="text/javascript">
    4. ​
    5.     var ele=document.getElementById("t1");
    6. ​
    7.      ele.onkeydown=function(e){
    8.         console.log("onkeydown",e.key)
    9.     };
    10. ​
    11.      ele.onkeyup=function(e){
    12.         console.log("onkeyup",e.key)
    13.     };
    14. script>

    • onblur和onfocus事件

    1. <input type="text" class="c1">
    2. ​
    3. ​
    4. <script>
    5. ​
    6.     var ele = document.querySelector(".c1");
    7. ​
    8.     // 获取焦点事件
    9.     ele.onfocus = function () {
    10.         console.log("in")
    11.     };
    12. ​
    13.     // 失去焦点事件
    14.     ele.onblur = function () {
    15.         console.log("out")
    16.     }
    17. ​
    18. script>

    • 冒泡事件

    1. <div class="c1">
    2.     <div class="c2">div>
    3. div>
    4. ​
    5. ​
    6. <script>
    7. ​
    8.     var ele1 = document.querySelector(".c1");
    9.     ele1.onclick = function () {
    10.         alert("c1区域")
    11.     };
    12. ​
    13.     var ele2 = document.querySelector(".c2");
    14.     ele2.onclick = function (event) {
    15.         alert("c2区域");
    16.         
    17.         // 如何阻止事件冒泡
    18.         event.stopPropagation();
    19.     }
    20. ​
    21. script>

  • 相关阅读:
    1932. 合并多棵二叉搜索树 并查集+DFS
    对NFT市场前景的7个看法
    Java框架 特殊SQL的执行
    分布式锁三连问：分布锁有哪些解决方案？Redis如何做分布式锁？MySQL如何做分布式锁？
    抖音矩阵系统。抖音矩阵系统。抖音矩阵系统。抖音矩阵系统。抖音矩阵系统。
    【ROS小车课设】虚拟机端编译riki工作空间问题解决
    NV040D语音芯片丨助力空气净化器语音功能
    Optuna：带仪表盘的可视化的超参数优化
    AIGC下一步：如何用AI再度重构或优化媒体处理？
    Python 爬虫实战：驾驭数据洪流，揭秘网页深处
  • 原文地址：https://blog.csdn.net/wojiubugaosuni12/article/details/134542195