《程序的交互控制》课件.pptVIP

*******************程序的交互控制程序的交互控制是程序设计中不可或缺的一部分。通过交互控制，用户可以与程序进行交流，并根据自己的需求调整程序的行为。课程目标了解交互控制概念掌握交互控制基本概念，包括事件驱动编程、事件处理机制等。学习常见事件类型熟悉键盘事件、鼠标事件、触摸事件、表单事件、窗口事件、定时器事件等。掌握事件处理方法学习如何使用事件处理函数、事件对象属性、事件对象方法等。应用交互控制技术通过案例实践，将交互控制知识应用于实际项目开发中。什么是交互控制交互控制是指用户与程序之间的互动方式，让用户能够通过各种操作来控制程序的行为。交互控制允许用户在程序执行过程中进行干预，更改程序流程，并根据自身需求定制化体验。交互控制的实现方式用户界面设计用户界面设计使用按钮、文本框等元素提供用户交互方式，例如点击、输入等。键盘事件键盘事件处理用户键盘输入，例如按键按下、释放等。鼠标事件鼠标事件处理用户鼠标操作，例如点击、移动、滚轮滚动等。事件监听器事件监听器用于监听特定事件，并在事件发生时执行相应的代码。事件驱动编程简介1定义事件驱动编程是一种编程范式，程序的执行流程由事件触发，而不是严格按照代码顺序执行。2事件事件是程序运行过程中发生的特定操作或状态改变，例如用户点击按钮、鼠标移动或窗口关闭等。3事件处理程序事件处理程序是响应特定事件的代码块，当事件发生时，程序会调用相应的事件处理程序来执行相应的操作。事件处理机制1事件捕获浏览器捕获事件，从根节点开始逐级向下传播到目标节点。2事件目标事件最终到达的节点，通常是触发事件的节点。3事件冒泡从目标节点开始，事件逐级向上传播到根节点，并可能被多个节点处理。4事件循环浏览器在事件循环中不断检查是否有事件发生，并将事件传递给相应的处理函数。事件流的传播1捕获阶段从最外层元素开始，向目标元素传播2目标阶段到达事件目标元素3冒泡阶段从目标元素开始，向最外层元素传播事件流描述了事件在DOM树中传播的顺序。事件处理函数定义事件处理函数是一个专门用于处理特定事件的函数。执行当事件发生时，事件处理函数会被自动调用执行。响应事件处理函数负责根据事件类型执行相应的操作，例如更新界面、改变数据等。键盘事件键盘事件类型键盘事件主要用于捕获用户在键盘上按下的按键。keydownkeyupkeypress示例当用户按下键盘上的字母“A”键时，会触发键盘事件。script

document.addEventListener(keydown,function(event){

if(event.key===a){

console.log(按下字母A);

}

});

/script

鼠标事件单击事件鼠标单击元素时触发。双击事件鼠标双击元素时触发。鼠标悬停事件鼠标指针悬停在元素上时触发。鼠标移出事件鼠标指针从元素上移开时触发。触摸事件11.触摸开始手指接触屏幕时触发，用于识别触摸开始位置。22.触摸移动手指在屏幕上滑动时触发，用于跟踪触摸路径。33.触摸结束手指离开屏幕时触发，用于识别触摸结束位置。44.触摸取消触摸被中断或取消时触发，例如接听电话。表单事件提交事件用户提交表单时触发，可用于验证数据或处理提交操作。重置事件用户重置表单时触发，可用于恢复表单的默认值。输入事件用户在表单元素中输入内容时触发，可用于实时校验输入内容。改变事件用户更改表单元素值时触发，可用于更新表单状态或进行其他操作。窗口事件窗口大小调整窗口大小调整事件在窗口尺寸发生变化时触发，用于实现自适应布局或执行特定操作。窗口加载窗口加载事件在窗口完全加载完毕后触发，用于初始化页面元素或执行依赖于页面加载完成的操作。窗口关闭窗口关闭事件在窗口关闭之前触发，用于确认用户是否保存数据或执行其他清理操作。窗口焦点变化窗口焦点变化事件在窗口获得或失去焦点时触发，用于处理窗口状态变化相关的逻辑。定时器事件定时器事件定时器事件允许程序在指定时间间隔后触发事件，可以实现周期性任务。使用场景定时器事件通常用于创建动画、计时器、轮询任务和延迟执行操作。setInterval和setTimeoutJavaScript提供setInterval和setTimeout函数来创建定时器事件。自定义事件触发特定逻辑用户自定义事件，可以触发特定逻辑或行为，满足特定需求。灵活可控开发者可以根据需要自定义事件名称、参数和触发条件。代码示例创建