第十二章 Javascript_事件处理

鼠标在图片上移入或移出时，动态改变图片的焦点， 鼠标在图片上移入或移出时，动态改变图片的焦点，主要是用 onmouseover和onmouseout事件来完成鼠标的移入和移出动作。 事件来完成鼠标的移入和移出动作。 和 事件来完成鼠标的移入和移出动作
程序代码如下： 程序代码如下：
<script language="javascript"> <!-function changeImage(img, i) { if (i==0) img.src=“temp0.jpg”; else img.src=“temp1.jpg”; } //--> </script> <img src=“temp0.jpg" border="0" width="148" height="121" onMouseOver=“changeImage(this,1)" onMouseOut=“changeImage(this,0)" >
FF: Firefox, N: Netscape, IE: Internet Explorer 属性 onabort onblur onchange onclick ondblclick onerror onfocus 当以下情况发生时， 当以下情况发生时，出现此事件 图像加载被中断 元素失去焦点 用户改变域的内容 鼠标点击某个对象 鼠标双击某个对象 当加载文档或图像时发生某个错误 元素获得焦点 FF N IE 1 1 1 1 1 1 1 3 2 2 2 4 3 2 4 3 3 3 4 4 3
程序代码如下： 程序代码如下：
<script language="javascript"> function textcolor(cursor,i) { if (i==0) cursor.style.color="#0000FF"; else cursor.style.color="#E7D745"; } </script> <a href="#" onmouseup="text_color(this,1)" onmousedown="text_color(this,0)">编程词典网 编程词典网</a> 编程词典网
事件驱动代码
事件处理是对象化编程的一个很重要的环 节，没有了事件处理，程序就会变得很死， 缺乏灵活性。事件处理的过程可以这样表 示：发生事件 - 启动事件处理程序 - 事件处 发生事件 理程序作出反应。 理程序作出反应。
如何编写事件处理程序(1）
一、 在事件源对象所对应的HTML标签上 增加一个要处理事件属性，让事件属性值 等于处理事件的函数名或程序代码。
通过按钮变换背景颜色，单击“变换背景”按钮，动态的改变页面的背景颜色， 通过按钮变换背景颜色，单击“变换背景”按钮，动态的改变页面的背景颜色，当 用户再次单击按钮时，页面背景将以不同的颜色进行显示. 用户再次单击按钮时，页面背景将以不同的颜色进行显示
程序代码如下： 程序代码如下：
<script language="javascript"> var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purp le","gray","yellow","aqua","white","silver"); var n=0; function turncolors(){ if (n= =(Arraycolor.length-1)) n=0; n++; document.bgColor = Arraycolor[n]; } </script> <form name="form1" method="post" action=""> <p> <input type="button" name="Submit" value="变换背景 onclick="turncolors()"> 变换背景" 变换背景 </p> <p>用按钮随意变换背景颜色 用按钮随意变换背景颜色.</p> 用按钮随意变换背景颜色 </form>
鼠标单击事件-onclick
单击事件一般应用于Button对象、Checkbox对象、Image 对象、Link对象、Radio对象、Reset对象和Submit对象， Button对象一般只会用到onclick事件处理程序，因为该对 象不能从用户那里得到任何信息，如果没有onclick事件处 理程序，按钮对象将不会有任何作用。
事件概述
JavaScript是一种基于对象和事件驱动的脚 本语言， HTML 4.0 的新特性之一是有能力 使 HTML 事 件 触 发 浏 览 器 中 的 动 作 （action），比如当用户点击某个 HTML 元 素时启动一段 JavaScript。 事件通常与函数配合使用， 事件通常与函数配合使用，这样就可以通 过发生的事件来驱动函数执行。 过发生的事件来驱动函数执行。
程序代码如下： 程序代码如下： <script language="javascript"> <!-var x=0,y=0; function MousePlace() { x=window.event.x; y=window.event.y; window.status="X: "+x+" "+"Y: "+y; } document.onmousemove=MousePlace; //--> </script>
常见事件--列表2
属性 onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup
当以下情况发生时，出现此事件 当以下情况发生时， 某个键盘的键被按下 某个键盘的键被按下或按住 某个键盘的键被松开 某个页面或图像被完成加载 某个鼠标按键被按下 鼠标被移动 鼠标从某元素移开 鼠标被移到某元素之上 某个鼠标按键被松开
例： <script language="JavaScript" for="window" event="onload"> alert('网页读取完成，请慢慢欣赏！'); 网页读取完成， 网页读取完成 请慢慢欣赏！ </script>
常见事件--列表1Байду номын сангаас
下面是一个属性列表，这些属性可插入 HTML 标 签来定义事件动作
onmousedown/ onmouseup事件
鼠标的按下或松开事件分别是onmousedown和 onmouseup事件。其中，onmousedown事件用于在鼠 标按下时触发事件处理程序，onmouseup事件是在鼠标 松开时触发事件处理程序。在用鼠标单击对象时，可以 用这两个事件实现其动态效果。
FF 1 1 1 1 1 1 1 1 1
N IE 4 4 4 2 4 6 4 2 4 3 3 3 3 4 3 4 3 4
常见事件--列表3
属性 onreset onresize onselect onsubmit onunload
当以下情况发生时， 当以下情况发生时，出现此事件 重置按钮被点击 窗口或框架被调整尺寸 文本被选定 提交按钮被点击 用户退出页面
格式： 对象名.on事件=<语句>|<函数名>
事件处理举例
例1： document.onload=alert("建议浏览器的分辨率： 800x600"); var str="建议浏览器的分辨率：800x600"; document.onload=alert(str);
事件处理举例
例2： <script> function show(){ var str=“建议浏览器的分辨率：800x600”; alert(str); } //如果没有参数，函数（）省略 document.onload=show; </script>
WEB基础
JavaScript-06 事件处理 avaScriptScript
目标
了解什么是事件以及事件的调用 了解常用事件 掌握鼠标键盘事件 掌握页面事件 掌握表单事件
事件概述
用户与网页交互时产生的操作，称为事件。 事件可以由用户引发，也可能是页面发生 改变，甚至还有你看不见的事件（如Ajax的 交互进度改变）。 绝大部分事件都由用户的动作所引发，如： 用户按鼠标的按键，就产生click事件，若鼠 标的指针在链接上移动，就产生mouseover 事件等等。
如果想要在JavaScript中使用组合键，可以利用 event.ctrlKey，event.shiftKey，event.altKey判断是否按 下了ctrl键、shift键以及alt键。
键盘事件
键盘事件包含onkeypress、onkeydown和onkeyup事件
其中onkeypress事件是在键盘上的某个键被按下并且释放时触发 此事件的处理程序，一般用于键盘上的单键操作。 Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理 程序，Onkeyup事件是在键盘上的某个键被按下后松开时触发此 事件的处理程序，一般用于组合键的操作。
如何编写事件处理程序（3）
三 编写特定对象特定事件的 JavaScript。 这种方法用得比较少，但是在某些场合还 是很好用的。方法是： ：
<script language="JavaScript" for="对象 event="事件 对象" 事件"> 对象 事件 ... (事件处理程序代码 事件处理程序代码) 事件处理程序代码 ... </script>
FF 1 1 1 1 1
N IE 3 4 2 2 2 4 4 3 3 3
鼠标和键盘事件
鼠标和键盘事件是在页面操作中使用最频 繁的操作，可以利用鼠标事件在页面中实 现鼠标移动、单击时的特殊效果。也可以 利用键盘事件来制作页面的快捷键等
鼠标的单击事件 鼠标的按下或松开事件 鼠标的移入移出事件 鼠标移动事件 键盘事件
事件将文本制作成类似于<a> 用onmousedown和onmouseup事件将文本制作成类似于 和 事件将文本制作成类似于 超链接）标记的功能，也就是在文本上按下鼠标时， （超链接）标记的功能，也就是在文本上按下鼠标时，改变文本 的颜色，当在文本上松开鼠标时，恢复文本的默认颜色。 的颜色，当在文本上松开鼠标时，恢复文本的默认颜色。
Onmousemove事件
鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事 件处理程序，可以在该事件中用document对象实时读取鼠标在页面 中的位置。
鼠标在页面中移动时，在页面的状态栏中显示当前鼠标在页面上的位置， 鼠标在页面中移动时，在页面的状态栏中显示当前鼠标在页面上的位置，也 就是（ ） 运行效果如图所示。 就是（x,y）值。运行效果如图所示。
onmouseover和onmousemove事件
鼠标的移入和移出事件分别是onmouseover和onmousemove事件。 其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程 序，onmousemove事件在鼠标移出对象上方时触发事件处理程序。 可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态 效果。
格式： <tag on事件=“<语句组>|<函数名>”>
事件处理举例
将特定的代码放置在其所处对象的事件处 理器中
例1： <body onload="alert('建议浏览器的分辨率： 800x600');"> <body onload="var str='建议浏览器的分辨率： 800x600'; alert(str); ">
事件处理举例
将事件处理器独立出来，编写单独的函数实现 例2： <script> function show(){ var str="建议浏览器的分辨率：800x600"; alert(str); } </script> <body onload="show();">
如何编写事件处理程序（2）
二、直接在JavaScript代码中， 设置元素 对象的事件属性， 让事件属性值等于处理 该事件的函数名或程序代码。