1.常见的事件
(1)页面初始化事件 onload
<script>
function testLoad(){
alert("页面初始化事件");
}
</script>
<body οnlοad="testLoad();">
<script>
(2)按钮点击事件 onclick
<script>
function testclick(){
alert("按钮点击事件");
}
</script>
<input type="button" id="but1" value="测试按钮点击事件" οnclick="testclick();"/>
<script>
//当页面打开的时候
window.οnlοad=function(){
//得到按钮的dom对象
var butobj=document.getElementById("but1");
butobj.οnclick=function(){
alert("按钮点击事件");
}
}
</script>
(3)onchange 事件,当用户改变输入字段的内容时触发
<script>
function testchange(){
alert("文本框内容改变事件");
}
</script>
<input type="text" id="text1" value="测试onchange事件" οnchange="testchange();"/>
//当页面打开的时候
window.οnlοad=function(){
//得到文本框对应的dom对象
var textObj=document.getElementById("text1");
textObj.οnchange=function(){
alert("文本框内容改变事件");
}
}
(4)onfocus当获得焦点时触发
(5)onblur当失去焦点时触发
//得到文本框对应的dom对象
var textObj2=document.getElementById("text2");
textObj2.οnfοcus=function(){
textObj2.value="";
}
textObj2.οnblur=function(){
var textvalue=textObj2.value;
alert("文本框=="+textvalue);
}
(6)onmouseover 和 onmouseout 事件
//得到div对应的dom对象
var divObj=document.getElementById("div1");
divObj.οnmοuseοver=function(){
divObj.style.width="100px";
divObj.style.height="100px";
}
divObj.οnmοuseοut=function(){
divObj.style.width="200px";
divObj.style.height="200px";
}
(7)onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。
注意:1.设置在form表单上
2.提交表单数据的按钮一定是ty