example06.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <button id="ok">确定</button>
  9. <!--如果希望点击按钮时会执行对应的操作-->
  10. <!--那么需要通过JavaScript为按钮绑定事件回调函数-->
  11. <!--绑定事件回调函数大致有3种方式: -->
  12. <!--1. 通过标签的onXXX属性来指定需要执行的事件回调函数-->
  13. <!--2. 通过元素的onXXX属性来绑定需要执行的事件回调函数-->
  14. <!--3. 通过元素的addEventListener方法来绑定事件回调函数-->
  15. <script>
  16. var btn = document.getElementById("ok");
  17. function sayHello() {
  18. alert("大家好!");
  19. }
  20. function sayGoodbye() {
  21. alert("再见!");
  22. }
  23. // Netscape Navigator --> Firefox
  24. // Internet Explorer
  25. // Chrome
  26. // Safari
  27. // Opera
  28. if (btn.addEventListener) {
  29. btn.addEventListener("click", sayHello);
  30. btn.addEventListener("click", sayGoodbye);
  31. btn.addEventListener("click", function() {
  32. btn.removeEventListener("click", sayGoodbye);
  33. });
  34. } else {
  35. btn.attachEvent("onclick", sayHello);
  36. btn.attachEvent("onclick", sayGoodbye);
  37. btn.attachEvent("onclick", function() {
  38. btn.detachEvent("onclick", sayGoodbye);
  39. });
  40. }
  41. </script>
  42. </body>
  43. </html>