js操作DOM\克隆DOM\获取元素偏移量\获取元素尺寸(占地面积)\JS 的鼠标事件

1.操作DOM:
    *      常规意义上的 操作DOM, 就是增删改查    
     *      1. 创建 (创建完成之后, 页面并不会有)
     *      2. 增删改查
2.克隆DOM:
            2.1如果要克隆DOM则需遵守以下几点:
              想要复制的节点.cloneNode(参数布尔值)
     *          参数 false 不克隆子节点     默认
     *          参数 true 克隆子节点
3. 获取元素偏移量
            获取元素:
                    元素.document.querySelector('值')
            获取元素相对父级 
                    元素.offsetParent
            获取元素的偏移量
                    '元素.元素的位置',元素.元素的移动位置
4.获取元素尺寸(占地面积)
            1. offsetXXX         ---> 实际宽度 + padding + border
            2. clientXXX         ---> 实际宽度 + padding
    获取浏览器窗口尺寸
            1. window.innerXXX   ---> 计算时 会包含浏览器的滚动条
            2. document.documentElement.clientXXX    ---> 计算时 不会计算滚动条(只计算浏览器的可视区域)
5.JS的事件
             事件
     *      在某一个时刻, 用户(在页面)做了某一件事, 我要给出的反馈
     * 
     *  事件的三要素
     *      1. 事件源
     *      2. 事件类型
     *      3. 事件处理函数
     * 
     *  DOM 0级事件绑定     事件源.on + 事件类型 = 事件处理函数
     *      弊端: 无法绑定多个同类型的事件, 后边新写的事件, 会覆盖掉原有的事件
     * 
     *  DOM 2级事件绑定(事件监听)     事件源.addEventListener('事件类型', 事件处理函数, 第三个参数是可选的(欠着))
6.JS 的鼠标事件

    var oDiv = document.querySelector('div')

    // 1. 左键单击
    oDiv.onclick = function () {
        console.log('单击元素时触发')
    }

    // 2. 双击事件      300ms 内连续点击两次鼠标
    oDiv.ondblclick = function () {
        console.log('双击元素时触发')
    }

    // 3. 右键事件      鼠标右键单击
    oDiv.oncontextmenu = function () {
        console.log('鼠标右键单击时触发')
    }

    // 4. 鼠标按下事件      鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)
    oDiv.onmousedown = function () {
        console.log('鼠标按下时触发')
    }

    // 5. 鼠标抬起事件      鼠标左键抬起的时候会触发的
    oDiv.onmouseup = function () {
        console.log('鼠标抬起时触发')
    }

    // 6. 鼠标移入事件      鼠标的移动到元素内部时触发
    oDiv.onmouseover = function () {
        console.log('onmouseover 鼠标移入时触发')
    }

    // 7. 鼠标移出事件      鼠标移动出元素内部时触发
    oDiv.onmouseout = function () {
        console.log('onmouseout 鼠标移出时触发')
    }

    // 8. 鼠标移动事件          鼠标在元素内部移动时触发
    oDiv.onmousemove = function () {
        // console.log('鼠标移动时触发')
    }

    // 9. 鼠标移入事件2
    oDiv.onmouseenter = function () {
        console.log('onmouseenter 鼠标移入事件2')
    }

    // 10. 鼠标移出事件2
    oDiv.onmouseleave = function () {
        console.log('onmouseleave 鼠标移出事件2')
    }

    // onmouseover onmouseout 两个方法 移入元素和移入元素子盒子时都会触发
    // onmouseenter onmouseleave 两个方法 只会在移入元素时触发
7.键盘事件:
     *      document  或者 input
     * 
     *      document.on键盘事件的事件类型 = function () {}
    */

    // 1. 键盘抬起事件
    document.onkeyup = function () {
        console.log('键盘按键抬起')
    }

    // 2. 键盘按下事件
    document.onkeydown = function () {
        console.log('键盘某个按键被按下')
    }

    // 3. 键盘按下抬起事件
    document.onkeypress = function () {
        console.log('键盘按下抬起时触发')
    }
 8. 表单事件
    var inp = document.querySelector('#inp')


    // 1. 获得焦点事件
    inp.onfocus = function () {
        console.log('当前文本框获得焦点')
    }

    // 2. 失去焦点事件
    inp.onblur = function () {
        console.log('当前文本框失去焦点')
    }

    // 3. 文本框内容改变时触发
    inp.onchange = function () {
        console.log('当前文本框内容被更改')
    }

    // 4. 文本框输入内容时触发
    inp.oninput = function () {
        console.log('当前文本框正在输入内容')
    }
9.事件对象
     * 
     *      当事件触发时, 携带一些信息
     * 
     *      当前时间的事件源是谁?
     *      鼠标点击的位置在哪里(点击事件)
     *      键盘按下了那个按键(键盘事件)
    *

10. 获取鼠标按下时的坐标
     * 
     *      相对于
     *          1. 事件源
     *          2. 页面
     *          3. 浏览器窗口
     列
             oDiv.onclick = function (e) {
        // 1. 获取 相对于 事件源 的鼠标坐标点
        console.log('====================================')
        console.log('相对于事件源 X 轴', e.offsetX)
        console.log('相对于事件源 Y 轴', e.offsetY)

        // 2. 获取相对于 页面 的坐标点
        console.log('====================================')
        console.log('相对于页面的 X 轴', e.pageX)
        console.log('相对于页面的 Y 轴', e.pageY)

        // 3. 获取相对于 浏览器窗口 的坐标点
        console.log('====================================')
        console.log('相对于浏览器窗口的 X 轴', e.clientX)
        console.log('相对于浏览器窗口的 Y 轴', e.clientY)
    }
11.键盘按键
     * 
     *      e.key ===> 返回按下的按键
     *      e.keyCode ===> 返回按下的按键的进制码
     *          keyCode 已经被移除, 但是很多主流浏览器还支持使用