Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript事件与字符串常用函数
Blogger Information
Blog 45
fans 3
comment 0
visits 45642
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript事件与字符串常用函数
残破的蛋蛋
Original
854 people have browsed it

JavaScript事件与字符串常用函数

一、JavaScript事件基础

1.事件的三种添加方法

1.1 添加到元素的事件属性上。

  1. <button onclick="console.log(this.innerHTML)">Button1</button>

1.2 通过脚本添加到事件属性上。

  1. <button>Button2</button>
  2. <script>
  3.     const btn2 = document.querySelector('body button:nth-of-type(2)');
  4.     // 添加事件
  5.     btn2.onclick = () => {
  6.         console.log(this); // <button></button>
  7.         console.log(this.innerHTML); // Button2
  8.     }
  9. </script>

这里有一点需要注意的是，onclick不能重复定义一个事件，因为后面的事件会覆盖前面的事件，类似于CSS样式覆盖这个道理。

如果想要移除一个事件，可以使用以下方法：

  1.     btn2.onclick = null;

1.3 通过事件监听器添加事件。

  • 语法：

addEventListener(事件类型, 事件回调方法, 触发阶段)

  1. <button>Button3</button>
  2. <script>
  3. const btn3 = document.querySelector('button');
  4. btn3.addEventerListener('click', function () {
  5.     console.log(this.innerHTML, '第一次'); // Button3 第一次
  6. });
  7. btn3.addEventListener('click', function () {
  8.     console.log(this.innerHTML, "第2次"); // Button3 第二次
  9. });
  10. </script>

1.3.1事件移除

通过回调函数添加的事件是无法移除的，但是可以通过事件方法函数来移除。

  1. let handle = () => console.log(btn3.innerHTML, "第3次");
  2. // 添加点击事件
  3. btn3.addEventListener('click', handle); // Button3 第三次
  5. // 移除点击事件
  6. btn3.removeEventListener('click', handle);

1.3.2事件派发

创建一个按钮，并拿到这个元素：

  1. <button>Button4</button>
  2. <script>
  3. const btn4 = document.querySelector('button');
  4. </script>

通过事件派发，结合定时器，我们可以做一个自动点击广告的小案例。

  1. // 创建一个自定义事件
  2. let ev = new Event('click');
  3. let i = 0;
  4. btn4.addEventerListener('click', function () {
  5.     console.log(`点击了广告，共赚：${i}元`);
  6.     i += 0.5;
  7. });
  8. setInterval(btn4.dispatchEvent(ev), 1000);

2.事件传递

  1. 捕获：从最外层元素逐级向内知道事件的绑定者；
  2. 目标：到达目标事件；
  3. 冒泡：从目标再由内向外逐级向上知道最外层元素。

如果需要理解捕获、目标，冒泡需要先理解什么是事件的对象、事件的绑定者以及事件的触发者，现有如下案例：

以下是定义个一个ul列表的DOM结构：

  1. <ul>
  2.     <li class="item">item1</li>
  3.     <li class="item">item2</li>
  4.     <li class="item">item3</li>
  5.     <li class="item">item4</li>
  6.     <li class="item">item5</li>
  7. </ul>

给每一个li元素绑定一个点击事件：

  1. const lis = document.querySelectorAll('.item');
  2. lis.forEach(li => (li.onclick = ev => {
  3.     // 事件对象保存着当前事件的所有信息
  4.     console.log(ev);
  5.     // 事件类型
  6.     console.log(ev.type); // click
  7.     // 事件绑定者
  8.     console.log(ev.currentTarget);
  9.     // 事件触发者
  10.     console.log(ev.target);
  11.     // 在这种情况下，事件绑定者和触发者都是同一个
  12.     console.log(ev.currentTarget === ev.target);
  13.     // 事件的传递路径，假定：点击了item5，此时事件传递的路径就是从内向外逐级传递。
  14.     console.log(ev.path); // [li.item, ul, body, html, document, Window]
  15. }));

注意：on + event事件是不支持捕获的，只支持冒泡：

  1. // 不支持捕获，仅支持冒泡
  2. li.onclick = function () {};

