JS鼠标的常用事件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <button id="btn">双击1</button>
 9         <button ondblclick="c()">双击2</button>
10         <button onclick="a(this.innerText);b(event)">点击</button>
11         <script type="text/javascript">
12             a = (s) => console.log(s)
13             b = (e) => {
14                 console.log(e);
15                 e.target.style.fontSize = '20px'
16             }
17             c = () => alert('双击鼠标事件');
18             let btn = document.getElementsByTagName('button')
19             btn[1].onmouseover = ()=> console.log('鼠标移入button');
20             btn[1].onmouseout = () => console.log('鼠标移出button');
21             // addEventListener:为指定对象添加事件
22             document.getElementById('btn').addEventListener('dblclick',function () {
23                 alert('双击鼠标事件')
24             })
25             // 新建一个div
26             let add = document.createElement('div')
27             console.log(add)
28             // 添加css
29             add.innerText = '这是测试';
30             add.style.fontSize = '20px';
31             add.style.color = 'red';
32             // 将新建的div添加值body里
33             document.body.appendChild(add)
34             // 打印document的结构
35             console.log(document)
36         </script>
37     </body>
38 </html>