《Vue.js3Web开发案例教程（在线实训版）》 课件 05 事件处理.pptx

vue.js 2024.7vue.js

第5章事件处理

标准DOM中的事件事件对象使用Vue.js处理事件DEMODEMO（监视鼠标移动）事件修饰符DEMO修饰符使用说明按键修饰符DEMO

第5章事件处理

第5章事件处理标准DOM中的事件事件与事件流事件对象

第5章事件处理事件对象标准DOM类型读/写说明altKeyBoolean读写按下ALT键则为true，否则为falsebuttonInteger读写鼠标事件，值对应按下的鼠标键，详见6.4.1节cancelableBoolean只读是否可以取消事件的默认行为stopPropagation()FunctionN/A可以调用该方法来阻止事件向上冒泡clientXInteger只读鼠标在客户端区域（当前窗口）的水平坐标，不包括工具栏、滚动条等clientYInteger只读鼠标在客户端区域（当前窗口）的垂直坐标，不包括工具栏、滚动条等ctrlKeyBoolean只读按下Ctrl键则为true，否则为falserelatedTargetElement只读鼠标所离开的元素relatedTargetElement只读鼠标正在进入的元素

第5章事件处理事件对象标准DOM类型读/写说明charCodeInteger只读按下按键的Unicode值keyCodeInteger读写keypress时为0，其余为按下按键的数字代号。detailInteger只读鼠标按钮点击的次数preventDefault()FunctionN/A可以调用该方法来阻止事件的默认行为screenXInteger只读鼠标相对于屏幕的水平坐标screenYInteger只读鼠标相对于屏幕的垂直坐标shiftKeyBoolean只读按下Shift键则为true，否则为falsetargetElement只读引起事件的元素/对象typeString只读事件的名称

第5章事件处理事件对象浏览器支持的事件种类是非常多了，可以分为几类：用户界面事件：涉及与BOM交互的通用浏览器事件。焦点事件：在元素获得或者失去焦点时触发的事件。鼠标事件：使用鼠标在页面上执行某些操作时触发的事件。滚轮事件：使用鼠标滚轮时触发的事件。输入事件：向文档中输入文本时触发的事件。键盘事件：使用键盘在页面上执行某些操作时触发的事件。输入法事件：使用某些输入法时触发的事件。移动设备出现以后，又增加了“触摸”事件。

第5章事件处理使用Vue.js处理事件以内联方式响应事件事件处理方法在Vue.js中使用事件对象

第5章事件处理DEMO

第5章事件处理动手练习：监视鼠标移动案例结合了一下本章前面学到的几个知识点：1.鼠标事件的处理2.事件对象中获取信息3.计算属性4.将计算属性绑定到了元素的CSS样式上。

第5章事件处理DEMO

第5章事件处理事件修饰符.stop.self.capture.once.prevent

第5章事件处理DEMO

第5章事件处理修饰符使用说明独立使用事件修饰符!--只有修饰符--formv-on:submit.prevent/form串联使用事件修饰符!--修饰符可以串联--av-on:click.stop.prevent=doThat/a

第5章事件处理按键修饰符与按键相关的3个事件keydownkeypresskeyup按键名系统修饰符.ctrl.alt.shift.meta鼠标按钮修饰符.left：鼠标左键被按下.right：鼠标右键被按下.middle：鼠标中间键被按下按键名说明.enter回车键.tab制表符.delete捕获“删除”和“退格”键.esc退出键.space空格键.up上键.down下键.left左键.right右键

第5章事件处理DEMO

第5章事件处理

标准DOM中的事件事件对象使用Vue.js处理事件DEMODEMO（监视鼠标移动）事件修饰符DEMO修饰符使用说明按键修饰符DEMO

请看第6章——

表单绑定