首页// 获取按钮和div元素const button = document.querySelector('button');const div = document.querySelector('div');// 添加点击事件监听器button.addEventListener('click', () => { // 修改div元素的background-color属性为红色 div.style.backgroundColor = 'red';});这段代码写在哪

// 获取按钮和div元素const button = document.querySelector('button');const div = document.querySelector('div');// 添加点击事件监听器button.addEventListener('click', () => { // 修改div元素的background-color属性为红色 div.style.backgroundColor = 'red';});这段代码写在哪

时间: 2024-01-22 10:19:33 浏览: 103

JavaScript使用addEventListener添加事件监听用法实例

本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the document</title> [removed] function showalert(){ alert('you clicked me!'); } function clickme(){ var pelement=document.getElementsByTagName('p')

这段代码可以写在HTML文件中的<script>标签里，或者在外部JS文件中。如果是在HTML文件中，可以写在<head>或<body>标签里。例如： ```html <!DOCTYPE html> <html> <head> <title>示例</title> </head> <body> <div>我是一个div元素</div> <button>点击我改变背景色</button> <script> const button = document.querySelector('button'); const div = document.querySelector('div'); button.addEventListener('click', () => { div.style.backgroundColor = 'red'; }); </script> </body> </html> ``` 如果是在外部JS文件中，可以先在HTML文件中引入JS文件，然后将代码放在JS文件中。例如： ```html <!DOCTYPE html> <html> <head> <title>示例</title> </head> <body> <div>我是一个div元素</div> <button>点击我改变背景色</button> <script src="main.js"></script> </body> </html> ``` main.js文件中的代码： ```javascript const button = document.querySelector('button'); const div = document.querySelector('div'); button.addEventListener('click', () => { div.style.backgroundColor = 'red'; }); ```

阅读全文