浏览器里常用的默认事件及事件的属性

女爷i 2022-01-07 13:27 525阅读 0赞

`浏览器常用事件包括：　 页面加载/离开事件 load/unload/beforeunload 缩放事件 fullscreenchange/resize/ 光标事件 blur/focusin/focus/focusout/ 鼠标事件 mousedown/mouseenter/mouseleave/mouseover/mouseout/mouseup 拖拽事件 drag/dragend/dragenter/dragleave/dragover/dragstart/drop 滚动事件 scroll 单击/双击事件 click/dblclick 页面控件事件 change/select/show/wheel/invalid 表单事件 reset/submit 动画事件 transitionend/animationstart/animationiteration 键盘事件 keyup/keydown/keypress 触摸屏事件 touchcancel/touchend/touchmove/touchstart 媒体控件事件 volumechange/abort/ended/... 网络离线/上线事件 online/offline 快捷菜单事件 contextmenu/copy/cut 事件是个对象，有很多的属性可以使用，常用的包括： 获取坐标 clientX/clientY/screenX/screenY/offsetX/offsetY/MovementX/MovementY 获取键盘KEY keyCode/code 获取事件源 currentTarget/target 组合键 altKey/shiftKey 用代码实现触发事件：createEvent()`

`var x = document.createEvent("MouseEvent"); x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); document.getElementById("myDiv").dispatchEvent(x);`

自动下载时常用这种方式

var evt = document.createEvent('MouseEvents');
         evt.initEvent('click', false, false);
         link.dispatchEvent(evt);

refer:https://www.w3schools.com/jsref/dom\_obj\_event.asp

**target/currentTarget/EventTarget**

target是真正触发事件的元素

currentTarget是当前监听到该事件的元素

EventTarget为可以进行事件监听的元素的祖先。

![337063-20190301151521164-379465126.png][]

refer:https://www.cnblogs.com/oneplace/p/6786193.html

**clientX、offsetX、screenX、pageX**

**offsetX,offsetY 是相对于e.target的上边框和左边框的距离。**

![337063-20190301162329187-723529491.png][]

refer: https://blog.csdn.net/weixin\_41342585/article/details/80659736

转载于:https://www.cnblogs.com/Gift/p/10456426.html

[337063-20190301151521164-379465126.png]: /images/20211220/d043ea2341314a79a377ff654a0348e9.png
[337063-20190301162329187-723529491.png]: /images/20211220/f3f91883bbac45ccbe343c9bbdfb139b.png