4事件
Posted 小飞虫bin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4事件相关的知识，希望对你有一定的参考价值。
1事件及其处理程序事件是制定活动发生时生成的信号，javascript认识这些信号，且能够建立脚本来对这些事件起作用。
blur，当输入焦点从窗体元素上删除时发生。
click，用户在链接或窗体元素上单击时发生。
change，用户改变窗体字段的值时发生。
focus，对窗体元素给定输入焦点时发生。
load，页面加载到浏览器时发生。
mouseover，用户在超文本链接上移动指针时发生。
select，用户选择窗体元素的字段时发生。
submit，提交窗体时发生。
unload，用户离开页面时发生。
例如：<input type="text" onChange="checkField(this)">//这里的this是指当前字段对象即text。
<input type="text" onChange="
if(parseInt(this.value)<=5){
alert("please enter a number greater than 5");
}">
模拟事件
除了事件处理程序外，模拟事件也是可能的。下面使用语Javascript的事件方法：
blur()、click()、focus()、select()、submit()、onchange()
<html>
<head>
<title>Events</title>
<script>
<!--
function react(field){
alert("please Enter a value");
field.focus();
}
//-->
</script>
</head>
<body>
<form method=post>
<input type=text name=stuff onFocus="react(this);">
</form>
</body>
</html>
事件处理程序onLoad与onUnload
当页面完成加载时生成onLoad事件，同样用户退出页面时发生onUnload事件。onLoad与onUnload事件作为body html标识符的1个特性使用。如：
<body onLoad="hello()" onUnload="goodbye()">
<html>
<head>
<title>example</title>
<body onLoad="alert(‘welcome to my page!‘);" onUnload="alert(‘goodbye!sorry to see you go!‘);">
</body>
</html>
window.open()的使用
该方法需要两个变元window.open("URL","window name");第一个参数是要打开的web页面的url，后一个参数是打开的窗口的名称。
2事件与窗体
一般窗体事件
用于处理窗体的最普通的事件是focus,blur以及change事件，与其相应的事件处理程序为onFocus、onBlur和onChange。利用这些事件，程序就能够记录何时用户在窗体的字段之间移动，以及何时改变输入字段的值。
其他窗体事件
在窗体中还有其他使用的事件，这些事件包括click和submit，相应的事件处理程序为onClick和onSubmit。
在建立函数是用到this关键字，this关键字是指当前的对象，在事件处理程序中，this关键字是指使用于事件处理程序的对象。如要一个文本组件永远获不到焦点：
<input type="text" name="enter" value="" onFocus="this.blur()">
<input type="text" name="enter1" value="" onFocus="display(this.form);">
注意这里的this指html窗体内当前字段的对象，this.form指包含当前字段的窗体的对象。
3form对象
form对象的属性
action:包含FORM标识符的ACTION特性值的字符串。
elements:对窗体的每个元素包含一个入口的数组。
encoding:包含MIME类型的字符串，反映FORM标识符ENCTYPE特性。
name:包含FORM标识符的NAME特性值的字符串。
target:包含由窗体提交普唑的窗口名字的字符串。
form对象的方法
窗体只有1个可用于它的方法:submit()。该方法模仿提交按钮。
例如：
<html>
<head>
<title>example</title>
<script language="javascript">
<!--
function checkValue(form){
if(form.answer.value=="100"){
form.submit();
document.write("答对了");
}
else{
form.answer.value="";
}
}
//-->
</script>
</head>
<body>
<form method=post onSubmit="return false;">
what is 10*10?<input type="text" name="answer" onChange="checkValue(this.form);">
</form>
</body>
</html>
返回false给onSubmit事件处理程序可以保证用户在文本输入字段内按回车时不提交窗体。
4窗体元素的使用
button,提供除提交按钮或复位按钮以外的按钮的新元素。<INPUT type="button">
checkbox,复选框<input type="checkbox">
hidden，隐含字段<input type="hidden">
password,口令字段，每一击键会在该字段内显示出一个星号。<input type="password">
radio，单选钮<input type="radio">
reset,复位按钮<input type="reset">
select,选择列表<select><OPTION>option1</OPTION><OPTION>option2</OPTION></select>
submit,提交按钮<input type="submit">
text,文本字段<input type="text">
textArea,多行文本输入字段<textarea>default text</textarea>
button元素
按钮元素用INPUT标识符来确定：
<input type="button" name="name" value="buttonName">
该按钮元素有两个属性：name与value
该按钮元素只有1个事件处理程序onClick，与其对应的方法为1个click().
checkbox元素
checkbox元素的属性与方法
checked,表示复选框元素的当前状态。
defaultChecked,表示元素的缺省状态。
name,表示在INPUT标识符内确定的元素的名字.
value,表示在INPUT标识符内确定的元素的当前值
click(), 模拟复选框内的单击(方法),onClick事件处理程序。
hidden元素
隐含字段能够用来存储需要传送到服务器以及窗体提交的值。hidden元素只有2个对应的属性name和value，两者均像其他对象一样为字符串值。hidden对象没有方法与事件处理程序。
password元素
password对象有3个属性：defaultValue，name以及value。password字段包括更多的方法focus()、blur()和select()以及相应的事件处理程序onFocus、onBlur、onSelect。
radio元素
radio元素将若干个单选钮组合成1组而且在给定的时间内只能选择1个按钮。
<input type="radio" name="test" value="1" checked>1<br>
<input type="radio" name="test" value="2">2<br>
<input type="raido" name="test" value="3">3<br>
radio对象的属性与方法
checked，表示radio元素的当前状态.if(test[1].checked)
defaultChecked，表示元素的缺省状态
index，表示组中当前所选单选钮的索引。
length,表示组中单选钮的个数。
name,表示在INPUT标识符中确定的元素的名字.
value，表示在INPUT标识符中确定的元素的当前值
click()，模拟单选钮内的单击。事件处理程序onClick。
由于单选按钮组有多个元素，因此，radio对象有索引起始于0的单选钮的数组.test[0]/test[1]...
<html>
<head>
<title>example</title>
<script language="javascript">
<!--
function jieguo(form){
//判断单选按钮的那一项当前被选中
if(form.action[0].checked){
form.result.value=form.entry.value*2;
}else{
form.result.value=form.result.value*form.result.value;
}
}
//-->
</script>
</head>
<body>
<form method=post onSubmit="return false;">
Value:<input type=text name="entry" value="0" onChange="jieguo(this.form);">
<br>
Action:<br>
<input type="radio" name="action" value="twice" checked>twice<br>
<input type="radio" name="action" value="square">square<br>
Result:<input type="text" name="result" value="">
</form>
</body>
</html>
reset元素
reset对象有两个属性name和value，1个方法click()。onClick事件处理程序。reset对象能够用来将窗体清除成一些值而不是缺省值。
**********************
select元素
html窗体内的选择列表具有可选择项的弹出式菜单或滚动列表的形式出现。列表的建立用到2个标识符SELECT和OPTION。如：
<SELECT NAME="test">
<OPTION SELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
以上建立了一个下拉式菜单，利用size特性能够建立1个滚动列表。size特性表示可见元素数。如果没有使用MULTIPLE属性则只能做出1个选择，如果使用了MULTIPLE属性，用户可以进行多个选择。
<SELECT NAME="test" SIZE=2 NULTIPLE>
与单选按钮一样，选择列表以索引起始于0的数组保存。数组是称为options的select对象的1个属性。除了options数组外，select对象有selectedIndex属性，该属性包含当前所选择项的索引值。
选择列表的每个选项也有若干属性。defaultSelected表示选项是否在OPTION表示符内缺省选择。index属性包含options数组中当前选项的索引值。selected表示选项的当前状态。text包含在菜单中指定选项显示的文本值。value包含OPTION标识符内value属性的值。
select对象没有可用的方法，然而select对象有3个事件处理程序:onBlur、onFocus、onChange。与text对象一样。
以下是javascript操作select的对象objSelect的例子：
触发select的onchange事件。
<select name= "selectx " onchange= "alert(this.value); ">
<option value=a> 1 </option>
<option value=b> 2 </option>
</select>
function testSelect(self){
//我们需要将select的某个option设为选中，在调用onchange()方法来触发change事件。
self.value=a;//或者self.options[0].selected=true;
self.onchange();
}
<input type= "button " value= "改变 " onclick= "testSelect(this)">
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0;
****************
submit元素
该按钮利用form标识符内表示的method方法，将窗体每一字段的当前信息提交到form标识符的ACTION特性中所指定的URL。submit有name和value属性以及click()方法与onClick事件处理程序。使用submit的click()方法相当于单击才submit元素将表单提交。
text元素
text对象有3个属性即：defaultValue、name和value。有3个方法模拟用户事件即：focus()、blur()和select()。有4个事件处理程序：onFocus,onChange和onSelect()。
textarea元素
TEXTAREA标识符提供了由容器定义的定制大小的多行文本输入字段。如：
<textarea name="fieldName" Rows=10 clos=25>
default text
</textarea>
textarea对象和text具有一样的属性和方法。
5elements[]数组
在form对象的属性中，窗体内的所有元素可以由数组elements[]引用.例如：
<form method=post name=testform>
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
</form>
那么除了明显的document.testform.one、document.testform.two以及document.testform.three外还可以把3个元素表示为：document.testform.elements[0]、document.testform.elements[1]、document.testform.elements[2]
6forms[]数组
虽然事件处理程序一般用于单个窗体或字段，但有时能够用来引用与页面上其他窗体相关的窗体。document.forms[]数组可起到该作用，它是的有可能在同一页面上有多个相同的窗体，用document.forms[]数组要比用窗体的名字更容易达到这一点。
7常用事件
Click事件与Dblclick事件
Click事件：当一个页面的一个位置、按钮、复选框或一个超级链接被用户单击时，产生该事件。
Dblclick事件:当用户用鼠标双击一个超级链接或其他页面元素就会产生一个Dblclick事件。
MouseDown事件与MouseUp事件
MouseDown事件，当用户按下鼠标上的一个键时就会产生一个MouseDown事件。
MouseUp事件，当用户施放鼠标上的一个键时就会产生一个MouseUp事件。
MouseOver事件、MouseOut事件和MouseMove事件
MouseOver事件，当用户将鼠标已过一个超级链接或其他页面元素时就会产生一个MouseOver事件。
MouseOut事件，当用户将鼠标移开并脱离一个超级链接或其他页面元素时就会发生MouseOut事件。
MouseMove事件，当用户移动鼠标进入时就会发生MouseMove事件。
KeyDown事件、KeyPress事件和KeyUp事件
例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function test(obj,event){
alert(event.keyCode);
alert(obj.id);
}
window.status="按下键盘上的键";
</script>
</head>
<body>
//传递this对象和event对象
<input type="text" id="key" onkeydown="test(this,event)"/>
</body>
</html>
onLoad事件与UnLoad事件
onLoad事件：onLoad事件一般在浏览器提取页面之后，在<body>标记块的内容显示出来之前发生。
UnLoad事件：当浏览器卸载一个文档时就发生UnLoad事件。
onFocus事件与onBlur事件
当用户使用鼠标或键盘选中一个页面元素,产生onFocus事件。当页面元素、窗口或框架失去焦点时，就会产生Blur事件。
Submit事件和Reset事件
当用户单击表单中的一个提交按钮，生成Submit事件。当表单被重置时就会产生一个Reset事件。
例：
<html>
<head>
<script language="javascript">
function checkdata(){
var inputdata=document.form1.text1.value;
if(0<inputdata&&inputdata<100)
return (true)//函数返回true，表示提交的内容正确，那么Submit事件就会向服务器提交。
else{
alert("你输入的数值"+inputdata+"超出了范围");
return(false)//函数返回false，表示提交的内容不正确，Submit事件会放弃向服务器提交。
}
}
</script>
</head>
<body>
<form name="form1" method="post" onSubmit="checkdata()">
请输入100以内的正整数:
<input type="text" name="text1" value="1" size="5">
<input type="
}
onChange事件与onSelect事件
onChange事件：当一个页面元素如文本框、多行文本失去鼠标或键盘的焦点或值被改变时会产生Change事件。
onSelect事件：当用户选择了文本框或多行文本框内的一个文本时就会产生Select事件。只针对文本。
Move事件和Resize事件
Resize事件：当用户调整窗口或框架的大小时，会产生一个Resize事件。
Move事件：当用户移动窗口或框架的时会产生Move事件。
onDblClick 鼠标双击
onKeyDown 键被按下
onKeyPress 键被按下然后被释放
onKeyUp 键被释放
onMouseDown 鼠标被按下
onMouseMove 鼠标移动
onMouseUp 鼠标被释放
onResize 窗口被调整大小
下面是event对象属性的描述，以及Netscape和IE处理它们的方式：
描述 Microsoft属性 Netscape 属性
代表事件类型的字符串 type type
代表最初发送给对象事件的字符串 srcElement target
光标横坐标 x x
光标纵坐标 y y
相对于页面的横坐标 clientX pageX
相对于页面的纵坐标 clientY pageY
相对于屏幕的横坐标 screenX screenX
相对于屏幕的纵坐标 screenY screenY
键代码 keyCode which
Netscape(火狐)现在既支持keyCode属性也支持which属性。
例如：
if(event.keyCode==13)alert("enter!");
8一般html元素都具有的属性和事件
属性
accessKey,取值为单个字符的字符串。可以为元素指定一个键盘字符，当键入Alt+key组合，该元素就拥有了焦点。指定的字符可以大写或小写，并不区分大小写。当元素获得焦点，按下空格键就和鼠标点击元素一样。
disabled,取值为boolean。将该元素设为不可用。
childNodes,节点对象数组。
children属性包括元素对象的一个数组，这些元素包括在当前对象中。不像childNodes属性，children不考虑文本节点，
heigth和width，取值为整型，表示元素的高和宽。
id，取值字符串，通过id属性将一个标识符赋给该对象。
blur()与focus()，elementObject.blur()方法从元素中移除焦点。elementObject.focus()把焦点带给元素。
click()方法让脚本完成和点击元素相同的动作，它只在行为类似按钮的Input元素上可用。它会触发onClick事件。
getAttribute("attributeName")方法返回当前对象的特定属性的值，可以使用该方法作为得到对象属性的替代方法。
getBoundingClientRec()，返回一个TextRectangle对象，该对象有top、left、bottom和right四个属性。反应了元素占据的空间。
onCopy和onCust事件在用户或脚本在当前对象上启动复制或剪切编辑动作后立即触发。
onDblClick、onClick、onMouseDown、onMouseUP、onDrag事件处理。
以上是关于4事件的主要内容，如果未能解决你的问题，请参考以下文章