JS高级学习笔记（5）之事件

最新推荐文章于 2024-03-09 13:07:10 发布

weixin_30735391

最新推荐文章于 2024-03-09 13:07:10 发布

阅读量59

点赞数

原文链接：http://www.cnblogs.com/houfee/p/10469092.html

版权

参考：https://www.cnblogs.com/lhyxq/tag/Javascript/

UI事件

当用户与页面元素交互时触发

当元素失去或获得焦点时触发

焦点事件会在页面元素获得或者失去焦点时触发，利用焦点事件和 document.hasFocus() 方法配合使用

以及 document.activeElement 属性配合可以知晓用户在页面上的行踪

焦点事件有以下6种：

blur：在元素失去焦点时触发，该事件不会冒泡
DOMFocusIn：在元素获得焦点时触发，该事件与HTML事件 focus等价，但是该事件会冒泡，DOM3级规范废弃了该事件。选择了 focusin 作为实现
DOMFocusOut：元素失去焦点触发，也会冒泡。DOM3级废弃该事件选择了 focusout 作为实现
focus：元素获得焦点触发，该事件不会冒泡
focusin：与focus等价支持冒泡
focusout：与blur等价支持冒泡

所以当焦点从一个元素移到另一个元素会依次触发以下事件：

要确定浏览器是否支持以上事件：

var isSupported = document.implementation.hasFeature("FocusEvent","3.0");

鼠标事件是web开发中最常用的一类事件，毕竟鼠标是最主要的定位设备

click：在用户单击主鼠标按钮（一般为鼠标左键）或者按下回车时触发，这一点对确保易访问性十分重要，这意味着 onclick 事件处理程序既可以通过键盘执行也可以通过鼠标执行
dbclick：在用户双击主鼠标按钮时触发（鼠标左键）。从技术上说该事件并不是DOM2级规范所支持的，但是由于浏览器对其的广泛实现在DOM3级规范中将其纳入标准
mousedown：用户按下任意鼠标按钮触发，不能通过键盘触发
mouseenter：鼠标光标从元素外部移入元素内部时触发，该事件不冒泡，并且在光标从元素移入元素子元素时不会触发
mouseleave：光标从元素上方移出元素范围时触发，该事件不冒泡，移入后代元素不会触发
mousemove：鼠标指针在元素内部移动时重复触发，不能通过键盘触发该事件
mouseout：鼠标位于元素上方，此时将鼠标移至另一个元素触发，其子元素也会触发，不能通过键盘触发该事件
mouseover：鼠标位于元素外部，首次移入元素范围内触发，其子元素也会触发，不能通过键盘触发该事件
mouseup：用户释放鼠标按钮时触发，不能通过键盘触发

转载于:https://www.cnblogs.com/houfee/p/10469092.html

关注