考核内容: 鼠标事件
题发散度: ★
试题难度: ★
解题:
JS在触发事件时，会自动生成event对象传入到事件函数中。可以通过传参或直接使用关键字.
代码语言：javascript复制element.onmouseover=function(e){
console.log(event===e)
}常用api或属性
- target: 表示事件目标本身 event.target;
- currentTarget：当前冒泡标签; event.currentTarget
- clientX&clientY: 触发事件时，鼠标相对于浏览器的X,Y的坐标位置(不包含滚动条) event.clientX; event.clientY;
- pageX&pageY:触发事件时，鼠标相对于网页的X,Y的坐标位置(包含滚动条) event.pageX; event.pageY;
- offsetX&offsetY: 指触发事件时鼠标相对于事件标签左上角的坐标偏移量。 event.offsetX; event.offsetY;
- preventDefault(): 阻止标签的默认行为 event.preventDefault():
- stopPropagation()：阻止冒泡或捕获 event.stopPropagation();
一图以概之
总结:event事件中的属性:
- pageX返回触发鼠标事件时，鼠标指针相对于当前页面(文档)的水平坐标，
- pageY返回触发鼠标事件时，鼠标指针相对于当前页面(文档)的垂直坐标;
- screenX返回窗口/鼠标指针相对于屏幕的水平坐标,
- screenY返回窗口/鼠标指针相对于屏幕的垂直坐标;
- clientX返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标,
- clientY返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标;
- offsetX返回鼠标指针相对于目标元素边缘位置的水平坐标,
- offsetY返回鼠标指针相对于目标元素边缘位置的垂直坐标。
在线测试:
答案：
代码语言：javascript复制A:pageX,pageY
