您的位置：首页 > 其它

DOM技术简介之二_事件+属性+方法

2012-12-22 17:14 591 查看

一、添加点击事件

1. 新建demo2.html，并添加如下代码

<!doctype html>
<html>

<head>
<title>我是走马灯啊</title>
<meta charset="utf-8" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link type="text/css" rel="stylesheet" href="demo2.css"/>

</head>

<body>

<div>
<input type="button" onclick="button1Click()" value="关联事件1"/>
<input type="button" onclick="button2Click()" value="关联事件2"/>
</div>

<div>
<input type="button" onclick="alertDemo()" value="提示对话框"/>
<input type="button" onclick="confirmDemo()" value="确认对话框"/>
</div>

<div>
<input type="button" onclick="startInterval()" value="setInterval()测试"/>
<input type="button" onclick="stopInterval()" value="clearInterval()测试"/>

<input type="button" onclick="startTimeout()" value="setTimeout()测试"/>
<input type="button" onclick="stopTimeout()" value="clearTimeout()测试"/>
</div>

<script type="text/javascript" src="demo2.js"></script>
</body>

</html>

2. 新建demo2.js，并添加如下代码

function button1Click() {
alert("点击Button1");
}
function button2Click() {
alert("点击Button2");
}

/**信息提示框示例*/
function alertDemo() {
alert("我是信息提示对话框");
};

/**确认框示例*/
function confirmDemo() {
if (confirm("你是人类吗")) {
alert("人类老坏了");
} else {
alert("小猪，你好");
}
}

/**interval间隔函数*/
var intervalId;
function startInterval() {
intervalId = setInterval("alert('你妹啊')", 5000);
}
function stopInterval() {
clearInterval(intervalId);
}

/**超时函数*/
var timeoutId;
function startTimeout() {
timeoutId = setTimeout("alert('你妹啊')", 2000);
}
function stopTimeout() {
clearTimeout(timeoutId);
}

/**走马灯效果示例*/
function scroll() {
var title = document.title;
var first = title.charAt(0);  //取得第一个字符
var leftStr = title.substring(1, title.length); //取得其余字符
document.title = leftStr + first; //重构文字
}
setInterval("scroll()",500);

3. 点击各个按钮，查看效果

二、代码解析

1. window对象的方法，省去了window.*

alert("我是信息提示对话框");

confirm("你是人类吗")

setInterval("alert('你妹啊')", 5000);

clearInterval(intervalId);

setTimeout("alert('你妹啊')", 2000);

clearTimeout(timeoutId);

interval与timeout的区别见JavaScript浏览器对象之一Window对象

三、onload&onunload&onbeforeunload

1. onload：网页刚加载完毕时触发

浏览器是一边下载文档，一边解析执行。这样就有可能出现JavaScript想要操作某个元素，而这个元素却还没有加载完成的情况。这样就需要把操作的代码放到body的onload事件中去，或者把相应的代码放到元素之后。

PS：元素的onload事件是元素加载完成时触发,body的onload事件是body中所有元素加载完成时触发。

2. onunload：网页关闭（或者离开）后触发

3. onbeforeunload：在网页准备关闭（或者离开）后触发

注：未加入w3c标准，但几乎所有浏览器都支持

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航