1, Form事件(应用到所有HTML元素,但常用与form表单内)
Onblur属性:焦点外触发事件
如:
Functiondisplay()
{
Alert(“onblur”); //即当用户离开输入框后显示此对话框提示;
}
<form>
<input type = “text” name = “name” >
</form>
Onfocus属性:焦点处触发事件
如:
Functiondisplay()
{
Alert(“onfocus”); //即当用户进入输入框后显示此对话框提示;
}
<form>
<input type = “text” name = “name” >
</form>
Onchange属性:元素值被改变时触发事件
如:
Functiondisplay()
{
Alert(“Onchange”); //即当用户进入输入框输入内容后,改变了原来的value值后显示此对话框提示;
}
<form>
<input type = “text” name = “name” value = “hello”>
</form>
Onselect属性:元素被选中时触发的事件;
如:
Functiondisplay()
{
Alert(“Onselect”); //当value值被选中时显示;
}
<form>
<input type = “text” name = “name” value = “hello”>
</form>
Onsubmit 事件:当表单提交时触发的事件
如:
Functiondisplay()
{
Alert(“Onsubmit”); //当点击submit按钮表单进行提交时触发的事件;
}
<formonsubmit = “display()”>
<input type = “text” name = “name” value = “hello”>
<input type = “submit” value = “submit”>
</form>
2, keyboard事件
onkeydown事件:当用户按下按键时触发
如;
Function display()
{
Alert(“onkeydown”); //当用户按下键盘时触发;
}
<formonsubmit = “display()”>
<input type = “text” name = “name” value = “hello”onkeydown = display()>
</form>
Onkeypress事件:当用户敲下按键时触发:
如:
Function display()
{
Alert(“Onkeypress”); //当用户敲下键盘时显示;
}
<form οnsubmit= “display()”>
<input type = “text” name = “name” value = “hello”onkeypress = display()>
</form>
Onkeyup事件:当用户松开按键时触发事件
如:
Function display()
{
Alert(“onkeyup”); //当用户松开键盘时显示;
}
<form οnsubmit= “display()”>
<input type = “text” name = “name” value = “hello”onkeyup = display()>
</form>
改变输入文本的颜色:
a,找到需要改变的id属性;
b,设置新属性;
如:
Document,getElementById(“fname”).style.color= “red” //找到ID号为“fname”然后设置颜色为红色;
3, window事件
针对window对象触发的事件,应用到<body>标签中;
常用事件:
Onload:在页面结束加载之后触发
如:
Function load()
{
Alert(“onload”);
}
<body οnlοad= “load()”>
<p>This istext<p>
<body>
4,mouse事件
由鼠标或用户动作触发的事件
Onclick事件:元素上发生鼠标点击时事件
如:
Function display()
{
Alert(“onclick”); //当用户点击按钮时显示;
}
<form >
<input type = “text” name = “name” value = “hello”onclick = display()>
</form>
Ondblclick事件:元素上发生双击时触发的事件;
如;
Function display()
{
Alert(“Ondblclick”); //当用户双击按钮时显示;
}
<form >
<input type = “text” name = “name” value = “hello”Ondblclick= display()>
</form>
Onmousedown事件:当鼠标按下时触发的事件;
如:
Functiondisplay()
{
Alert(“Onmousedown”); //当用户按下鼠标时显示;
}
<form >
<input type = “text” name = “name” value = “hello”Onmousedown= display()>
</form>
Onmousemove事件:当鼠标指针移动到元素上触发的事件
如:
Function display()
{
Alert(“Onmousemove”); //当鼠标移动到输入框时显示;
}
<form >
<input type = “text” name = “name” value = “hello”Onmousemove= display()>
</form>
Onmouseup事件:当鼠标释放时触发事件:
Functiondisplay()
{
Alert(“Onmouseup”); //当鼠标当鼠标释放时触发;
}
<form >
<input type = “text” name = “name” value = “hello”Onmouseup= display()>
</form>
Onmouseout事件:当鼠标移开元素时触发
Functiondisplay()
{
Alert(“Onmouseup”); //当鼠标移开元素时触发;
}
<form >
<input type = “text” name = “name” value = “hello”Onmouseup= display()>
</form>