首页创建一个网页，页面上有一个正方形的 <div> 元素和一个段落元素。当鼠标按下正方形时，段落显示 “鼠标按下”textContent，并且改变正方形的背景颜色为绿色；当鼠标松开时，段落显示 “鼠标松开”，并且将正方形的背景颜色恢复为蓝色。使用 DOM2 级事件处理方式实现。

创建一个网页，页面上有一个正方形的 <div> 元素和一个段落元素。当鼠标按下正方形时，段落显示 “鼠标按下”textContent，并且改变正方形的背景颜色为绿色；当鼠标松开时，段落显示 “鼠标松开”，并且将正方形的背景颜色恢复为蓝色。使用 DOM2 级事件处理方式实现。

时间: 2025-01-01 15:40:20 浏览: 3

为了创建一个满足您描述的网页，首先需要在HTML中设置基本结构，然后使用JavaScript来添加DOM2级事件监听器。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .square { width: 100px; height: 100px; background-color: blue; display: inline-block; } </style> </head> <body> <div id="mySquare" class="square"></div> <p id="message">点击以触发事件</p> <script> // 获取DOM元素 var square = document.getElementById('mySquare'); var message = document.getElementById('message'); // 鼠标按下事件 square.addEventListener('mousedown', function() { square.style.backgroundColor = 'green'; message.textContent = "鼠标按下"; }); // 鼠标释放事件 square.addEventListener('mouseup', function() { square.style.backgroundColor = 'blue'; message.textContent = "鼠标松开"; }); </script> </body> </html> ``` 在这个例子中，我们首先设置了样式让正方形初始化为蓝色背景。然后，我们在`mySquare` div元素上添加了`mousedown`和`mouseup`事件监听器，分别在鼠标按下和鼠标松开时更改CSS背景颜色和段落文本。

阅读全文