• HTML DOM


    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图片已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当 HTML 表单被提交时
    • 当用户触发按键时

      向 button 元素分配一个 onclick 事件:

      onload 和 onunload 事件

      当用户进入或离开页面时,会触发 onload 和 onunload 事件。

      onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。

      onload 和 onunload 事件可用于处理 cookies。

      onchange 事件

      onchange 事件常用于输入字段的验证。

      下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时,将调用 upperCase() 函数。

      onmouseover 和 onmouseout 事件

      onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

      onmousedown、onmouseup 以及 onclick 事件

      onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件。

      HTML DOM - 导航

      HTML DOM 节点列表

      getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

      <!DOCTYPE html>
      <html>
      <body>
      <div onmouseover="mOver(this)" onmouseout="mOut(this)"style="background-color:#D94A38;200px;height:50px;padding-top:25px;text-align:center;">
      </div>
      <script>
      function mOver(obj){
      obj.innerHTML="鼠标在上面";
      }
      function mOut(obj){
      obj.innerHTML="鼠标移开了";
      }
      </script>
      </body>
      </html>

      <!DOCTYPE html>
      <html>
      <body>
      <div onmousedown="onmousedown1(this)" onmouseup="onmouseup1(this)"
      style="background-color:#D94A38;200px;height:50px;padding-top:25px;text-align:center;"></div>

      <script>
      function onmousedown1(obj){
      obj.innerHTML="鼠标按下";
      obj.style.backgroundColor="#1ec5e5";
      }
      function onmouseup1(obj){
      obj.innerHTML="鼠标松开";
      obj.style.backgroundColor="#D94A38";
      }
      </script>


      </body>
      </html>

  • 相关阅读:
    jquery中,input获得焦点时光标自动定位到文字后面
    微信接口调用
    bootstrap-datetimepicker插件双日期的设置
    input输入框在移动端点击有阴影解决方法
    input输入框光标高度问题
    Appendix 2- Lebesgue integration and Reimann integration
    Appendix 1- LLN and Central Limit Theorem
    LESSON 7- High Rate Quantizers and Waveform Encoding
    LESSON 6- Quantization
    LESSON 5
  • 原文地址:https://www.cnblogs.com/baiduligang/p/4247652.html
Copyright © 2020-2023  润新知