本文介绍JavaScript中常见的事件处理方法，包括通过onclick实现点击事件获取元素内容，以及利用onmouseover和onmouseout控制鼠标悬停时的样式变化。同时解析with语句的用法，展示其如何简化对document对象的访问，并通过对比代码说明其等效写法。
JavaScript基础：DOM事件处理与with语句详解
本期内容将讲解几个基础的JavaScript事件处理示例。
1.鼠标点击
鼠标点击事件处理
具体实现代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function click1(obj)
{
alert(obj.innerHTML);
}
</script>
</head>
<body>
<div onclick="click1(this)" style="cursor:pointer">点击我吧</div>
</body>
</html>在上述代码中，this代表当前的div元素。当用户点击该区域时，会弹出对话框显示div标签内的文本内容。
2.鼠标移动
鼠标悬停与移出样式控制
以下是鼠标移动事件的示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function mouse1(obj)
{
obj.style.color = "#f00";
obj.style.fontSize = "18px"
}
function mouse2(obj)
{
obj.style.color = "#000";
obj.style.fontSize = "16px"
}
</script>
</head>
<body>
<div onmouseover="mouse1(this)" onmouseout="mouse2(this)">移动到这儿</div>
</body>
</html>当鼠标移入该div区域时，触发mouse1函数，字体颜色变为红色（#f00）且字号放大至18px；当鼠标移开时，触发mouse2函数，字体颜色恢复为黑色（#000），字号恢复为16px。
3.with用法
with语句与document对象访问
以下是with语句的使用示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
with(document)
{
write("niujiabin"+"<br/>");
write("maybe"+"<br/>");
write("gossip"+"<br/>");
}
</script>
</head>
<body>
</body>
</html>上述with语句的效果等同于直接调用document对象的方法：
以下代码展示了不使用with语句的等效写法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
document.write("niujiabin"+"<br/>");
document.write("maybe"+"<br/>");
document.write("gossip"+"<br/>");
</script>
</head>
<body>
</body>
</html>