addEventListener的第三个参数为true时，表示事件在捕获阶段发生，false在冒泡阶段发生，也是默认事件。

  • 捕获
  1. // window
  2. window.addEventListener('click', ev => {
  3.     console.log(ev.currentTarget);
  4. }, true);
  5. // document
  6. document.addEventListener('click', ev => {
  7.     console.log(ev.currentTarget);
  8. }, true);
  9. // html
  10. document.documentElement.addEventListener('click', ev => {
  11.     console.log(ev.currentTarget);
  12. }, true);
  13. // body
  14. document.body.addEventListener('click', ev => {
  15.     console.log(ev.currentTarget);
  16. }, true);
  17. // ul
  18. document.querySelector("ul").addEventListener('click', ev => {
  19.     console.log(ev.currentTarget);
  20. }, true);
  • 效果图：

捕获方向

  • 冒泡
  1. // ul
  2. document.querySelector("ul").addEventListener('click', ev => {
  3.     console.log(ev.currentTarget);
  4. }, false);
  5. // body
  6. document.body.addEventListener('click', ev => {
  7.     console.log(ev.currentTarget);
  8. }, false);
  9. // html
  10. document.documentElement.addEventListener('click', ev => {
  11.     console.log(ev.currentTarget);
  12. }, false);
  13. // document
  14. document.addEventListener('click', ev => {
  15.     console.log(ev.currentTarget);
  16. }, false);
  17. // window
  18. window.addEventListener('click', ev => {
  19.     console.log(ev.currentTarget);
  20. }, false);
  • 效果图：

冒泡

从上述捕获和冒泡两个阶段可以看出来：JavaScript事件触发的三个阶段分别为：捕获阶段、目标阶段、冒泡阶段而这个阶段就是事件的传递机制。

3.事件代理

现在如果我不想给每个li元素都添加一个点击事件，只给它的父节点ul添加一个点击事件，那么我应该怎么操作呢？

此时，我们可以统一个li元素的父节点ul添加一个点击事件，然后通过ev.target获取到用户当前操作的元素即可，事件触发者一般是事件绑定者的子元素或后代元素。

  1. document.querySelector('ul').addEventListener('click', ev => {
  2.     // 事件绑定者
  3.     console.log(ev.currentTarget);
  4.     // 事件触发者，一般情况下是事件绑定者的子集
  5.     console.log(ev.target);
  6. });
  • 效果图：

事件代理

