<香港科技大学html+css+js课堂笔记>week3--DOM模型基础第二部分-CSDN博客

本文链接：https://blog.csdn.net/Fuego801/article/details/50967105

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"
οnmοuseοver="change_colour('red');"
οnmοuseοut="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 οnlοad="set_timer()">
<img src="stones.png" id="stones_img"
style="position:absolute; left:0">
<button οnclick="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 οnlοad="the_timer=setInterval(do_timer, 50)">
<img src="stones.png" id="stones_img"
style="position:absolute; left:0">
<button οnclick="clearInterval(the_timer)">
Stop!</button>
</body></html>

10.加入和去除事件监听：

1>使用html加入事件监听器：

Eg:

<html><head><script>
function do_something() {alert("Page has loaded");}
</script></head>
<body οnlοad="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" οnclick=" 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>