什么是事件驱动函数?
在和页面交互的过程中所调用的函数,该函数被称之为事件驱动函数
什么是事件?
和页面交互的行为称之为事件。比如:鼠标点击某个按钮时(onclick)、鼠标浮动或离开到某个区域时(onmouseover、onmouseout)、文本框获取焦点和失去焦点时(onfocus、onblur)等
我们可以通过document.getElementById找到符合条件的标签节点。然后我们可以同事件驱动函数,给当前的按钮绑定一系列的操作。完成用户交互。
<body>
<input type="button" value="按钮" id="btn">
</body>
<script>
var oBtn = document.getElementById("btn");
alert(oBtn);
</script>
【注】这种写法一般不用,一般情况下,我们标签中script标签写在head
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){ //写在这里的代码,在页面加载完成以后执行
var oBtn = document.getElementById("btn");
alert(oBtn);
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
接下来给按钮添加事件驱动函数
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
//单击onclick,这个函数是在按钮被点击以后触发的
oBtn.onclick = function(){
alert("单击");
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
点击清除文本
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
var oTxt = document.getElementById("txt");
//给按钮添加事件驱动函数
oBtn.onclick = function(){
//要将文本的内容清空
oTxt.value = "";
/*
//输出文本中的内容
alert(oTxt.value);
//修改文本中的内容
oTxt.value = "修改后的文本";
*/
}
}
</script>
</head>
<body>
<input type="text" value="默认的文字" id="txt">
<input type="button" value="清空" id="btn">
</body>