二、利用所学的知识做一个留言板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>留言板</title>
  7.     <style>
  8.     {
  9.         margin: 0;
  10.         padding: 0;
  11.         font-size: 10px;
  12.         box-sizing: border-box;
  13.         font-family:  Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
  14.     }
  16.     ul, li {
  17.         list-style: none;
  18.     }
  20.     .box {
  21.         width: 50rem;
  22.         height: 10rem;
  23.         margin: 1rem auto;
  24.     }
  26.     h2 {
  27.         font-size: 3rem;
  28.         display: flex;
  29.         justify-content: center;
  30.         margin-bottom: 1rem;
  31.     }
  33.     #message {
  34.         display: flex;
  35.         flex-flow: column nowrap;
  36.         width: 100%;
  37.     }
  39.     #message textarea {
  40.         width: 100%;
  41.         min-height: 10rem;
  42.         padding: .6rem 1rem;
  43.         border: 1px solid #c9c9c9;
  44.         border-radius: 2px;
  45.         outline: none;
  46.         font-size: 1.4rem;
  47.         font-family: inherit;
  48.     }
  50.     #message .button {
  51.         width: 100%;
  52.         height: 5rem;
  53.         margin-top: 1rem;
  54.     }
  56.     #message .button .btn {
  57.         padding: 0 2rem;
  58.         height: 3.8rem;
  59.         border-radius: 3px;
  60.         border-width: 0;
  61.         font-size: 1.2rem;
  62.         outline: none;
  63.         cursor: pointer;
  64.     }
  66.     #message .button .btn:hover {
  67.         transition: all .3s;
  68.         opacity: .8;
  69.     }
  71.     #message .button .btn.btn-submit {
  72.         background-color: #3e7771;
  73.         color: #ffffff;
  74.     }
  76.     #message .button .btn.btn-rest {
  77.         margin-left: .5rem;
  78.     }
  80.     #message .content-wrap em.tips {
  81.         font-style: normal;
  82.         color: red;
  83.         margin-top: 1rem;
  84.     }
  86.     #list {
  87.         width: 100%;
  88.         display: grid;
  89.         grid-template-columns: 1fr;
  90.         grid-template-rows: auto;
  91.         margin-top: 1rem;
  93.     }
  95.     #list li {
  96.         display: grid;
  97.         grid-template-columns: 4rem 1fr;
  98.         grid-template-rows: auto auto;
  99.         gap: .5rem;
  100.         margin-top: 1rem;
  101.     }
  103.     #list li.item .avatar {
  104.         width: 4rem;
  105.         height: 4rem;
  106.     }
  108.     #list li.item .avatar img {
  109.         width: 100%;
  110.         height: 100%;
  111.         border-radius: 50%;
  112.     }
  114.     #list li.item .comment {
  115.         display: grid;
  116.         grid-template-columns: 1fr;
  117.         row-gap: .5rem;
  118.     }
  120.     #list li.item .comment .title {
  121.         display: flex;
  122.         flex: rows nowrap;
  123.         align-items: center;
  124.     }
  126.     #list li.item .comment .title .nick > * {
  127.         font-size: 1.6rem;
  128.         color: #000000;
  130.     }
  132.     #list li.item .comment .title .time {
  133.         color: #8c92a4;
  134.         margin-left: .5rem;
  135.         font-size: 1.2rem;
  136.         color: #8c92a4;
  137.         font-size: 1.4rem;
  138.     }
  140.     #list li.item .comment .context{
  141.         color: #8c92a4;
  142.         font-size: 1.2rem;
  143.         color: #40485B;
  144.         font-size: 1.4rem;
  145.         margin: .5rem 0;
  146.     }
  148.     #list li.item .del {
  149.         margin: .5rem 0;
  150.         display: grid;
  151.         cursor: pointer;
  152.         border: none;
  153.         place-self: center end;
  154.         grid-area: 2 / 1 / 2 / 3;
  155.         padding: .5rem;
  156.         outline: none;
  157.     }
  159.     hr {
  160.         border-color: rgba(222, 222, 222, .5);
  161.     }
  162.     </style>
  163. </head>
  164. <body>
  165.     <div class="box">
  166.         <h2>留言板</h2>
  167.         <div id="message">
  168.             <div class="content-wrap">
  169.                 <textarea class="content" name="message" value="ddd" placeholder="请输入内容"></textarea>
  170.                 <em class="tips" style="display: none;">* 留言内容不能为空！</em>
  171.             </div>
  172.             <div class="button">
  173.                 <button class="btn btn-submit">立即提交</button>
  174.                 <button type="reset" class="btn btn-rest">重置</input>
  175.             </div>
  176.         </div>
  177.         <hr>
  178.         <ul id="list">
  179.         </ul>
  180.     </div>
  181.     <script>
  182.         // 获取元素
  183.         const msg = document.querySelector('.content');
  184.         // 提交按钮
  185.         const btn = document.querySelector('.btn-submit');
  186.         console.log(btn);
  187.         // 重置按钮
  188.         const resetBtn = document.querySelector('.btn-rest');
  189.         console.log(resetBtn);
  190.         // 评论列表
  191.         const ul = document.querySelector('#list');
  193.         btn.addEventListener('click', ev => {
  194.             // 获取文本框的内容：msg.value
  195.             let str = ` <li class="item" >
  196.                             <div class="avatar">
  197.                                 <img src="data:image/png;base64,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" />
  198.                             </div>
  199.                             <div class="comment">
  200.                                 <div class="title">
  201.                                     <span class="nick"><b>残破的蛋蛋</b></span>
  202.                                     <div class="time">${formatDate(Date.now())}</div>
  203.                                 </div>
  204.                                 <div class="context">${msg.value}</div>
  205.                                 <hr>
  206.                             </div>
  207.                             <button class="del" onclick="del(this)">删除</button>
  208.                         </li>
  209.                         `;
  210.             if (msg.value.length === 0) {
  211.                 console.log(1);
  212.                 document.getElementsByClassName('tips')[0].style.display = 'block';
  213.                 return false;
  214.             }
  215.             ul.insertAdjacentHTML('afterbegin', str);
  216.             msg.value = '';
  217.         });
  218.         // 删除评论
  219.         function del(element) {
  220.             confirm('确定要删除这条评论吗？') ? element.parentNode.outerHTML = null : false;
  221.         }
  222.         // 重置内容
  223.         resetBtn.onclick = function () {
  224.             msg.value = '';
  225.         }
  226.         // 获取时间
  227.         function formatDate(time) {
  228.             let date = new Date(time);
  229.             console.log(date);
  230.             let y = date.getFullYear(); 
  231.             console.log(y);
  232.             let m = date.getMonth();
  233.             m = date.getMonth()+1 < 10 ? `0${date.getMonth()+1}` : date.getMonth()+1
  234.             console.log(m);
  235.             let d = date.getDate();
  236.             console.log(d);
  237.             let h = date.getHours();
  238.             console.log(h);
  239.             let i = date.getMinutes();
  240.             console.log(i);
  241.             let s = date.getSeconds();
  242.             console.log(s);
  243.             return `${y}-${m}-${d} ${h}-${i}-${s}`;
  244.         }
  245.     </script>
  246. </body>
  247. </html>
  • 效果图：

