search

博客列表 >JavaScript事件与字符串常用函数

JavaScript事件与字符串常用函数

残破的蛋蛋
残破的蛋蛋原创
2021年01月11日 16:26:10853浏览

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,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAHCklEQVRoQ+2Zd1BUVxTGv106K82VJk1BEHAElGBBYxR1Eomxm6gJjo4tGnUsmZiIRkfDRMeWaOwmxthLNBg10dhFUBEZEASRLkVAWFjaUpbNnOvsm0VBGN9j3MG9f8Huffed3/nuPeWuqPvpaSq8Q0OkA27nausUbucCQ6ewTuF25gHdlm5ngr6Co1NYp3A784BuS7czQbUnaHXpYIcprkGwMJDgiTwX+55cYMYNtvNFTmURUsvz2sT3b21L97P2wnr/WbA1scKj0iyMu7YaS3tMRIjbMKTIc7A85tc2geYNPNZ5IMj41o4ChQybE0+xZ9TApObIy6FY5z8Tnzj1h1gkwkNZRptA8wb+ofd0THAZ1FpephrBNQVMi2hCPy7LwdfRuwRVmjfwSt8vMMZ5AAdsINaHoVgfKqigUNaiQdX4Bim9PB8Tr69h888NC0M3s86cE+gzib4xVvtNRbBjX6hUKpzIvIE1cQdb7dCWJvIGfvkFZ4euhYe5I55Vy5g694tTmrVBDVxQLcOymL24U5TE5hL0xoA5KFKU4mTmTbia2UMEEf7Kvt0ST4vfCwo8xM4PtMWlRuZcIHqdBaeHrIa3pQvkdZW4XZgIG2MrWBhKYGNsAUOxAYz0DBgojZed0iJZMxMEBZ7pHoz5XqOZoaezIhD64LdGrx3e2R/LfabAyrBDI5jWGK+VwDv6LUSQfS/UNdQjqugRZDUVjVgoQo91HgBrY8tXGJWqBtQo61CtrMFzRRnyq0sgqy3H47KnyKsqwe3CBFTWK1rjm9fOEUxhKiT2BC6Gs8Sm2RfSea5V1jN1qbiwNrZAoE0PVNXXICz+MP7MusUbqKUFBANWb2djPUMWnUkxGnQGCVBPJGaqT4/YwNm0yHscZriPYP/vTbmArUlnWrKX9/eCAe/qv4iVhaTWxsQTOJJ+lRk30qkfVvlOhZmBCa7mx2Lena2c0V95jsac7iOhL9LD0YyrWBt3iK3RpYMtuls4wVliC6mRGaRGFjDVN8KZ7AiseLCfF7QgwINsffCj/wwuOofcWsedt4VeYzHLIxhikRh/pF5i29bT0hk+Vq5wkdgi0MYblLvp3OuL9bio3BTVhZx7WBK98+0DU6HwaZfBzJB/cu9hafQuzqjNAXMR7NgHFfXVuFuUjCB7v9dCqR9UFy5ltVUoqZEjs6KApTp1k/Gm1LwV9u3ohi0Bc9HZVMpsoLNLEfX72N9RXleN4x+sQDdzB+RWPcfF3PusOSBFadBZp7/pfBcqSnGzIB4JskxkVjzjipCh9r3Y3Cv5sW/K2Og53sBU+45yCoRIBCgbGti2JHXS5Hk4lnkdC73GwNxAguvP4nAo/TKL4s8Vci7NHBj4Dfpae7GqalnMPkQWJjYKaiFuw5njyIHkEL6DF7Dm2c2qKMD25HDM9xrDoCinxsvS4S/1gFKlbDYKk8OoFqf8uzHhJA6nX4GdiRVCfT5nOZ3Up/y7J+U8dj8+x5eX308tlHt/6jOPRdUdyWeZUdQMhPnPgKK+BvamUgafV1WMxdE7EVeS9orBL0fqpNJsFrmdJNZsblltJX5JDsfBtP94w9ICvBSmBca7vI+ATt3xbcy+RgYt6zkJIa7DoCcWg6KrZiDTnKhZf1NgM9EzYqqyY1Gej3UPjyKiIEEQWEGAm7KEtjo1ETbGlkwhau/O59xt0ujeUndseG82HEw7cd9TirqUF4MNCcdZ17XKbyp8rVxxIO0SwrMjecHzVvjlt1Nrt63vAvS3eXEL8m9uNBbfezV3UiMxuWsQ/KXurBJTj6eVReysnsq6yX2mDmzZlYWYHbmFRfE3HYIDL/Yej2ndPnxRL1cVYWn0bu7sUjCiqDvCoQ/sTTs2mY8zKp5hbtTPHFRPq64sTtAOiC1JxeQbYW/Kyp4TFHhS1yFY0mMCzA1MWY6lQEbl5CjnQNA2dzOz53Kw2mrqhSnHelm4wNPCCfUNShxMv4z1D4+xKXRnFuo7BaZ6xlz5yYdYMGAqEFb6hrCUQsXH30+jWCDTTF1qQykgFSvkCH8ayaIvndPZHh9jnucoUPMhr6tiF33HMq5hU8CXrFKj1BQWd4TV03yGIMAEtabXNAZLMFGFSVhwdxtXT6sbC1I9qSwbZ7Ii2F2V5tA8+9RhUV7OrSqGg6mURe5UeS4+u/ED756YN7CmsgRADTulIM2LdJrjKLHGxdxopmZzQ9NxmnNom+9PvYhNiSf5iCvMGSYYyrlUYFC1FRZ/hFcJSNDf+UxmxQwpTTuGys2Fd7fzVlewoEXV1XT3j1hzIES9S4ZRX0wXenSXpb7N5C2v0FFaCIPaeg3eZ7itDRR6fR2w0B7VtvV0CmubIkLbo1NYaI9q23o6hbVNEaHt0SkstEe1bT2dwtqmiND26BQW2qPatt47p/D/fz1ommzIsNIAAAAASUVORK5CYII=" />
  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
上一条：速记composer 工具使用技巧｜附composer 常用命令大全下一条：html+css flex小实战（仿购物商城手机端主页的顶部+底部+导航）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多