《从js到ajax--03javascript对象与事件剖析.》由会员分享，可在线阅读，更多相关《从js到ajax--03javascript对象与事件剖析.（52页珍藏版）》请在金锄头文库上搜索。
1、JavaScript对象和事件,主要内容,Document getElementById() getElementsByName() getElementsByTagName() 事件,1.Document的一些方法,getElementById() 返回对拥有指定 id 的第一个对象的引用。 getElementsByName() 返回带有指定名称的对象集合。 getElementsByTagName() 返回带有指定标签名的对象集合。,1.1 document.getElementById(), function getValue() var x = document.getElement
2、ById(“myHeader“) alert(x.innerHTML) 这个是标题 ,效果,1.2 document.getElementsByName,该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。 另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。,function getElements() var x = document.getElementsByName(“myInput“
3、); alert(x.length); ,效果,1.3 document.getElementsByTagName(),getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 语法 document.getElementsByTagName(tagname) 说明 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。,2.事件,什么是事件？ 事件是用户在访问页面时执行的操作。事
4、件处理是一项重要技术，它包含了用户与页面的所有交互。指DHTML对象在状态改变、操作鼠标或键盘时触发的动作,2.1 常用事件,对象事件,onclick单击 ondblclick双击 onmousedown鼠标按下 onmouseup鼠标弹起 onmouseover鼠标移入 onmouseout鼠标移出,onkeypress 按过键盘 onkeydown 键盘按下 onkeyup 键盘弹起,onload 文档装载完毕 onunload 退出文档 onchange 值发生变化 onfocus 获得焦点 onblur 失去焦点 onresize调整窗口大小 onsubmit表单提交,鼠标事件,键盘事
5、件,状态事件,2.2 事件的调用方式,（1）通过HTML标记使用事件 该方法是直接在HTML标记中指定事件处理程序，例如在和标记中指定。 ,例： ,实例,2.2 事件的调用方式,（2）指定特定对象的特定事件 该方法是在JavaScript的标记中指定特定的对象，以及该对象要执行的事件名称，并在和标记中编写事件处理程序代码。, window.onunload(alert(“欢迎光临!“); ,2.3 鼠标键盘事件,鼠标的单击事件 鼠标的按下或松开事件 鼠标的移入移出事件 鼠标移动事件 键盘事件,2.3.1鼠标的单击事件,单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象
6、上，按下鼠标键，在没有移动鼠标的同时放开鼠标键的这一完整过程。 单击事件一般应用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象和Submit对象，Button对象一般只会用到onclick事件处理程序，因为该对象不能从用户那里得到任何信息，如果没有onclick事件处理程序，按钮对象将不会有任何作用。,例子, var Arraycolor=new Array(“olive“,“teal“,“red“,“blue“,“maroon“,“navy“,“lime“,“fuschia“,“green“,“purple“,“gray“,“yello
7、w“,“aqua“,“white“,“silver“); var n=0; function turncolors() if (n=(Arraycolor.length-1) n=0; n+; document.bgColor = Arraycolorn; , 用按钮变换背景颜色 ,效果,2.3.2鼠标的按下或松开事件,鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。,例子, function te
8、xtcolor(cursor, i) if (i = 0) cursor.style.color = “#0000FF“; else cursor.style.color = “#E7D745“; JavaScript,效果,2.3.3鼠标的移入移出事件,鼠标的移入和移出事件分别是onmouseover和onmouseout事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmouseout事件在鼠标移出对象上方时触发事件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。,例子,function visible(cursor,i) if (
9、i=0) cursor.filters.alpha.opacity=100; else cursor.filters.alpha.opacity=30; ,效果,2.3.4鼠标移动事件,鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。,例子,var x = 0, y = 0; function MousePlace() x = window.event.x; y = window.event.y; window.status = “X: “ + x + “ “ + “Y: “ + y; docume
10、nt.onmousemove = MousePlace;,效果,2.3.4键盘事件,键盘事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作。Onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作。,字母和数字键的键码值,数字键和功能键键码值,例子, function Refurbish() if (window.event.keyCode=
11、97) location.reload(); document.onkeypress=Refurbish; ,效果,2.4 页面事件,页面事件是在页面加载或改变浏览器大小、位置，以及对页面中的滚动条进行操作时，所触发的事件处理程序。通过页面事件对浏览器进行相应的控制。 加载与卸载事件 页面大小事件,2.4.1加载与卸载事件,加载事件（onload）是在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。 卸载事件（unload）是在卸载网页时触发相应的事件处理程序，卸载网页是指关闭当前页或从当前页跳转到其他网页中，该事件常被用于在关闭当前页
12、或跳转其他网页时，弹出询问提示框。,2.4.2页面大小事件,页面的大小事件（onresize）是用户改变浏览器的大小时触发事件处理程序，它主要用于固定浏览器的大小。, function fastness() window.resizeTo(600,450); document.body.onresize=fastness; document.body.onload=fastness; ,效果,2.5 表单事件,表单事件实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式，这里所指的元素可以是同一类型，也可以是多个不同类型的元素。,2.5.1获得焦点与失去
13、焦点事件,获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。,例子, function myFunction(x) x.style.background = “yellow“; 请输入英文字符： 当输入字段获得焦点时，会触发改变背景颜色的函数。,效果,2.5.2失去焦点修改事件,失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。,例子, 黑 黄 蓝 绿 红 紫 ,续, function Fcolo
14、r() var e=window.event; var obj=e.srcElement; form1.textfield.style.color=obj.optionsobj.selectedIndex.value; ,效果,2.5.3表单提交与重置事件,表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit）,在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。 表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始
15、值。一般用于清空表单中的文本框。,2.6滚动字幕事件,字幕滚动事件主要是在标记中使用，该标记虽然不能实现多样化的字幕滚动效果，但应用起来十分简单，可以使用最少的语句来实现字幕滚动的效果。 onbounce事件 onstart事件,2.6.1 onbounce事件,onbounce事件是在标记中的内容滚动到上下或左右边界时触发的事件处理程序，该事件只有在标记的behavior属性设为aloernate时才有效。,2.6.2 onstart事件,onstart事件是在标记中的文本开始显示时触发事件处理程序。可以通过该事件在滚动内容显示时，设置其颜色、样式、滚动方向等。,2.7编辑事件,编辑事件是在
16、浏览器中的内容被修改或移动时所执行的相关事件。它主要是对浏览器中被选择的内容进行复制、剪切、粘贴时的触发事件，以及在用鼠标拽动对象时所触发的一系列事件的集合。,2.7.1文本编辑事件-复制事件,复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序，复制事件有onbeforecopy和oncopy两个事件，onbeforecopy事件是将网页内容复制到剪贴版时触发事件处里程序，oncopy事件是在网页中复制内容时触发事件处里程序。,例子, function pp() alert(“该页面不允许复制“); return false; 其实，要是想屏蔽网页中的复制功能，可以直接在标记的onbeforecopy或oncopy事件中用JavaScript语句来实现。代码如下： ,效果,2.7.2文本编辑事件-剪切事件,剪切事件是在浏览器中剪切被选中的内容时触发事件处理程序，剪切事件有onbeforecut和oncut两个事件，onbeforecut事件是当页面中