留言板

三、字符串常用的10个方法

  1. // 1. concat() 拼接字符串
  2. let str = "html".concat(" css ", "php !", 888);
  3. console.log(str); // html css php !888
  5. // 2. slice(start, end) 取子串
  6. str = "html css php !";
  7. let res = str.slice(0, 5);
  8. console.log(res); // html
  9. // 省略第二个参数，表示从0一直取到末尾
  10. res = str.slice(0);
  11. console.log(res); // html css php !
  13. res = str.slice(5);
  14. console.log(res); // html css php !
  16. res = str.slice(-5);
  17. console.log(res); // html css php !
  19. res = str.slice(-5, -2);
  20. console.log(res); // html css php !
  22. // 3.substr(start, length)
  23. res = str.substr(0, 6);
  24. console.log(res);
  25. res = str.substr(-5, 3);
  26. console.log(res);
  28. // 4.trim():删除两端空格
  29. let pwd = "   root888   ";
  30. console.log(pwd.length); // 13
  32. // 5.将字符串打成数组
  33. res = str.split("");
  34. console.log(res);
  36. // 比如说从邮箱中解析出用户和邮箱地址
  37. res = "admin@admin.cn".split("@");
  38. console.log(res[0]); // admin
  39. console.log(res[1]); // admin.cn
  41. // 6.查找字符串中的字符串
  42. str = "The full name of China is the People's Republic of China.";
  43. // 使用indexof()方法返回字符串指定的文本首次出现的位置
  44. console.log(str.indexOf('China'));  // 17
  45. // lastIndexOf()方法返回指定的字符串在文本中最后一次出现的位置
  46. console.log(str.lastIndexOf('the')); // 26
  47. // indexof()和lastIndexOf()如果在文中本找到指定的字符串，则返回-1
  48. console.log(str.indexOf('hello')); // -1
  49. console.log(str.lastIndexOf('hello')); // -1
  51. // 7.search()方法返回指定文本在文中第一次出现的位置
  52. str = "The full name of China is the People's Republic of China.";
  53. console.log(str.search('China')); // 17
  55. // 8.替换字符串
  56. str = "Please visit microsoft and Microsoft!";
  57. console.log(str.replace('Microsoft', '微软')); // Please visit microsoft and 微软!
  58. // 默认的replace()只替换首次匹配的字符串，并且对大小写敏感
  60. // 9.大小写转换
  61. str = 'Hello World!';
  62. // 字符串转大写
  63. console.log(str.toUpperCase()); // HELLO WORLD!
  64. console.log(str.toLocaleUpperCase()); // HELLO WORLD!
  65. // 字符串转小写
  66. console.log(str.toLowerCase()); // hello world!
  67. console.log(str.toLocaleLowerCase()); // hello world!
  69. // 10.charAt()方法返回字符串中指定下标的字符串
  70. str = 'Hello World';
  71. console.log(str[0]); // H
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：留言板用心了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post