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{
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>

原文地址:https://www.cnblogs.com/lianggegege123/p/12198818.html