JS day12 事件驱动函数

一.什么是事件驱动函数?

在和页面交互过程中所调用的函数,该函数被称为事件驱动函数.

二.什么是事件?

和页面交互的行为称之为事件.比如:
①鼠标点击某个按钮(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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值