2023学年完整公开课版事件处理

《物联网Web前端开发基础》课程

事件处理【任务7-4】事件处理需求分析什么是HTML？网页是由浏览器的内置对象组成的，如单选按钮、列表框、多选框等，事件是JavaScript与对象之间进行交互的桥梁，当某个事件发生时，通过它的处理函数执行相应的JavaScript代码，从而实现不同的功能。【任务7-4】事件处理知识巩固—事件和事件处理什么是事件？【任务7-4】事件处理知识巩固—事件和事件处理所谓的事件是指用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如，单击鼠标或按键，它可以触发与这个事件相关联的JavaScript对象。【任务7-4】事件处理知识巩固—事件和事件处理事件处理的过程发生事件启动事件处理程序事件处理程序作出反应【任务7-4】事件处理知识巩固—事件处理程序的调用1在JavaScript中调用事件处理程序2在HTML中调用事件处理程序【任务7-4】事件处理知识进阶—鼠标事件鼠标事件是指通过鼠标动作触发的事件【任务7-4】事件处理知识进阶—鼠标事件常用的鼠标事件类别事件事件说明鼠标事件onclick

鼠标单击时触发此事件ondblclick

鼠标双击时触发此事件onmousedown

鼠标按下时触发此事件onmouseup

鼠标弹起时触发的事件onmouseover

鼠标移动到某个设置了此事件的元素上时触发此事件onmousemove

鼠标移动时触发此事件onmouseout

鼠标从某个设置了此事件的元素上离开时触发此事件【任务7-4】事件处理知识进阶—键盘事件在网页中，不仅可以通过鼠标触发相应的JavaScript事件，用户通过操作键盘同样可以触发相应的JavaScript事件。【任务7-4】事件处理知识储备—键盘事件键盘事件是指通过键盘动作触发的事件，常用于检查用户向页面输入的内容。类别事件事件说明键盘事件onkeydown

当键盘上的某个按键被按下时触发此事件onkeyup

当键盘上的某个按键被按下后弹起时触发此事件onkeypress

当输入有效的字符按键时触发此事件【任务7-4】事件处理知识进阶—表单事件用户在填写或选择表单内容时，为了保证信息的准确性，经常需要通过表单事件来实现用户信息的验证。【任务7-4】事件处理知识进阶—表单事件表单事件是指通过表单触发的事件。类别事件事件说明表单事件onblur

当前元素失去焦点时触发此事件onchange

当前元素失去焦点并且元素内容发生改变时触发此事件onfocus

当某个元素获得焦点时触发此事件onreset

当表单被重置时触发此事件onsubmit

当表单被提交时触发此事件【任务7-4】事件处理知识进阶—页面事件页面事件是指通过页面触发的事件。类别事件事件说明页面事件onload

当页面加载完成时触发此事件onunload

当页面卸载时触发此事件【注册事件（绑定事件）】1、传统方式注册事件，唯一性，即同一个元素同一个事件只能设置一个处理函数2、事件监听注册事件，同一个DOM对象的同一个事件可添加多个事件处理程序【任务7-4】事件处理知识进阶—事件监听【W3C规定的事件流方式】从DOM树根节点向下直到发生事件的元素节点先进行事件捕获；进入目标阶段，执行当前元素对象的事件处理，再在冒泡阶段逐级处理事件【任务7-4】事件处理知识进阶—DOM事件流【事件对象event】在事件发生后，事件对象event中会包含一些所有事件都有的属性和方法属性说明浏览器e.target返回触发事件的对象（事件源）标准浏览器e.srcElement返回触发事件的对象非标准IE6-IE8使用e.type返回事件的类型所有浏览器e.stopPropagation()阻止事件冒泡标准浏览器e.cancelBubble阻止事件冒泡非标准IE6-IE8使用e.preventDefault()阻止默认事件（默认行为）标准浏览器e.returnValue阻止默认事件（默认行为）非标准IE6-IE8使用知识进阶—事件对象【任务7-4】事件处理【事件委托】

不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每个子节点。

简而言之，就是“委托”父元素注册事件并进行事件处理，适用于有多个子元素需要循环遍历注册事件的情况，如列表li，统一在父元素ul注册事件并进行处理，通过event.target属性可以明确具体事件源对象