JavaScript前端开发实用技术教程第5章.pptVIP

JavaScript前端开发实用技术教程 授课教师： 职务： 第5章 JavaScript事件处理 课程描述 事件处理是JavaScript的一个优势，可以很方便地针对某个HTML事件编写程序进行处理。 本章知识点 5.1 JavaScript事件的基本概念 5.2 HTML事件 5.3 干预系统的事件处理机制 5.1 JavaScript事件的基本概念 5.1.1 什么是事件 5.1.2 DOM事件流 5.1.3 事件监听器 5.1.1 什么是事件 事件定义了用户与网页进行交互时产生的各种操作。例如，当用户单击一个超链接或按钮时，就会触发一个事件,告诉浏览器发生了需要进行处理的操作（单击）。除了在用户操作的过程中可以产生事件外，浏览器自身的一些动作也可能产生事件。例如,浏览器载入一个网页的时候，会产生一个Load事件。 在JavaScript程序中可以注册一个事件的处理函数，当触发事件时会调用处理函数。 在定义HTML元素时，可以使用on+事件名来指定事件处理函数。例如，可以使用下面的方法指定按钮（button元素）的单击（click事件）的处理函数。 button onclick=事件处理函数按钮文本/button 【例5-1】 演示JavaScript事件的例子 HTML HEADTITLE【例5-1】/TITLE/HEAD BODY Script LANGUAGE = JavaScript function showDate() { document.getElementById(demo).innerHTML=Date(); } /Script button onclick=showDate()显示日期/button p id=demo/p /BODY /HTML 【例5-1】的浏览结果 5.1.2 DOM事件流 DOM事件标准定义了两种事件流，分别是捕获事件流和冒泡事件流。大多数浏览器都遵循这两种事件流方式。 1．冒泡事件流 2．捕获事件流 3．DOM标准的事件模型 4．事件传导的3个阶段 事件捕捉（Capturing）阶段 目标（target）阶段 冒泡（Bubbling）阶段 DOM标准的事件模型 5.1.3 事件监听器 事件监听器又称为事件句柄或事件处理函数，指用于响应某个事件而调用的函数称为事件处理函数。 可以使用addEventListener()函数指定事件监听器，语法如下： target.addEventListener(type, listener, useCapture); 参数说明如下 target：触发事件的HTML DOM点对象，例如document或window。 type：事件类型。 listener：侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数。 useCapture：是否使用捕捉。此参数的作用是确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。一般在此参数处使用false即可。 【例5-2】 HTML HEADTITLE【例5-2】/TITLE/HEAD BODY input id=myinput/input script type=text/javascript function handler() { alert(welcome); } document.getElementById(myinput).addEventListener(click, handler, false); /script /BODY /HTML 5.2 HTML事件 5.2.1 鼠标事件 5.2.2 Event对象 5.2.3 键盘事件 5.2.4 页面事件 5.2.5 表单事件 5.2.1 鼠标事件 事 件 说 明 onclick 当用户点击某个对象时触发 ondblclick 当用户双击某个对象时触发 onmousedown 鼠标按钮被按下时触发 onmousemove 鼠标被移动时触发 onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素之上时触发 onmouseup 鼠标按键被松开时触发 5.2.2 Event对象 属 性 说 明 altKey 用于检查alt键的状态。当alt键按下时，值为 TRUE ，否则为 FALSE button 检查按下的鼠标键。可能的取值如下： ? 0，没按键； ? 1，按左键； ? 2，按右键； ? 3，按左右键； ? 4， 按中间键； ? 5，按左键和中间键； ? 6，按右键和中间键； ? 7，按所有的键 这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他