PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 事件注册、事件派发、事件代理与留言板

事件注册、事件派发、事件代理与留言板

橙絮圆
橙絮圆 原创
2021年07月14日 17:23:18 510浏览

事件注册、事件派发、事件代理、表单验证、留言板

作业标题:0713作业
作业内容:

  1. 实例演示事件注册,事件派发,事件代理。
  2. 将课堂上的表单验证与留言板功能全部按自己方式重写一遍。

  • 实例演示事件注册,事件派发,事件代理。

    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>事件监听器</title>
    8. </head>
    9. <body>
    10. <!-- 事件监听器 -->
    11. <button>监听器</button>
    12. <button>点击广告</button>
    13. <script>
    14. const btn3 = document.querySelector("button:first-of-type");
    15. // 事件注册
    16. //btn3.addEventListener(事件类型,事件回调方法名,是否冒泡false)
    17. btn3.addEventListener("click", function () {
    18. alert("aaa");
    19. });
    20. btn3.addEventListener("click", show);
    21. function show() {
    22. alert("bbb");
    23. }
    24. //如果事件方法使用了回调,则无法移除
    25. btn3.removeEventListener("click", show);
    26. //事件派发
    27. const myClick = new Event("click");
    28. const btn4 = document.querySelector("button:nth-of-type(2)");
    29. //将自定义的事件派发给指定的元素,自动击发
    30. // btn4.dispatchEvent(myClick);
    31. //自定义点击行为
    32. let i = 0;
    33. btn4.addEventListener("click", () => {
    34. console.log("点击广告,已经赚了:" + i + "元");
    35. i += 0.2;
    36. });
    37. //开户一个间歇式的定时器
    38. setInterval(() => btn4.dispatchEvent(myClick), 3000);
    39. //事件代理
    40. const items = document.querySelectorAll("li");
    41. document.querySelector("ul").onclick = (ev) => {
    42. // 事件绑定者
    43. console.log(ev.currentTarget);
    44. //事件触发者(用户正在点击的事件主体)
    45. console.log(ev.target.textContent);
    46. };
    47. </script>
    48. </body>
    49. </html>
  • 表单验证与留言板

    • 表单验证

      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>表单事件</title>
      8. <style>
      9. @import url(style1.css);
      10. </style>
      11. </head>
      12. <body>
      13. <!-- <form action="check.php" method="POST" id="login" onsubmit="return false"> -->
      14. <form action="check.php" method="POST" id="login">
      15. <label class="title">用户登录</label>
      16. <label for="email">邮箱:</label>
      17. <input type="email" id="email" name="email" value="" autofocus />
      18. <label for="password">密码:</label>
      19. <input type="password" id="password" name="password" />
      20. <!-- <button name="submit" type="submit">登录</button> -->
      21. <button name="submit">登录</button>
      22. </form>
      23. <script>
      24. const login = document.forms.login;
      25. //login.onsubmit = () => console.log("提交了");
      26. //禁用元素的默认行为
      27. // login.onsubmit = (ev) => ev.preventDefault();
      28. //login.控制的name属性就可以
      29. login.submit.onclick = (ev) => {
      30. //禁用默认提交行为
      31. ev.preventDefault();
      32. // 禁用冒泡
      33. ev.stopPropagation();
      34. //非空验证
      35. isEmpty(ev.currentTarget.form);
      36. };
      37. function isEmpty(form) {
      38. console.log(form.email.value.length);
      39. console.log(form.password.value.length);
      40. if (form.email.value.lentgh === 0) {
      41. alert("邮箱不能为空");
      42. form.email.focus();
      43. return false;
      44. } else if (form.password.value.length === 0) {
      45. alert("密码不能为空");
      46. form.password.focus();
      47. return false;
      48. } else {
      49. alert("验证通过");
      50. }
      51. }
      52. //login.email.oninput = (ev) => console.log(ev.target.value);
      53. //login.email.onchange = (ev) => console.log(ev.target.value);
      54. //submit:提交
      55. //focus:焦点
      56. //input:用户输入内容时发生
      57. //blur:失去焦点触发
      58. //change:值发生变化
      59. </script>
      60. </body>
      61. </html>
    • 留言板

      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>留言板</title>
      8. <link rel="stylesheet" href="style2.css">
      9. </head>
      10. <body>
      11. <form class="comment" id="comment">
      12. <label for="content">请留言:</label>
      13. <textarea name="content" id="content" cols="30" rows="5"" placeholder="不要超过100个字符"></textarea>
      14. <button class="submit" type="button" name="submit">提交</button>
      15. </form>
      16. <ul class="list">
      17. </ul>
      18. <script>
      19. const comment=document.forms.comment;
      20. const content=comment.content;
      21. const btn=comment.submit;
      22. const list=document.querySelector('.list');
      23. //console.log(comment,content,btn,list);
      24. btn.onclick=ev=>{
      25. let value=content.value.trim();
      26. if(value.length>0 && value.length<=100){
      27. //表示有内容,将用户插入到列表中
      28. const li=document.createElement('li');
      29. li.textContent=value;
      30. li.style.borderBottom='1px solid white';
      31. li.style.minHeight='3em'
      32. const delBtn=document.createElement('button');
      33. delBtn.textContent='删除留言';
      34. delBtn.style.float='right';
      35. delBtn.classList.add('del-btn');
      36. delBtn.onclick=function(){
      37. if (confirm('是否删除')){
      38. //true:删除
      39. this.parentNode.remove();
      40. alert('删除成功');
      41. content.focus();
      42. return false;
      43. }
      44. }
      45. li.append(delBtn);
      46. list.prepend(li)
      47. alert('留言成功');
      48. content.value=null;
      49. content.focus();
      50. }else{
      51. alert('没有输入或超出长度');
      52. content.focus();
      53. return false;
      54. }
      55. }
      56. </script>
      57. </body>
      58. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议