javascript事件 阮一峰

首先，我们来看一个最简单的例子：点击一个按钮，弹出一个消息框。下面是对应的HTML和Javascript代码：

button id="demo_button">
    点我一下/button>
    script>
    var btn = document.getElementById("demo_button");
btn.addEventListener("click", function() {
    alert("Hello World!");
}
    );
    /script>
    

可以看到，按钮被点击后会调用一个函数，该函数弹出一个消息框。这就是一个非常基本、最简单的Javascript事件的例子。

再来看一个实际的例子。假设有一个页面上有一张图片的链接，但是我们希望鼠标指针在悬停在这个链接上时，链接周围的边框会有一定的样式变化。下面是对应的HTML和Javascript代码：

a href="#" id="demo_link">
    img src="image.jpg">
    /a>
    style>
a:hover {
    border: 1px solid red;
}
    /style>
    script>
    var link = document.getElementById("demo_link");
link.addEventListener("mouseover", function() {
    link.style.border = "1px solid red";
}
    );
link.addEventListener("mouseout", function() {
    link.style.border = "none";
}
    );
    /script>
    

可以看到，这个例子涉及到了两个Javascript事件，即mouseover和mouseout。当鼠标指针移动到链接上方时，会触发mouseover事件，我们在对应的函数中将链接周围的边框样式改变。当鼠标指针离开链接时，会触发mouseout事件，我们则将链接周围的边框样式改回初始状态。

最后，我们再来看一下一个更加实用的例子。假设我们有一个类似"下拉框"的交互，即用户点击按钮时会 "展开" 一项列表供用户选择，以此来实现用户选择的功能。可以通过下面的HTML和Javascript代码来实现：

button id="demo_button">
    请选择一个选项/button>
    ul id="demo_list" style="display:none;
    ">
    li>
    选项一/li>
    li>
    选项二/li>
    li>
    选项三/li>
    /ul>
    script>
    var btn = document.getElementById("demo_button");
    var list = document.getElementById("demo_list");
btn.addEventListener("click", function() {
if(list.style.display === "none") {
    list.style.display = "block";
}
 else {
    list.style.display = "none";
}
}
    );
    /script>
    

当我们点击按钮时，会触发click事件，该事件会检查列表当前的显示状态，并根据当前状态来判断应该是 "展开" 列表还是 "收起" 列表。这个例子中，实际上涉及了一些DOM操作和CSS样式设置，同时也展现了Javascript事件的实际应用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！