js09.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件演示</title>
  6. </head>
  7. <!--
  8. onblur元素失去焦点
  9. onfocus元素获得焦点
  10. onload某个页面或图像被完成加载
  11. onsubmit当表单提交时触发该事件
  12. onmouseover鼠标被移到某元素之上
  13. onmouseout鼠标从某元素移开
  14. -->
  15. <body>
  16. <form id="userForm" action="https://www.baidu.com" >
  17. <!-- onblur元素失去焦点 -->
  18. <input id="username" onblur="onBlur(this)" type="text" >
  19. <input type="submit" value="输入框提交">
  20. <button onsubmit="userFormSubmit()" >按钮提交</button>
  21. </form>
  22. <script>
  23. function userFormSubmit (){
  24. console.log("提交")
  25. return false;
  26. }
  27. let userForm = document.getElementById("userForm");
  28. userForm.onsubmit = userFormSubmit;
  29. //页面加载完成之后执行
  30. window.onload = function (){
  31. let ins = document.getElementById("username");
  32. ins.onfocus = function (){
  33. console.log("获取焦点")
  34. }
  35. }
  36. function onBlur(t){
  37. //this
  38. console.log(t)
  39. }
  40. </script>
  41. </body>
  42. </html>