《移动应用设计与开发-前端开发》课件-8 事件

JavaScript脚本语言--事件目录8.2事件冒泡与默认行为8.1事件8.4事件分类18.3事件对象8.6键盘事件应用8.5事件分类28.7鼠标事件应用8.6案例-拖拽JavaScript脚本语言--8.1事件事件导入讲解演练总结实践JavaScript的特点之一：事件驱动。什么是事件呢？事件导入讲解演练总结实践事件三要素事件源：事件被触发的对象事件类型：什么样的事件，如鼠标单击、鼠标经过，键盘按下事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码，一般是通过一个函数赋值的方式完成事件：JavaScript侦测到的行为。这些行为指的就是页面的加载、鼠标单击等。事件导入讲解演练总结实践事件类型事件源事件处理程序事件导入讲解演练总结实践2.事件的绑定方式概念：事件绑定指的是为某个元素对象的事件绑定事件处理程序。行内绑定式动态绑定式事件监听式事件导入讲解演练总结实践2.事件的绑定方式--行内绑定式<标签名事件="事件的处理程序">标签名可以是任意的HTML标签，如<div>标签、<button>标签等；事件是由on和事件名称组成的一个HTML属性，如单击事件对应的属性名为onclick；事件的处理程序指的是JavaScript代码，如匿名函数等。由于开发中提倡JavaScript代码与HTML代码相分离，因此不提倡使用行内绑定式绑定事件行内绑定式是通过HTML标签的属性设置实现的。事件导入讲解演练总结实践2.事件的绑定方式--动态绑定式在JavaScript代码中，为需要事件处理的DOM元素对象，添加事件与事件处理程序。DOM元素对象.事件=事件处理程序;事件的处理程序一般都是匿名函数或有名的函数。事件导入讲解演练总结实践注意：在行内绑定式和动态绑定式中，同一个DOM对象的同一个事件只能有一个事件处理程序。事件导入讲解演练总结实践解决的问题：可以给同一个DOM对象的同一个事件添加多个事件处理程序。参数type指的是DOM对象绑定的事件类型，它是由事件名称设置的，如click。参数callback表示事件的处理程序。参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。DOM对象.addEventListener(type,callback,[capture]);2.事件的绑定方式–事件监听事件导入讲解演练总结实践打开hbuilder事件导入讲解演练总结实践3.事件解绑（1）解绑动态绑定式事件事件导入讲解演练总结实践3.事件解绑（2）解绑事件监听式事件事件导入讲解演练总结实践

内容小结重点：1.认识事件2.掌握事件绑定的方式含义3.了解事件解绑的方法对策一事件导入讲解演练总结实践课后练习使用三种绑定方式绑定事件JavaScript脚本语言--事件冒泡与默认行为事件冒泡导入讲解演练总结实践1.事件流事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。网景和微软IE浏览器对于事件流的传播顺序，提供了两种不同的解决方案事件冒泡导入讲解演练总结实践2.事件捕获（网景）事件捕获方式（网景）是指事件流传播的顺序应该是从DOM树的根节点到发生事件的元素节点。事件冒泡导入讲解演练总结实践3.事件冒泡（微软）事件冒泡方式（微软）是指事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点。事件冒泡导入讲解演练总结实践2.事件捕获事件捕获示例设置为true时，表示在捕获阶段完成事件处理。事件冒泡导入讲解演练总结实践3.事件冒泡事件冒泡示例默认值为false，表示在冒泡阶段完成事件处理事件冒泡导入讲解演练总结实践规定事件发生后，先实现事件捕获，但不会对事件进行处理。接着进行到目标阶段，执行当前元素对象的事件处理程序，但它会被看成是冒泡阶段的一部分。最后实现事件的冒泡，逐级对事件进行处理。4.W3C规定的事件流方式捕获阶段冒泡阶段事件冒泡导入讲解演练总结实践

JS代码中只能的执行捕获或冒泡其中的一个阶段在实际开发中很少使用事件捕获，更关注的是事件冒泡有些事件是没有冒泡的，如：onblur

、onfocus、onmouseenter、onmouseleave事件冒泡有时候会带来麻烦，有时候又能够很巧妙的做某些事情。4.W3C规定的事件流方式打开hbuilder事件冒泡导入讲解演练总结实践事件冒泡测试默认情况下，事件是按照冒泡的方式来进行处理的，因此，当单击p标签时，向上依次触发了div，body的单击事件事件冒泡导入讲解演练总结实践阻止冒泡开发过程中若要禁止冒泡，则可以利用事件对象的stopPropagation（）方法或cancelBubble属性默认行为导入讲解演练总结实践默认行为有些标签元素拥有一些特殊的行为单击a标签，会自动跳转到href属性指定的url链接；单击表单的submit按钮后，会自动将表单数据提交到指定的服务器端页面处理；文本框可以输入内容等。我们把标签具有的这种行为称为默认行为。默认行为导入讲解演练总结实践阻止默认行为开发过程中若要禁止默认行为，则可以利用事件对象的preventDefault（）方法和returnValue属性导入讲解演练总结实践事件内容小结重点：1.掌握事件冒泡和事件默认2.掌握阻止冒泡和阻止默认的方法对策一事件导入讲解演练总结实践课后练习文本框只能输入数字JavaScript脚本语言--事件对象事件对象导入讲解演练总结实践

