08.事件.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <!--
  11. 我们可以在事件对应的属性中设置一些js代码,
  12. 这样当事件被触发时,这些代码将会执行
  13. 这种写法我们称为叫做结构和行为耦合,不方便维护,不推荐使用
  14. -->
  15. <!-- <button id="btn" onmousemove="alert('点我干啥?');">我是一个按钮</button> -->
  16. <button id="btn">我是一个按钮</button>
  17. <script>
  18. /*
  19. 事件,就是用户和浏览器之间的交互行为,
  20. 比如:点击按钮,鼠标移动,关闭窗口,……
  21. */
  22. //获取按钮对象
  23. var btn = document.getElementById("btn");
  24. /*
  25. 可以为按钮的对应事件绑定处理函数的形式来响应事件
  26. 这样当事件被触发时,其对应的函数将会被调用
  27. */
  28. //绑定一个单击事件
  29. //像这种为单击事件绑定的函数,我们称为单击响应函数
  30. btn.onclick = function(){
  31. alert("点啥点?");
  32. };
  33. console.log(btn);
  34. </script>
  35. </body>
  36. </html>