(11)--4.4-javascript-JSWeb系统与技术事件.pdfVIP

JavaScript JavaScript事件处理 •事件处理三要素：事件源、事件、事件处理程序 • 事件源 ：事件产生者，大部分网页标记都能产生事件， 如按钮、超链接、图像、段落等 • 事件 ：事件源上的动作，点击按钮、移动窗口等 • 事件处理程序 ：事件发生后触发的程序 • 标签名 事件名 =“事件处理程序 “ / input type=button value =点击 onClick=alert(按钮单击)’/ 事件源 ：按钮；事件 ：单击(onClick) ；处理程序 ：alert() JavaScript 事件概述 事件类型 事件名 说明 onClick 鼠标单击对象时 onMouseOver 鼠标悬停在对象区域时 onMouseOut 鼠标移出对象区域时 鼠标类 onMouseMove 鼠标在对象区域内移动时 onMouseDown 在对象区域内按下鼠标键时 onMouseUp 在对象区域内弹起鼠标按键时 onChange 值发生改变时 编辑类 onFocus 对象获得焦点时，如文本框获得鼠标光标。 onBlur 失去焦点时 表单类 onSubmit 单击submit按钮提交表单时 文档类 onLoad 网页文档加载时 onKeyDown 按下键盘按键时 键盘类 … 例－IMG对象鼠标事件处理 IMG src=bee.jpg width=200 height=200 onMouseOver=this.src=star.jpg’” onMouseOut= this.src=bee.jpg H1 鼠标移到图片上边/H1 添加事件处理：切换图片 注意： 1. 一个标记所产生的事件的事件源是该标记，因此可以使用 “this”来引用该标记的属性 表单和button • input type=submit • 点击按钮时会自动提交表单 • 提交之前触发了按钮的onClick和表单的onSubmit两个事件，两个 事件的处理函数均返回true时，才会提交 • 可在两个事件响应中添加验证过程check() ，返回true或false • input type=submit onclick=return check() / • form onSubmit=return check() / • input type=button • 普通按钮，点击时会触发onClick()的内容，不涉及表单提交 • input type= button onclick=check()/ • check()里手动调用form.submit(); 例－ 提交按钮与表单验证 • 提交表单前，检测表单，用户名和密码不能为空，密码与 确认密码必须一致，否则不提交表单。 例－使用js进行输入验证 form name=reg method=post tabletr td width=80用户名 /td td width=100input type=text name=name//td /trtr td width=80密码 /td