网页设计与制作（活页式） 课件 情景9-6事件

网页设计与制作注册事件授课教师：乔振华HTMLCSSJavaScriptJavaScript目录CONTENTS12学习目标知识讲解3小结学习目标01学习目标学习目标01了解JavaScript事件学习目标02会编写注册事件02知识点讲解

01JavaScript中有哪些事件？

03如何编写事件？思考知识点讲解

02表单中用到了哪些事件？1、JavaScript事件JavaScript事件（event）是当用户与网页进行交互时发生的事情，例如鼠标单机某个导航链接或按钮、在表单中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，我们可以使用JavaScript中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。一般情况下事件的名称都是以“on”开头，例如点击事件onclick、获取焦点onfocus、失去焦点onblur等。下表中列举了一些JavaScript中常用的事件：常见事件事件描述鼠标事件click用户单击鼠标时触发此事件dblclick用户双击鼠标时触发此事件mousedown用户按下鼠标时触发此事件mouseup用户按下鼠标后松开鼠标时触发此事件mouseover当用户将鼠标移动到某对象范围的上方时触发此事件mousemove用户移动时鼠标触发此事件mouseout当用户鼠标离开某对象范围时触发此事件键盘事件keypress当用户键盘上的某个字符键被按下并且释放时触发此事件keydown当用户键盘上某个按键被按下时触发此事件keyup当用户键盘上某个按键被按下后松开时触发此事件窗口事件abort当图形尚未完全加载前，用户就单击了一个超链接，或单击停止按钮时触发此事件error加载文件或图像发生错误时触发此事件load页面内容加载完成时触发此事件resize当浏览器的窗口大小被改变时触发此事件unload当前页面关闭或退出时触发此事件表单事件blur当前表单元素失去焦点时触发此事件click用户单击复选框、单选按钮或button、submit和reset按钮时触发此事件change表单元素的内容发生改变并且元素失去焦点时触发此事件focus当表单元素获得焦点时触发此事件reset用户单击表单上的reset按钮时会触发此事件select用户选择了一个input或textarea表单域中的文本时触发此事件submit用户单击submit按钮提交表单时触发此事件2、事件绑定事件只有与HTML元素绑定之后才能被触发。在JavaScript中，有三种常用的绑定事件的方法：1、在DOM元素中直接绑定；2、在JavaScript代码中绑定；3、绑定事件监听函数。2.1在DOM元素中直接绑定即在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等，如下<inputtype="button"value="点击"onclick="alert('Hello')"/>2.2在JavaScript代码中绑定即在JavaScript代码中（即script标签内）绑定事件，如下<script>

document.getElementById("btn").onclick=function(){ alert("hello"); }</script><inputid=“btn”type="button"value="点击"/>2.3绑定事件监听函数事件监听有3个阶段：语法：element.addEventListener('事件',监听函数,捕捉/冒泡)语法解析：事件:（必需）事件名，支持所有DOM事件。function（监听函数）：（必需）指定要事件触发时执行的函数。useCapture（是否捕捉）：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。目标阶段B冒泡阶段C捕获阶段A2.3绑定事件监听函数<script>functionhello(){

alert("你好");

}varbtn=document.getElementById("btn");btn.addEventListener("click",hello);</script><<inputid="btn"type="button"value="点击"/>2.4焦点事件2.4焦点事件在html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，以表单为例。<script>functionof(){

document.getElementById("sp").innerHTML="获取焦点";

}

functionob(){

document.getElementById("sp").innerHTML="失去焦点";

}</script><inputid="btn"type="text"onfocus="of()"onblur="ob()"/><spanid="sp"></span>03小结小结本节内容讲解了JavaScript中的事件，要