第14章 JavaScript中事件处理编程技术

JavaScript事件处理01事件与事件处理概述03鼠标键盘事件02DOM事件模型04页面事件05表单事件

事件与事件名称事件（event）事件本身并不是一个需要定义的技术名词。简单说，事件就是Web浏览器通知应用程序发生了什么事情。事件类型：是一个用来说明发生什么类型事件的字符串。

“mousemove”、“keydown”、“load”事件目标：是发生的事件与之相关的对象。事件捕获与事件冒泡

JavaScript常用事件常用事件

事件说明鼠标键盘事件onclick鼠标单击时触发此事件ondblclick鼠标双击时触发此事件onmousedown按下鼠标时触发此事件onmouseup鼠标按下后松开鼠标时触发此事件onmouseover当鼠标移动到某对象范围的上方时触发此事件onmousemove鼠标移动时触发此事件onmouseout当鼠标离开某对象范围时触发此事件onkeypress当键盘上的某个键被按下并且释放时触发此事件onkeydown当键盘上某个按键被按下时触发此事件onkeyup当键盘上某个按键被按下后松开时触发此事件事件处理程序的调用代码<formid="form1"name="form1"method="post"action=""><inputid="save"name="bt_save"type="button"value="保存"></form><scriptlanguage="javascript"> form1.save.onclick=function(){ alert("单击了保存按钮"); }</script>案例

事件流事件流主流浏览器的事件模型冒泡型事件调用在目标元素上注册的事件处理函数后，事件会冒泡到DOM根节点，这会一直到Document对象，最后到达Window对象。事件冒泡为在大量单独文档元素上注册处理程序提供了替代方案，即在共同的祖先元素上注册一个处理程序来处理所有的事件。如：在<form>元素上注册“send”事件处理程序，这样可以取代在表单的每个元素上注册“send”事件处理程序。捕获型事件最先调用Window对象的捕获处理程序，然后是Document对象的捕获处理程序，接着是body对象，再然后是DOM树向下，以此类推，直到调用事件目标的父元素的捕获事件处理程序。直到调用事件目标的父元素的捕获事件处理程序。事件对象事件对象在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。如：

鼠标操作导致的事件对象中，会包含鼠标位置的信息，

键盘操作导致的事件对象中，会包含按下的键有关的信息，注册与移除事件监听器阻止事件冒泡//event为事件对象button.addEventListener('click',function(event){ console.log('1.YouclickButton'); event.stopPropagation(); console.log('StopPropagation!');},

false);

鼠标的单击事件鼠标的单击事件单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时放开鼠标键的这一完整过程。在使用对象的单击事件时，如果在对象上按下鼠标键，然后移动鼠标到对象外再松开鼠标，单击事件无效，单击事件必须在对象上按下松开后，才会执行单击事件的处理程序。鼠标的按下或松开事件鼠标的按下松开事件鼠标的按下和松开事件分别是onmousedown和onmouseup事件。onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。鼠标的移入移除事件鼠标的移入移除事件鼠标的移入和移出事件分别是onmouseover和onmousemove事件。onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmousemove事件在鼠标移出对象上方时触发事件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。鼠标的移动事件鼠标的移动事件鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。键盘事件的使用键盘事件键盘事件包含onkeypress、onkeydown和onkeyup事件。onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作。onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作。键盘事件按键键值按键键值按键键值按键键值A(a)65J(j)74S(s)83149B(b)66K(k)75T(t)84250C(c)67L(l)76U(u)85351D(d)68M(m)77V(v)86452E(e)69N(n)78W(w)87553F(f)70O(o)79X(x)88654G(g)71P(p)80Y(y)89755H(h)72Q(q)81Z(z)90856I(i)73R(r)82048957案例加载与卸载事件加载与卸载事件加载事件（onload）是在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件（unload）是在卸载网页时触发相应的事件处理程序，卸载网页是指关闭当前页或从当前页跳转到其他网页中，该事件常被用于在关闭当前页或跳转其他网页时，弹出询问提示框。页面大小事件页面大小事件页面的大小事件（onresize）是用户改变浏览器大小时，触发的事件处理程序，它主要用于固定浏览器的大小。案例获得焦点与失去焦点事件获得焦点与失去焦点事件获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。焦点修改事件焦点修改事件焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件的处理程序。表单提交与重置事件表单提交与重置事件表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit），在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。案例小结本章重点讲解JavaScript中的事件处理，主要讲解了事件处理、事件模型和常用的事件。其中，需要读者们理解事件的处理过程、常用的事件以及在JavaScript和HTML中事件的调用方法。上机指导上机指导functionkeydown(){ if(event.keyCode==8){ event.keyCode=0; event.returnValue=false; alert("当前设置不允许使用退格键"); }if(event.keyCode==13){ event.keyCode=0; event.returnValue=false; alert("当前设置不允许使用回车键"); }if(event.keyCode==116){ event.keyCode=0; event.returnValue=false; alert("当前设置不允许使用F5刷新键"); }if((event.altKey)&&((window.event.keyCode==37)||(window.event.keyCode==39))){ event.returnValue=false; alert("当前设置不允许使用Alt+方向键←或方向键→"); }if((event.ctrlKey)&&(event.keyCode==78)){