一. 事件对象
1. 事件对象
- 触发事件时, 产生的一套操作记录
- 事件对象包含: 事件类型, 指标值, 目标元素, ...
2. 获取事件对象
- 事件对象内 arguments[0]
- ie浏览器下 window.event
- 非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;
}
