2022-01-18 day12 事件对象+offset系列

一. 事件对象

1. 事件对象

• 触发事件时, 产生的一套操作记录
• 事件对象包含: 事件类型, 指标值, 目标元素, ...

2. 获取事件对象

1. 事件对象内 arguments[0]
2. ie浏览器下 window.event
3. 非ie下 function(evt) {}

• 兼容写法: var e = evt || window.event

3. 事件对象的属性

3.1 e.pageX, e.pageY

• 鼠标点击的点, 到页面(document)的距离

3.2 e.clientX, e.clientY

• 鼠标点击的点, 到当前浏览器的距离

3.3 e.offsetX, e.offsetY

• 鼠标点击的点, 到当前元素的距离

3.4 e.screenX, e.screenY

• 鼠标点击的点, 到屏幕的距离

3.5 e.button

• 鼠标按键的编号
• 配合onmousedown使用
• 0 左键; 1 滚轮键; 2 右键

window.onmousedown = function(e) {
    console.log(e.button);
}

3.6 e.ctrlKey, e.altKey, e.shiftKey,e.metaKey, ...

• 功能键: ctrl键, alt键, shift键, window键, ...
• 配合鼠标左键使用
• 返回 true/false

window.onmousedown = function(e) {
  // console.log(e.ctrlKey);
  // console.log(e.shiftKey);
  // console.log(e.altKey);
  console.log(e.metaKey);
}

3.7 e.keyCode, e.charCode

• e.keyCode 键盘按键编码
  *所有键有效
  *字母只输出大写的ASCII码
• e.charCode 字符编码
  *功能键无效
  *配合onkeypress使用
  *区分大小写编码

window.onkeypress = function(evt) {
    var e = evt || window.event;
    console.log(e.keyCode, String.fromCharCode(e.charCode));
}

3.8 target 目标元素

• this 不一定等于 e.target
• 兼容写法: var ele = e.target || e.srcElement;

window.onclick = function(evt) {
    var e = evt || window.event;
    var ele = e.target || e.srcElement; // 兼容写法
    console.log(ele); // 输出点击的目标元素
}

4. 事件委托

• 把事件绑定在父元素上,子元素触发事件
• 通过 e.target 得到目标元素
• 减少事件绑定带来的开销 [好处]
• 获取目标元素,要进行判断, 相对繁琐 [缺点]

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
<script>
    var oItems = document.querySelectorAll('.item');
    var oBox = document.querySelector('.box');
    oBox.onclick = function(evt) {
        var e = evt || window.event;
        if (e.target.className != 'item') {
            return; // 如果点击的不是目标元素就停止操作
        }
    }
</script>

二. offset系列

1. offsetLeft, offsetTop

• 获取当前元素到带有定位的父元素的距离
• 若父元素都没有定位,则到body的距离

2. offsetWidth, offsetHeight

• 自身宽高 : 自身宽高 + border + padding
• offsetWidth 获取元素自身宽度
• offsetHeight 获取元素自身高度
• 特别注意: 无法获取隐藏元素的值

3. 元素.style.xxx

• 只能获取行内样式
• 只建议赋值操作, 因为权重太高

4. offsetParent

• 获取到带有定位的父元素
• 如果父级们都没有定位,则到body的距离

5. 封装 getOffset() 函数

• 用于获取当前元素永远到 body 的上/下偏移值

function getOffset(obj) { // obj: 当前元素
        var o = {
            left: obj.offsetLeft,
            top: obj.offsetTop
        };
        while (obj.offsetParent) {
            // obj.offsetParent 会一直执行到找到 body 为止, 当找不到时返回 null
            obj = obj.offsetParent;
            o.left += obj.offsetLeft;
            o.top += obj.offsetTop;
        }
        return o;
}