<香港科技大学html+css+js课堂笔记>week3--DOM模型基础第二部分
8.鼠标事件：
onclick
onmousedown
onmouseup
onmouseover
onmouseout
Eg:
<html><body><script>
function change_colour( new_colour ) {
document.getElementById("myDiv")
.style.background=new_colour;
}
</script>
<div id="myDiv"
style="position:absolute; background:yellow;
left:300; top:100; width:300; fontsize:52pt"
onmouseover="change_colour('red');"
onmouseout="change_colour('yellow');">
Move your mouse over this ...
then move it out...
</div>
</body></html>
9.timer计时器：
setTimeout， setInterval
clearTimeout ，clearInterval
1>setTimeout(do_something, time):
过了time毫秒的时间，执行do_something()函数事件,只执行一次；
2>clearTimeout(the_timer):
解除计数器。
3>setInterval(do_something, time):
过一段time毫秒的时间，执行do_something()函数事件,不断重复执行。
4>clearInterval(the_timer):
接触计数器，定时器。
Eg1:
<html><head><script>
var the_timer, x_position = 0, the_image;
function set_timer() {
the_image = document.getElementById("stones_img");
x_position = x_position + 1;
the_image.style.left = x_position;
the_timer = setTimeout(set_timer, 50); }
</script></head>
<body onload="set_timer()">
<img src="stones.png" id="stones_img"
style="position:absolute; left:0">
<button onclick="clearTimeout(the_timer)">
Stop!</button>
</body></html>
Eg2:
<html><head><script>
var the_timer, x_position = 0, the_image;
function do_timer(){
the_image = document.getElementById("stones_img");
x_position = x_position + 1;
the_image.style.left = x_position;
}
</script></head>
<body onload="the_timer=setInterval(do_timer, 50)">
<img src="stones.png" id="stones_img"
style="position:absolute; left:0">
<button onclick="clearInterval(the_timer)">
Stop!</button>
</body></html>
10.加入和去除事件监听：
1>使用html加入事件监听器：
Eg:
<html><head><script>
function do_something() {alert("Page has loaded");}
</script></head>
<body onload="do_something()"></body>
</html>
2>使用js加入事件监听器：
Eg1:
<html><body id="theBody">
<script>
function do_something() { alert("Page has loaded") }
window.onload = do_something; //方法1
</script>
</body></html>
Eg2:
<html><body>
<script>
function do_something() { alert("Page has loaded") }
window.addEventListener("load", do_something); //方法2
</script>
</body></html>
3>用js去除事件监听：
var theBody = document.getElementById("theBody");
theBody.removeEventListener("load", do_something);
Eg:
<html><body>
<button id="btn0" onclick=" alert('Hello!') ">
Click Me!</button><br>
<button id="btn1">Remove Listener</button>
<script>
function do_something() { alert('Clicked'); }
var btn0 = document.getElementById("btn0");
btn0.addEventListener("click", do_something);
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", function() {
btn0.removeEventListener("click", do_something);
});
</script></body></html>
11.更多的js函数：
1>声明函数：
方法1：
var functionTwo = function() {
. . . code here . . .
}
方法2：
var functionTwo = function thisFunc() {
. . . code here . . .
}
2>将一个函数名作为参数传递给另一个函数：
Eg:
<!doctype html>
<html>
<head>
<script>
function check(a, b){
if (b!=0) return true;
else return false;
}
function myDivide( fn, num, div ) {
if (fn(num, div)) {
alert("It's OK!");
return num/div;
} else {
alert("Not OK!");
}
}
result=myDivide(check, 44, 1);
</script>
</head>
</html>
3>在一个函数中将另一个函数作为返回值返回：
Eg:
<!doctype html>
<html>
<head>
<script>
function counter() {
var count = 0;
return function() {
count++;
alert(count);
}
}
var count = counter();
count();
count();
count();
</script>
</head>
</html>