JS day12 事件驱动函数

最新推荐文章于 2019-11-07 00:03:29 发布

肝JOJO

最新推荐文章于 2019-11-07 00:03:29 发布

阅读量147

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/100574372

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

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

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

二.什么是事件?

和页面交互的行为称之为事件.比如:
①鼠标点击某个按钮(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>

肝JOJO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS day12 事件驱动函数

一.什么是事件驱动函数?在和页面交互过程中所调用的函数,该函数被称为事件驱动函数.二.什么是事件?和页面交互的行为称之为事件.比如:①鼠标点击某个按钮(onclick)②鼠标悬浮或离开③到某个区域时(onmouseover.onmouseout).④文本框获取焦点和失去焦点时(onfocus.onblur)等三.如何实现?使用:document.getElementById(“b...
复制链接

扫一扫