HTML DOM 事件的使用技巧
1、一个简单的点击文字就改变内容的案例。
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='变变变!'">点我变给你看</h1>
<h2 onclick="this.innerHTML='好好好!'">我也会一点就变</h1>
</body>
</html>
2、上面这个简单的例子我们也可以用一个函数来实现它。
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="变变变！";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">一点我就变</h1>
</body>
</html>
3、除了直接点击文本来触发函数以外，我们还可以用按钮来触发函数。
<!DOCTYPE html>
<html>
<body>
点开下面<em>displayDate()</em>这个函数
<button onclick="displayDate()">你点啊</button>
<script>
function displayDate()
{
document.getElementById("日期").innerHTML=Date();
}
</script>
<p id="日期">
</body>
</html>
4、把所有的赋值过程写入java script 的过程。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
点按钮就有变化<em>displayDate()</em>发挥作用
<button id="按钮">点我啊</button>
<script>
document.getElementById("按钮").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("我变").innerHTML=Date();
}
</script>
<p id="我变">
</body>
</html>
5、从上面这个例子可以看出来，按钮的事件流程，在网页上写入文本的事件流程都在 java script里面实现了!
6、一个在输入框把字母变成大写的程序。我们可以设计一个变量元素，把这个变量元素变成大写。这就是 java script 的目标，而我们在body 部分可以引用一下这个 java script，放入输入杠的声明当中，这个java事件就成功了!
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("大写框");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
英文字母输入：<input type="text" id="大写框" onchange="myFunction()">
鼠标离开，字母大写
</body>
</html>
