JavaScript函数 - 事件驱动 / 四六文摘

什么是事件驱动函数？

最后给大家补充一个知识，叫做事件驱动函数，它到底是做什么的呢？

在页面交互的过程中所调用的函数，该函数被称之为事件驱动函数。

现在先来简单的了解一下，以后会详细讲到

什么是事件？

和页面交互的行为称之为事件

比如：鼠标点击某个按钮时(onclick)、鼠标浮动，或者鼠标离开某一个区域(onmouseover、onmouseout)、文本框获取焦点和失去焦点时(onfocus、onblur)等等

如果我们想给一个按钮绑定一个事件，就要通过事件驱动函数来绑定，并且通过id来找到它

<script type = "text/javascript"> document.getElementById("btn"); </script><body> <input type = "button" value ="按钮" id="btn" /></body>

我们可以通过document.getElementById找到符合条件的标签节点。

然后我们可以同事件驱动函数，给当前的按钮绑定一系列的操作。完成用户交互。

我们先来输出看找的这个btn是否存在

<script type = "text/javascript">var oBtn = document.getElementById("btn"); alert(oBtn); </script><body><input type = "button" value ="按钮" id="btn" /></body>

但是最终运行的结果是null，也就是说它并没有找到这个按钮

因为我们写的script代码在body的上面，执行script时还没按钮代码

解决这个问题的办法有两种：

1.把这个script代码放在body的下面

<body><input type = "button" value =“按钮"id = "btn" /></body><script> var oBtn = document.getElementById("btn"); alert(oBtn);</script>

这时候运行就能看到找到了当前按钮

但是这种写法一般来说不去用，因为一般我们都把script写在上面

2.通过window.onload = function{ } 来获取按钮，写在这里的代码会在页面加载完之后才去执行，我们来验证一下：

下面这个代码会先执行alert弹出1，再从网页显示Hello World!

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script> alert(1); </script> </head><body><h1>Helto World!</h1></body></html>

运行结果顺序：

如果我们将alert写在window.onload中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script>window.onload = function(){ alert(1); } </script></head><body><h1>Hello World!</h1></body></html>

运行结果如下：

两个都显示了出来，虽然看似同时显示，但是是先显示的Hello World，在执行alert

这也就说明window.onload是等页面执行完才执行的

我们回到刚才的例子，用window.onload来找到按钮标签

<head><script type = "text/javascript"> window.onload = function(){var oBtn = document.getElementById("btn"); alert(oBtn); } </script></head><body> <input type = "button" value ="按钮" id = "btn" /></body>

运行效果就可以找到按钮标签了

我们找到按钮标签后，来给按钮添加一个单击行为

<head> <script type = "text/javascript">window.onload = function(){//写在这里代码，在页面加载完成以后执行var oBtn = document.getElementById("btn");//alert(oBtn);

//给按钮添加事件驱动函数//单击onclick这个函数是在按钮被点击以后，触发的。oBtn.onclick = function( ){alert("单击"); } } </script></head><body> <input type = "button" value ="按钮" id = "btn" /></body>

运行结果点击按钮就会弹出对话框为单击，效果如下：

这个就是一个事件驱动函数

举个小例子：

自动清空文本框的内容

分析：

1.先用document.getElementVyId获取文本和按钮

2.再给按钮一个点击.onclick驱动函数

3.在按钮的点击中来通过.value获取文本的内容，使它 = ” ” 空的

<!DOCTYPE html><html lang="en"> <head> <meta charset="“UTF-8"> <title>Document</title> <script type ="text/javascript"> window.onload = function(){ var oBtn = document.getElementById("btn"); var oTxt = document.getElementById("txt"); //给按钮添加事件驱动函数 oBtn.onclick = function(){ //要将文本中的内容清空 oTxt.value =""; } }</script> </head> <body> <input type = "text" value =“默认的文字" id = "txt"/> <input type = "button" value =“清空" id = "btn"/> </body></html>

运行结果如下

如果我们需要输入一个数进行计算的操作，就要把字符串中的数字进行一个转换

- End –

--- web分享，分享的不只是web

JavaScript函数 - 事件驱动

相关推荐