JavaScript-事件-优快云博客

本文介绍了JavaScript中的事件对象，展示了如何通过事件监听实现用户交互，包括点击改变文本、鼠标坐标提示、输入内容转换为大写及鼠标悬停更改图片。示例涵盖了onchange、onmouseover、onmouseout事件及setInterval定时触发函数的应用，揭示了JavaScript在网页动态效果和用户互动中的重要作用。

Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标点击触发事件</title>
</head>
<body>
<h2>JavaScript 能做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello Exgirls"'>点击我！</button>
</body>
</html>

<html>
<head>

<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
//鼠标放上去触发，event相当于self
<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>

</body>
</html>

onchange


<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
//获取fname的value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名：
<input type="text" id="fname" onchange="upperCase(this.id)" />
//只要内容一改变，onchange就触发
</body>
</html>

mouseover mouseout

<html>
<head>
    <meta charset="utf-8">
<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="w.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="w2.jpg"
}
</script>
</head>

<body>
<a onmouseover="mouseOver()" onmouseout="mouseOut()">
<img src="w2.jpg" id="b1" />
</a>
</body>
</html>

setInterval 定时触发函数

setInterval(function(){ alert("Hello"); }, 3000);
//定时触发函数（参数1，参数2）参数1函数名，参数