一.什么是事件驱动函数?
在和页面交互过程中所调用的函数,该函数被称为事件驱动函数.
二.什么是事件?
和页面交互的行为称之为事件.比如:
①鼠标点击某个按钮(onclick)
②鼠标悬浮或离开
③到某个区域时(onmouseover.onmouseout).
④文本框获取焦点和失去焦点时(onfocus.onblur)等
三.如何实现?
使用:document.getElementById(“b”);
找到符合条件的标签节点,然后可以使用事件驱动函数给按钮绑定操作,完成用户交互
[注]:此时无法找到这个按钮,因为代码自上而下执行.
解决方法:
1.将script写在body下面 (一般不用)
2.使用window.onload函数
例题:
1.单击按钮弹出点击
<script type="text/javascript">
window.onload=function(){ //写在这里面的代码会在页面加载完成之后执行
var ob=document.getElementById("b"); //找到符合标条件的标签节点
ob.onclick = function(){ //给按钮添加事件驱动函数,如单击
alert("单击");
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="b">
</body>
2.清除文本内容
<script type="text/javascript">
window.onload=function(){
var ot=document.getElementById("text"); //找到标签节点
var ob=document.getElementById("clear");
ob.onclick=function(){ //添加事件驱动函数
ot.value=""; //点击按钮使使文本为空
}
}
</script>
<body>
<input type="text" value="默认文字" id="text">
<input type="button" value="清除" id="clear">
</body>
3.实现一个阶乘计算
<script type="text/javascript">
window.onload=function(){
var a=document.getElementById("num");
var b=document.getElementById("jc");
var c=document.getElementById("output");
function fac(n){
if(n==1){
return 1;
}
return fac(n-1)*n;
}
var i=fac(3);
b.onclick=function(){
c.value=i; //给文本框赋值为函数的输出值
}
}
</script>
<body>
<input type="text" value="3" id="num">的
<input type="button" value="阶乘" id="jc">为
<input type="text" value="" id="output">
</body>