事件(Event)在JavaScript中是一个可以被检测到的行为(action)，每个HTML元素都能捕获一定的事件，并执行一些JavaScript代码。每个HTML元素都用一些属性来声明需要捕获的事件，并定义一些处理事件的JavaScript代码。例如：
<input type=”text” size=”30″ value=”/www.i170.com/user/killercat” 你改变了内容’)”>
当你改变文本框中内容然后点回车或者提交按钮时，弹出对话框“你改变了内容”，这里onchange属性说明了对于这个<input>标签，假定你修改了内容并回车或者提交时，则执行alert(‘你改变了内容’)这句代码。
下面有一张表，详细列出了和事件有关的属性和他们的含义(右边的FF表示Firefox，N表示Netscape，下面的数字表示他们支持这个属性的版本)：
* 本表格来源于：https://www.w3schools.com/jsref/jsref_events.asp
事件给出了，用于什么元素是一个问题，下面会有一些例子，里面的一些关键部分，可能在最后被提到：
- onload
常用于标签：<body>
触发：页面载入完成时被触发
常见用途：可以用于读取浏览器信息和Cookie的设置，论坛注册时，可能用到。
例：
<html>
<head>
<meta content=”text/html; charset=UTF-8″>
<title>JavaScript</title>
<script type=”text/javascript”>
i = 5;
function f(){
ele = document.getElementById(“submit”);
ele.innerHTML = time();
if(i == 0)
return;
i–;
setTimeout(“f()”,1000);
}
function time(){
if(i != 0){
return “<input type=submit value=”+i+”秒后可注册 }else{
return “<input type=submit value=”+”可以进行注册 }
}
</script>
</head>
<body > <form>
<div ></div>
</form>
</body>
</html>
- onfocus, onblur, onchange
常用于标签：<input>
触发：元素得到焦点；元素失去焦点；文本域改变
常见用途：检验文本输入等对文本的处理
例：
<html>
<head>
<meta content=”text/html; charset=UTF-8″>
<title>JavaScript</title>
<script type=”text/javascript”>
function f(){
ele = document.getElementById(“name”);
ele.value = “”;
}
</script>
</head>
<body>
<form>
<input type=”text” value=”请输入你的名字” />
</form>
</body>
</html>
<!–文本框被点击以后，”请输入你的名字”会被清除–>
- onsubmit
常用于标签：<form>
触发：submit按钮被点击
常见用途：用于检测表单中的内容
特点：通过onsubmit=”true” or “false”来控制表达是否提交
例：
<html>
<head>
<meta content=”text/html; charset=UTF-8″>
<title>JavaScript</title>
<script type=”text/javascript”>
function check(){
ele = document.getElementById(“web”)
web = ele.value
if(web.search(/^http:\/\/\w+\.\w+\.\w+$/)!=-1){
alert(“验证成功”);
return true;
}
else{
alert(“验证失败”);
return false;
}
}
</script>
</head>
<body>
<form >
<input type=”text” />
<input type=”submit” />
</form>
</body>
</html>
对于更多的事件，可以在使用中去发觉它们的用途了。
为了合理的使用事件，这里还说一些补充的内容：
1) setTimeout方法
用于设置过多少时间启动方法，比如 setTimeout(“f()”,1000)，表示1000毫秒以后，启动方法 f()，然后执行一次。
另外还有一个类似的方法，就是setInterval(“f()”,1000)，表示1000毫秒以后启动方法 f()，以后每1000毫秒就运行一次方法 f()，可以通过clearInterval()取消，比如 t = setInterval(“f()”,1000); 取消, clearInterval(t)。另外 clearTimeout也可以取消 setTimeout对方法的启动。
2) <div>标签，div有一个属性叫做 innerHTML，这很有用，因为在<head>部分的方法，无法通过document.write() 在<body>部分输出，我们这时候可以使用innerHTML属性，进行输出。
3) document.getElementById() 可以通过ID获得一个元素，然后直接通过获取的对象.属性 来修改属性的值，上面就有用到。
Leave A Comment