HTML事件处理之“静态与动态指定”
静态指定：
基本语法：<标记 事件句柄1=“事件处理程序”> .....</标记>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function text(message){
alert(message);
}
</script>
</head>
<body>
<form action="">
<input type="button" value="通过js语句输出信息" onclick="alert('通过js语句输出信息')">
<input type="button" value="通过函数输出信息" onclick="text('调用函数输出信息')">
</form>
</body>
</html>
动态指定：
基本语法：<事件源对象>.<事件句柄>=function(){<事件处理程序>;}
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#inp{
width:100px;
height:100px;
color:green;
}
</style>
<script type="text/javascript">
function clickHandler(){
alert("代码出发事件，即将提交表单");
return true;
}
</script>
</head>
<body>
<form action="" name="myform">
<input id="inp" type="button" name="mybutton" value="提交">
</form>
<script type="text/javascript">
//向button元素动态分配onclick事件
document.getElementById('inp').onclick=function(){
return clickHandler();
}
myform.mybutton.onclick();//这个触发效果其实与Java中的.方法似乎是类似的
</script>
</body>
</html>
