渡一教育公开课web前端开发JavaScript精英课学习笔记（十五）事件
事件
是前端语言，互联网体验的核心功能。
添加和移除事件处理
window事件
WebSocket示例
WebSocket示例
事件的冒泡和捕获
事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素（自底向上）。
事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获功能，即同一事件，自父元素捕获至子元素（自顶向下）。
一个对象的一个事件处理，只能追寻一种事件处理模型，即有冒泡不捕获，有捕获不冒泡。
只有Google浏览器实现了事件捕获，IE没有捕获事件。
触发顺序，先捕获，后冒泡。
focus,blur,change,submit,reset,select 等事件不冒泡。
window事件
点击最里层的div时（代码结构上的最里层），外面两层div也响应了点击事件。这个现象就叫冒泡或捕获。冒泡自里向外执行，捕获自外向内。先执行对象的事件然后执行捕获模型，再执行冒泡模型
代码编辑器多选编辑功能：先选择要编辑的文本，然后点击 ctrl+D 选择相同的文本，然后可以一起修改。
百度----取消默认事件
拖动小方块实现
拖动小方块
事件委托实现
window事件委托
利用冒泡模型和获取事件源对象，实现了用ul事件处理程序处理li的点击事件。这种方式就是事件委托。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
事件分类
鼠标事件
click、contextmenu、mouse开头的事件。
用消息属性button来区分鼠标的按键，0、1、2.
DOM3标准：click事件只监听左键，只能通过mousedown和mouseup来判断鼠标键。
解决mousedown和click的冲突
键盘事件
keydown、keyup、kepress
按住键盘时 keydown、keyup连续触发，抬起时触发keyup。
移动端 touchstart、touchmove、touchend
keydown可以响应任意键盘按键，区分不了字符的大小写、keypress响应字符类键盘按键。
keypress返回ASCII码，可转换成相应的字符。
文本类操作事件
input、change、focus、blur
窗体操作事件
scroll、load
load事件在网页全部加载完（包含需要下载的图片）才触发。用户体验不好，效率低。
练习
- 二阶菜单栏
- 贪吃蛇
- 扫雷
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！