• 关于DOM


    Document Object Model——文档对象模型

    DOM

    常用:

    document.getElementById("id属性的值");  根据id属性的值获取元素,返回来的是一个元素对象

    document.getElementsByTagName("标签名字");  根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

    document.getElementsByName("name属性的值");  根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

    document.getElementsByClassName("类样式的名字");  根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

    document.querySelector("选择器的名字");  根据选择器获取元素,返回来的是一个元素对象

    document.querySelectorAll("选择器的名字");  根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

    DOM的功能:

      页面中的节点,通过构造函数,构造出对象。

    DOM 事件

    遵循dom level 2 标准

    一个容易混淆的例子(DOM level 0)

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script>
        function print(){
          console.log('hi')
        }
      </script>
    </head>
    <body>
      <button id=X onclick="print">A</button>
      <button id=Y onclick="print()">B</button>
      <button id=Z onclick="print.call()">C</button>
      
     <!--  onclick="要执行的代码",等价于 eval("要执行的代码")-->
      
    </body>
    </html>

    X.onclick = print; //print为函数对象
    Y.onclick = print(); //undefined
    Z.onclick = print.call(); //undefined
    • 绑定事件

    三种方式

      1.对象.on事件名字=事件处理函数

    xxx.onclick = function(){console.log(1)}
    xxx.onclick = function(){console.log(2)}
    
    //最终输出结果是2
    //onclick属性具有唯一性,会覆盖

    //解绑:xxx.onclick=null

      2.对象.addEventListener("没有on的事件名字",事件处理函数,false)--false(冒泡) true(捕捉)

    xxx.addEventListener('click',function(){console.log(1)})
    xxx.addEventListener('click',function(){console.log(2)})
    
    //最终输出1 2   队列
    //xxx拥有一个队列,先出现先触发,互不影响
    //队列的实质:数组

    //解绑:xxx.removeEventListener('click',...)

      3.对象.attachEvent("有on的事件名字",事件处理函数)

    xxx.attachEvent("onclick",function(){});
    
    //解绑:对象.detachEvent(“on事件类型”,函数名字)

    三者区别:

      1.支持的浏览器不一样

        addEventListener支持谷歌、火狐、IE11,不支持IE8

        attachEvent支持IE8,不支持IE11、谷歌、火狐

      2.this不同

        addEventListener中的this是当前绑定事件的对象

        attachEvent中的this是window

    • 事件三阶段:

        事件捕获阶段,事件目标阶段,事件冒泡阶段

      <div id="A">A
        <div id="B">B
          <div id="C">C</div>
        </div>
      </div>
      <!-- 当点击C时,三个函数都会被调用 -->
    A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
    A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
    A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
    
    // fn1 fn2 fn3 的执行顺序
    // 不传第三个参数或传false   CBA
    // 传true   ABC

    *若捕获冒泡在同一处触发,那么按照队列顺序来

    阻止冒泡

    https://jsbin.com/butuhec/edit?html,css,js,output

     待补充...

  • 相关阅读:
    Vue部署到相对目录和解决刷新404的问题
    JavaScript时间格式转换
    在Vue中使用Chart.Js
    进制转换和大数除法
    esp8266必备知识
    php 添加 freetype支持
    Linux系统时间同步问题
    busybox date 时间的加减
    kubesphere-wokespaces
    添加系统环境变量
  • 原文地址:https://www.cnblogs.com/BUBU-Sourire/p/11176012.html
Copyright © 2020-2023  润新知