什么是事件对象？简单的说：当触发了一个事件以后，对该事件的一些描述信息【例】：

触发一个点击事件的时候，你点在哪个位置了，坐标是多少触发一个键盘事件的时候，你按的是哪个按钮每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象事件对象导入讲解演练总结实践1.获取事件对象事件对象的来源：当发生事件时，都会产生一个事件对象event。事件对象的作用：这个对象中包含着所有与事件相关的信息，包括发生事件的DOM元素、事件的类型以及其他与特定事件相关的信息。举例：因鼠标移动发生事件时，事件对象中就会包括鼠标位置（横纵坐标）等相关的信息；事件对象导入讲解演练总结实践1.获取事件对象事件对象说明：event就是一个事件对象，写到侦听函数的小括号里，当形参来看事件对象只有元素绑定了事件才会存在，它是系统自动创建的，不需要传递实参事件对象有可以自己命名，一般用event、evt

或e

事件对象也有兼容性问题，兼容性的写法

e=e||window.event

（现在基本不用考虑兼容性问题）事件对象导入讲解演练总结实践1.获取事件对象打开hbuilder事件对象导入讲解演练总结实践1.获取事件对象兼容性写法事件对象导入讲解演练总结实践2.常用属性和方法属性/方法描述type返回当前事件的类型，如clicktarget返回触发此事件的元素（事件的目标节点）currentTarget返回其事件监听器触发该事件的元素stopPropagation()阻止事件冒泡preventDefault()阻止默认行为cancelBubble阻止事件冒泡，默认为false表示允许，设置true表示阻止事件对象导入讲解演练总结实践2.常用属性和方法属性描述altKey返回当事件被触发时，”ALT”是否被按下。button返回当事件被触发时，哪个鼠标按钮被点击。clientX返回当事件被触发时，鼠标指针的水平坐标。clientY返回当事件被触发时，鼠标指针的垂直坐标。ctrlKey返回当事件被触发时，”CTRL”键是否被按下。metaKey返回当事件被触发时，”meta”键是否被按下。relatedTarget返回与事件的目标节点相关的节点。screenX返回当某个事件被触发时，鼠标指针的水平坐标。screenY返回当某个事件被触发时，鼠标指针的垂直坐标。shiftKey返回当事件被触发时，”SHIFT”键是否被按下。事件对象导入讲解演练总结实践例：

