//在document中的一个指定信息的区域树超调试信息
//如果document上不存在这个元素，则创建一个
function debug(msg) {
//通过查看html元素的 id属性来查找文档的调试部分
var log = document.getElementById("debuglog");
//如果元素不存在，则创建一个
if (!log) {
log = document.createElement("div"); //创建一个新的div元素
log.id = "debuglog"; //为在各方元素的id赋值
log.innerHTML = "<h1>Debug Log</h1>"; //自定义初始内容
document.body.appendChild(log); //将其添加到文档末尾
}
//将消息包含在<pre>中，并添加到log中
var pre = document.createElement("pre"); //创建pre元素
var text = document.createElement(msg); //将msg包含在一个文本节点上
pre.appendChild(text); //文本添加到pre
log.appendChild(pre); //pre添加到log
}
在第十六章会讲到如何使用javascript操作元素，这通常会使用到元素的style和class属性
复制代码 代码如下:
function hide(e, reflow) { //通过jvascript操纵元素和隐藏元素e
if (reflow) { //如果第二个参数为true
e.style.display = "none" //隐藏这个元素，其占用的空间也销售
} else {
e.style.visibility = "hidden"; //将e隐藏，保留其占用的空间
}
}
function highlight(e) { //通过设置css来高亮显示e
if (!e.className) e.className = "highcss";
else
e.className += "highcss";
}
可以通过javascript来控制元素的内容和css样式，同样也可以通过事件处理程序(event handler)来定义文档行为，事件处理辰星是一个在浏览器中心注册的javascript函数，当特定的事件发生时浏览器便可以调用这个函数。
通常我们关注的事件类型是鼠标点击和键盘按键事件（智能手机为各种触碰事件）。或者说当浏览器完成文档的加载，当用户改变窗口的大小或当用户向表单中输入数据时便会触发一个人事件。
第17章会详细描述如何定义，注册时间处理程序，以及在事件发生时浏览器是如何调用他们的。
自定义事件处理程序最简单的方法，给html的以on为前缀的属性绑定一个回调，当写一些简单的程序测试时，最实用的方法就是给“onclick”处理程序绑定回调。假设以上将上文的debug()和hide()这个函数保存至debug.js和hide.js的文件中，那么就可以简单些一个html测试文件，来给onclick的属性指定一个事件处理程序。如下
复制代码 代码如下:
<script type="text/javascript">
//在document中的一个指定信息的区域树超调试信息
//如果document上不存在这个元素，则创建一个
function debug(msg) {
//通过查看html元素的 id属性来查找文档的调试部分
var log = document.getElementById("debuglog");
//如果元素不存在，则创建一个
if (!log) {
log = document.createElement("div"); //创建一个新的div元素
log.id = "debuglog"; //为在各方元素的id赋值
log.innerHTML = "<h1>Debug Log</h1>"; //自定义初始内容
document.body.appendChild(log); //将其添加到文档末尾
}
//将消息包含在<pre>中，并添加到log中
var pre = document.createElement("pre"); //创建pre元素
var text = document.createElement(msg); //将msg包含在一个文本节点上
pre.appendChild(text); //文本添加到pre
log.appendChild(pre); //pre添加到log
}
function hide(e, reflow) { //通过jvascript操纵元素和隐藏元素e
if (reflow) { //如果第二个参数为true
e.style.display = "none" //隐藏这个元素，其占用的空间也销售
} else {
e.style.visibility = "hidden"; //将e隐藏，保留其占用的空间
}
}
function highlight(e) { //通过设置css来高亮显示e
if (!e.className) e.className = "highcss";
else
e.className += "highcss";
}
</script>
hello
<button>hide1</button>
<button>hide2</butotn>