JS学习：事件类型
2017-12-19 23:17
309 查看
Web浏览器中规定了以下几类事件：
UI事件，当用户与页面上的元素交互式触发
焦点事件，当元素获得或失去焦点时触发
鼠标事件，当用户通过鼠标在页面上执行操作时触发
滚轮事件，当使用鼠标滚轮（或类似设备）时触发
文本事件，当在文档中输入文本时触发
键盘事件，当用户通过键盘在页面上执行操作时触发
合成事件，当为输入法编辑器输入字符时触发
变动事件，当底层DOM结构发生变化时触发
变动名称事件，此类事件已经被废除，没有任何浏览器实现
1.load：当页面完全加载后（包括所有图像、JS文件、CSS等外部资源），就会触发window上面的load事件，代码为window.onload = function(){};或者为body添加onload属性，一般来说，在window上面发生的任何事件都可以在body元素中添加相应的特性来指定。除此之外，图像也可以触发load事件，如
上面代码在图片加载完成后会输出图片的地址。
2.unload：与load事件对应的就是unload事件，这个事件在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会触发unload事件。
利用unload事件最多的情况是清除引用，以避免内存泄漏
3.resize事件：当浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件，因此可以通过window.onresize = function(){}；或者在body上设置onresize特性来指定事件的触发函数。IE，Safari，Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。
4.scroll事件：与resize事件类似，scroll事件也会在文档被滚动期间重复被触发，所以有必要尽量保持处理程序的代码简单，同样scroll事件也可以通过js或者在body上设置onscroll特性来指定事件的触发函数。
blur：在元素失去焦点时触发。这个事件不会冒泡，所有浏览器都会支持它。
DOMFocusIn：在元素获得焦点时触发。冒泡，只有Opera支持这个事件。DOM3级事件废弃了DOMFocusIn，选择了focusin。
DOMFocusOut：在元素失去焦点时触发。只有Opera支持这个事件。DOM3级事件废弃了DOMFocusOut，选择了focusout。
focus:在元素获得焦点时触发，不冒泡，所有浏览器都支持。
focusin：在元素获得焦点时触发，冒泡。
focusout：在元素失去焦点时触发。
dbclick：在用户双击主鼠标按钮时触发。
mousedown：在用户按下了任何鼠标按钮时触发，不能通过键盘触发这个事件。
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡
mousemove：当鼠标指针在元素内部移动时重复地触发。
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。另一个元素可以是前一个元素的外部也可以是子元素。
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
mouseup：在用户释放鼠标按钮时触发。
PS：在触摸设备中要记住以下几点：
1）不支持dbclick事件。双击浏览器窗口会放大画面，而且没有办法改变该行为。
2）轻击可单击元素会触发mousemove事件。如果此操作会导致内容变化，将不再有其他事件发生，如果屏幕没有因此变化，会依次发生mousedown、mouseup和click事件。轻击不可单击的元素不会触发任何事件。
3）mousemove事件也会触发mouseover和mouseout事件。
4）两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewhell和scroll事件。
1）keydown：当用户按下键盘上的任意键时触发，而且如果按住不放，会重复触发。
2）keypress：当用户按下键盘上的字符键时触发，按住不放会重复触发。
3）keyup：当用户释放键盘上的键时触发。
文本事件：
textInput：这个事件是对keypress的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件，
2）DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
3）DOMNodeRemoved：在节点从其父节点中被移除时触发。
4）DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发。
5）DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发。
6）DOMAttrModified：在特性被修改之后触发。
7）DOMCharacterDataModified：在文本节点的值发生变化时触发。
UI事件，当用户与页面上的元素交互式触发
焦点事件，当元素获得或失去焦点时触发
鼠标事件，当用户通过鼠标在页面上执行操作时触发
滚轮事件，当使用鼠标滚轮（或类似设备）时触发
文本事件，当在文档中输入文本时触发
键盘事件，当用户通过键盘在页面上执行操作时触发
合成事件，当为输入法编辑器输入字符时触发
变动事件，当底层DOM结构发生变化时触发
变动名称事件，此类事件已经被废除，没有任何浏览器实现
一：UI事件
DOMActivate：表示元素已经被用户操作激活，但这个事件在DOM3级事件中被废弃，不建议使用这个事件。1.load：当页面完全加载后（包括所有图像、JS文件、CSS等外部资源），就会触发window上面的load事件，代码为window.onload = function(){};或者为body添加onload属性，一般来说，在window上面发生的任何事件都可以在body元素中添加相应的特性来指定。除此之外，图像也可以触发load事件，如
<img src="img/150.jpg" onload="alert(this.src)"/>
上面代码在图片加载完成后会输出图片的地址。
2.unload：与load事件对应的就是unload事件，这个事件在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会触发unload事件。
<body onunload="alert(1)">
利用unload事件最多的情况是清除引用，以避免内存泄漏
3.resize事件：当浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件，因此可以通过window.onresize = function(){}；或者在body上设置onresize特性来指定事件的触发函数。IE，Safari，Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。
4.scroll事件：与resize事件类似，scroll事件也会在文档被滚动期间重复被触发，所以有必要尽量保持处理程序的代码简单，同样scroll事件也可以通过js或者在body上设置onscroll特性来指定事件的触发函数。
二：焦点事件
焦点事件会在页面元素获得或失去焦点时触发。有以下6个焦点事件：blur：在元素失去焦点时触发。这个事件不会冒泡，所有浏览器都会支持它。
DOMFocusIn：在元素获得焦点时触发。冒泡，只有Opera支持这个事件。DOM3级事件废弃了DOMFocusIn，选择了focusin。
DOMFocusOut：在元素失去焦点时触发。只有Opera支持这个事件。DOM3级事件废弃了DOMFocusOut，选择了focusout。
focus:在元素获得焦点时触发，不冒泡，所有浏览器都支持。
focusin：在元素获得焦点时触发，冒泡。
focusout：在元素失去焦点时触发。
三：鼠标与滚轮事件
click:在用户单击主鼠标按钮或者按下回车键时触发。dbclick：在用户双击主鼠标按钮时触发。
mousedown：在用户按下了任何鼠标按钮时触发，不能通过键盘触发这个事件。
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡
mousemove：当鼠标指针在元素内部移动时重复地触发。
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。另一个元素可以是前一个元素的外部也可以是子元素。
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
mouseup：在用户释放鼠标按钮时触发。
PS：在触摸设备中要记住以下几点：
1）不支持dbclick事件。双击浏览器窗口会放大画面，而且没有办法改变该行为。
2）轻击可单击元素会触发mousemove事件。如果此操作会导致内容变化，将不再有其他事件发生，如果屏幕没有因此变化，会依次发生mousedown、mouseup和click事件。轻击不可单击的元素不会触发任何事件。
3）mousemove事件也会触发mouseover和mouseout事件。
4）两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewhell和scroll事件。
四：键盘和文本事件
键盘事件：1）keydown：当用户按下键盘上的任意键时触发，而且如果按住不放，会重复触发。
2）keypress：当用户按下键盘上的字符键时触发，按住不放会重复触发。
3）keyup：当用户释放键盘上的键时触发。
文本事件：
textInput：这个事件是对keypress的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件，
五：变动事件
1）DOMSubtreeModified：在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。2）DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
3）DOMNodeRemoved：在节点从其父节点中被移除时触发。
4）DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发。
5）DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发。
6）DOMAttrModified：在特性被修改之后触发。
7）DOMCharacterDataModified：在文本节点的值发生变化时触发。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 从零开始前端学习[45]:js中的所谓的事件类型，鼠标事件，表单事件，键盘事件以及系统事件
- JavaScript事件学习小结(五）js中事件类型之鼠标事件
- 【Todo】React & Nodejs学习 &事件驱动，非阻塞IO & JS知识栈：Node为主，JQuery为辅，Bootstrap & React为辅辅，其他如Angular了解用途即可
- JS 学习笔记--10---基本包装类型
- 实用JS系列——事件类型
- js学习笔记——事件
- Node.js 学习（五）Node.js 事件循环
- JS学习47：transitionend 事件的折腾
- 【js学习笔记-093】------文档加载事件
- 数据类型回顾之parseIng&parseFloat——JS学习笔记2015-6-2（第46天）
- JS事件委托学习（转）
- 菜鸟之js事件学习
- JavaScript学习点滴—js对象的四种类型的属性、方法的访问
- Vue学习之源码分析--Vue.js事件机制（四）
- node.js学习之事件模块Events的使用示例
- JS事件之事件类型[鼠标和滚轮事件]
- js事件类型总结
- jQuery 1.6 源码学习（五）——core.js[5]之类型判断方法type
- cocos-js 的事件监听（学习）
- js 几种类型的事件处理程序