输出当前鼠标的坐标打开hbuilder导入讲解演练总结实践事件对象内容小结重点：掌握事件对象的常用属性方法对策一事件对象导入讲解演练总结实践课后练习图片跟随鼠标JavaScript脚本语言--事件分类1事件分类导入讲解演练总结实践事件分类JavaScript中都有哪些事件呢？页面事件焦点事件鼠标事件键盘事件事件分类导入讲解演练总结实践1.页面事件思考：HTML页面是按照什么样的顺序进行加载的？答案：页面的加载是按照代码的编写顺序，从上到下依次执行的。会出现的问题：若在页面还未加载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误。打开Hbulider事件分类导入讲解演练总结实践1.页面事件事件分类导入讲解演练总结实践解决办法：页面事件可以改变JavaScript代码的执行时机。load事件：用于body内所有标签都加载完成后才触发。unload事件：用于页面关闭时触发，经常用于清除引用避免内存泄漏时使用。1.页面事件事件分类导入讲解演练总结实践1.页面事件打开Hbulider事件分类导入讲解演练总结实践2.焦点事件焦点事件多用于表单验证功能，是最常用的事件之一。例如，文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据等。事件名称事件触发时机focus当获得焦点时触发（不会冒泡）blur当失去焦点时触发（不会冒泡）事件分类导入讲解演练总结实践案例效果：案例分析：密码框获取焦点focus时，样式发生变化密码框失去焦点blur时，要进行判断如果输入正确则提示正确信息如果输入不正确，则提示错误信息打开Hbulider事件分类导入讲解演练总结实践导入讲解演练总结实践事件分类内容小结页面事件焦点事件鼠标事件事件分类focus（）blur（）load（）unload（）键盘事件对策一事件分类导入讲解演练总结实践课后练习文本框获取焦点时，高度变高，失去焦点时还原JavaScript脚本语言--事件分类2事件分类导入讲解演练总结实践事件分类JavaScript中都有哪些事件呢？页面事件焦点事件鼠标事件键盘事件事件分类导入讲解演练总结实践1.鼠标事件事件名称事件触发时机click当按下并释放任意鼠标按键时触发dblclick当鼠标双击时触发mouseover当鼠标进入时触发mouseout当鼠标离开时触发mousedown当按下任意鼠标按键时触发mouseup当释放任意鼠标按键时触发mousemove在元素内当鼠标移动时持续触发鼠标事件是Web开发中最常用的一类事件。事件分类导入讲解演练总结实践1.鼠标事件例：鼠标放到图片上，图片加红色边框放大，鼠标离开，图片还原打开Hbuilder事件分类导入讲解演练总结实践2.键盘事件Keypress事件保存的按键值是ASCII码，不识别功能键Keydown和keyup事件保存的按键值是虚拟键码使用键盘时触发的事件。事件名称事件触发时机Keypress按键按下时触发（shift，Fn，CAPSLock等非字符键除外）keydown按键按下时触发keyup按键弹起时触发键盘事件应用导入讲解演练总结实践2.键盘事件例：键盘按下时，获取每个键的键值打开Hbuilder导入讲解演练总结实践事件分类内容小结页面事件焦点事件鼠标事件事件分类click()dblclick()mouseover()mouseout()mousemove()contextmenu()focus（）blur（）load（）unload（）键盘事件keydown（）keyup（）keypress()对策一事件分类导入讲解演练总结实践课后练习按空格键，页面上随机出现一张图片。JavaScript脚本语言--键盘事件应用键盘事件应用导入讲解演练总结实践键盘事件应用Keypresskeydownkeyup用户在使用键盘时触发的事件。是使用频率较高的事件键盘事件应用导入讲解演练总结实践键盘事件例：获取每个键的键值打开hbuilder键盘事件应用导入讲解演练总结实践2.键盘事件例：通过方向键，控制对象的移动注意:获取对象的left属性使用offsetLeft。打开hbuilder思路：1.判断按下了哪个键2.如果按下的是左箭头，让对象的left属性值在原来的基础上增加10px，其他以此类推键盘事件应用导入讲解演练总结实践2.键盘事件offset系列offset系列只能读，不能改变值，而且返回的值是数字，不带单位

offsetTop

返回元素距离带有定位的父级顶部的距离offsetLeft

返回元素距离带有定位的父级左侧的距离offsetWidth

返回元素自身的宽度，包括padding、border、widthoffsetHeight

返回元素自身的高度，包括padding、border、widthoffsetParnet

返回带有定位的父亲，没有则返回body

--摘自《简书》多学一招导入讲解演练总结实践键盘事件应用内容小结

重点：掌握键盘事件的用法对策一键盘事件应用导入讲解演练总结实践课后练习按S键，定位到搜索框。JavaScript脚本语言--鼠标事件应用自定义右键菜单鼠标事件应用导入讲解演练总结实践鼠标事件Web开发中最常用的一类事件事件名称事件触发时机click当按下并释放任意鼠标按键时触发dblclick当鼠标双击时触发mouseover当鼠标进入时触发mouseout当鼠标离开时触发mousedown当按下任意鼠标按键时触发mouseup当释放任意鼠标按键时触发mousemove在元素内当鼠标移动时持续触发contextmenu当按下右键时触发鼠标事件应用导入讲解演练总结实践自定义右键菜单案例效果：案例分析：右键点击页面的任意地方，自定义菜单显示左键点击文档任意位置，自定义菜单消失。注意：自定义的菜单一定要设position属性右键事件是加在document上。打开hbuilder鼠标事件应用导入讲解演练总结实践自定义右键菜单body部分功能实现部分导入讲解演练总结实践鼠标事件应用内容小结

案例知识点： 1.对象是document，事件是contextmenu 2.事件对象及相关属性 3.阻止默认的应用 4.对象的display属性对策一鼠标事件应用导入讲解演练总结实践课后练习图片跟随鼠标案例JavaScript脚本语言案例—拖拽案例—拖拽导入讲解演练总结实践案例效果：案例分析：编写HTML，设计弹框用于实现拖拽特效。为拖拽条添加mousedown事件及其处理程序。处理鼠标移动事件，实现鼠标的拖拽的特效。处理释放鼠标按键的事件，实现鼠标按钮松开后，弹框不再移动。案例—拖拽导入讲解演练总结实践拖拽原理：根据鼠标移动位置来计算盒子的移动位置。盒子位置（left和top值）=鼠标的位置-鼠标按下时与盒子之间的距离鼠标的位置：可以通过事件对象的