DOM事件

  1. 就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
  2. 主讲2种：
    1. HTML事件
    2. DOM0级事件

HTML事件

  1. 直接在HTML元素标签内添加的事件，执行脚本。
  2. 语法：
  3. 功能：在html元素上绑定事件
  4. 说明：执行脚本可以是一个函数的调用

鼠标事件

  1. onload — 页面加载时触发
  2. onclick — 鼠标点击时触发
  3. onmouseover — 鼠标滑过时触发
  4. onmouseout — 鼠标离开时触发
  5. onfoucs — 获得焦点时触发 — input标签type为text password / textarea标签
  6. onblur — 失去焦点时触发
  7. onchange — 域的内容发生改变时触发 — 一般作用在select、chaecbox、radio

关于this的指向

  1. 在事件触发函数中，this是对该DOM对象的引用

DOM0级事件

  1. 通过DOM获取HTML元素
  2. （获取HTML元素）.事件 = 执行脚本
  3. 语法：ele.事件 = 脚本
  4. 功能：在DOM对象上绑定事件
  5. 说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

鼠标事件 — 补充

  1. onsubmit事件 — 表单中的确认按钮被点击时发生 — 不是加在按钮上而是表单上
  2. onmousedown — 鼠标按钮在元素上按下时触发
  3. onmouseup — 在元素上松开鼠标按钮时触发 — 2和3成就了onclick事件
  4. onmousemove — 在鼠标指针移动时触发
  5. onresize — 当调整浏览器窗口大小时触发
  6. onscroll — 拖动滚动条滚动时触发

键盘事件与keycode属性

  1. onkeydown — 在用户按下一个键盘按键时触发
  2. onkeypress — 在按下键盘按键时发生（只会响应字母和数字符号）
  3. onkeyup — 在键盘按键松开时发生
  4. keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码，或者键的代码

项目案例图：

  1. image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>Document</title>
    6.  <script type="text/javascript">
    7.      //网页加载  不带括号 先执行事件
    8.      window.onload=init;
    9.      //初始化函数
    10.      function init(){
    11.          //获取下拉从菜单
    12.          var menu = document.getElementById("menu");
    13.          //给菜单绑定change事件
    14.          menu.onchange=function(){
    15.              //console.log("abc");
    16.              //获取当前选中的值
    17.              // var bgcolor = this.value;
    18.              //下拉菜单选中的值
    19.              var bgcolor = menu.options[menu.selectedIndex].value;
    20.              //如果bgcolor为空的话，则下面的脚本不执行 return
    21.              if (bgcolor==""){
    22.                  //return;//在这里直接用return结束的话等到在选择空白属性的时候会出现bug
    23.                  document.body.style.background="#fff";
    24.              }
    25.              //设置body的背景颜色
    26.                  document.body.style.background=bgcolor;
    28.          }
    29.      }
    30.  </script>
    31. </head>
    32. <body>
    33.  <div class="box">
    34.      请选择您喜欢的背景色
    35.      <select name="" id="menu">
    36.          <option value="">请选择</option>
    37.          <option value="#f00">红色</option>
    38.          <option value="#0f0">绿色</option>
    39.          <option value="#00f">蓝色</option>
    40.          <option value="#ff0">黄色</option>
    41.          <option value="#ccc">灰色</option>
    42.      </select>
    43.  </div>
    44. </body>
    45. </html>

  2. image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>Document</title>
    6.  <style type="text/css">
    7.      body{
    8.          height: 200px;
    9.      }
    10.      .box{
    11.          width: 200px;
    12.          height: 200px;
    13.          background:red;
    14.          overflow: auto;
    15.      }
    16.  </style>
    17. </head>
    18. <body>
    19.  <div class="box" id="box">
    20.      <p>拖动</p>
    21.      <p>拖动</p>
    22.      <p>拖动</p>
    23.      <p>拖动</p>
    24.      <p>拖动</p>
    25.      <p>拖动</p>
    26.      <p>拖动</p>
    27.      <p>拖动</p>
    28.      <p>拖动</p>
    29.      <p>拖动</p>
    30.      <p>拖动</p>
    31.      <p>拖动</p>
    32.      <p>拖动</p>
    33.      <p>拖动</p>
    34.      <p>拖动</p>
    35.      <p>拖动</p>
    36.      <p>拖动</p>
    37.      </div>
    38.  </body>
    39.  <script type="text/javascript">
    40.      var box = document.getElementById("box");
    41.  //绑定按下的事件
    42.  box.onmousedown = function(){
    43.      console.log("我被按下了！");
    44.  }
    45.  box.onmousemove = function(){
    46.      console.log("我被移动了！");
    47.  }
    48.  box.onmouseup   = function(){
    49.      console.log("我被松开了！");
    50.  }
    51.  box.onclick     = function(){
    52.      console.log("我被点击了！");
    53.  }
    54.  box.onmousedown = function(){
    55.      console.log("我被按下了！");
    56.  }
    57.  //当浏览器窗口尺寸发生改变是
    58.  window.onresize = function(){
    59.      console.log("我的尺寸被改变了！");
    60.  }
    61.  window.onscroll = function(){
    62.      console.log("我被拖动了！");
    63.  }
    64.  box.onscroll    = function(){
    65.      console.log("我是DIV，我被拖动那个了！");
    66.  }
    67. </script>
    68. </html>

  3. image.png

  4. image.png
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>Document</title>
    6.  <style type="text/css">
    7.      .text span{
    8.          font-weight: bold;
    9.      }
    10.      em{
    11.          font-style: inherit;
    12.      }
    13.  </style>
    14. </head>
    15. <body>
    16.  <div>
    17.      <p class="text">字数限制在30字以内，您还可以输入<span><em id="count">30</em></span></p>
    18.      <div>
    19.          <textarea name="" id="text" cols="70" rows="4"></textarea>
    20.      </div>
    21.  </div>
    22. </body>
    23. <script type="text/javascript">
    24.  var text = document.getElementById("text");
    25.  var total = 30;
    26.  var count = document.getElementById("count");
    27.  document.onkeyup = function(){
    28.      var len = text.value.length;
    29.      var allow = total-len;
    30.      count.innerHTML=allow;
    31.  }
    32. </script>
    33. </html>

总结

  • DOM：将文档表现为结构化的表示方法，使得每一个页面元素都是可操控的。DOM将网页和脚本以及其他编程语言联系起来。
  • DOM树：
  • image.png
  • 1、常见的DOM操作：

(1) getElementById 返回带有指定的ID元素
(2) getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
(3) getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
(4) getElementsByName 获取相同名称（name）的元素的所有节点列表