1.JavaScript事件应用-按钮单击事件
<html>
<head>
<script type="text/javascript">
function myclick(btn){
alert(btn.value);
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="username" value="zhangsan"/>
<input type="button" name="btn1" value="btn1" οnclick="myclick(this)"/>
<input type="button" name="btn2" value="btn2" οnclick="myclick(this)"/>
</form>
</body>
</html>
运行效果:
2.JavaScript事件应用-文本框光标事件
<html>
<head>
<script type="text/javascript">
function myblur(){
alert(document.getElementById("txt1").value);
}
</script>
</head>
<body>
<form name="myform">
<input type="text" id="txt1" οnblur="myblur()" name="username" value="zhangsan"/>
<input type="button" name="btn1" value="btn1" οnclick="myclick(this)"/>
<input type="button" name="btn2" value="btn2" οnclick="myclick(this)"/>
</form>
</body>
</html>
运行效果:
3JavaScript事件应用-下拉菜单change事件
<html>
<head>
<script type="text/javascript">
function mychange(){
var div1=document.getElementById("div1");
var str=document.getElementById("sel").value;
div1.innerHTML="<font color='red'>"+str+"</font>";
}
</script>
</head>
<body>
onchange事件实例
<form name="myform">
<select id="sel" οnchange="mychange()">
<option>红色</option>
<option>蓝色</option>
<option>绿色</option>
</select>
</form>
<div id="div1"></div>
</body>
</html>
运行效果:
4.IE和火狐兼容光标切换
<html>
<head>
<script type="text/javascript">
function mykey1(event){
var tmpEvent = event;
var key=tmpEvent.which?tmpEvent.which:tmpEvent.keyCode;
if(key == 13){
document.getElementById("txt2").focus();
}
}
function mykey2(event){
var tmpEvent = event;
var key=tmpEvent.which?tmpEvent.which:tmpEvent.keyCode;
if(key == 13){
document.getElementById("txt3").focus();
}
}
function mykey3(event){
var tmpEvent = event;
var key=tmpEvent.which?tmpEvent.which:tmpEvent.keyCode;
if(key == 13){
document.getElementById("txt1").focus();
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" id="txt1" onkeypress = "mykey1(event)"/>
<input type="text" id="txt2" onkeypress = "mykey2(event)"/>
<input type="text" id="txt3" onkeypress = "mykey3(event)"/>
</form>
</body>
</html>
运行效果图:
问题总结:
1.onblur事件与onchange事件的区别:
onblur是在失去焦点的时候起作用,不管文本的值是否有改变
onchange是在失去焦点并且文本的值发生了改变的时候起作用,如果值没有改变则不起作用
2.什么是JavaScript事件?JavaScript如何处理事件?
JavaScript 脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应
JavaScript处理事件的过程分为两个步骤:
定义脚本可以处理的事件
提供将这些事件连接到用户提供的JavaScript代码的标准方法
3.JavaScript浏览器事件
onload : 浏览器载入文档事件
onunload : 关闭该文档事件
onblur : 浏览器失去焦点事件
onfocus : 获得焦点事件