Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js事件和字符串方法
Blogger Information
Blog 37
fans 0
comment 0
visits 34714
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
js事件和字符串方法
手机用户1607314868
Original
618 people have browsed it

事件监听

事件监听调用addEventListener属性。此监听可以添加多个事件，且不会被覆盖
删除事件监听调用removeEventListener属性。

  1. <button>按钮</button>
  2. <script>
  3. const btn=document.querySelector("button");
  4. const handle=()=>console.log(btn.innerHTML,"移除");
  5. btn.addEventListener("click",handle);
  6. btn.removeEventListener("click",handle);
  7. </script>
事件派发

不用调用，直接就执行了。

  1. const ev=new Event("click");
  2. btn.addEventListener("click",function(){
  3.   console.log("自动执行了");
  4. });
  5. btn.dispatchEvent(ev);
事件传递

两种方式捕获，冒泡

  1. 捕获，从最外层元素逐级向内直到事件的绑定者 事件为true;
    2.冒泡：从目标再由内向外逐级向上直到最外层元素 事件为false;

    1.  <style>
    2.      #fu{
    3.          background-color: yellow;
    4.          width: 200px;
    5.          height: 200px;
    6.      }
    7.      #zi{
    8.          background-color: green;
    9.          width: 50px;
    10.          height: 50px;
    11.      }
    12.  </style>
    13. <body>
    14. <div id="fu">
    15.   <div id="zi">
    17.   </div>
    18. </div>
    19. <script>
    20. const fu=document.querySelector("#fu");
    21. const zi=document.querySelector("#zi");
    22. fu.addEventListener("click",function(ev){
    23. console.log(ev.currentTarget);
    24. },true);
    25. zi.addEventListener("click",function(ev){
    26. console.log(ev.currentTarget);
    27. },true);
    28. </script>
    29. </body>

    事件委托

如果元素太多，给父元素添加事件即可

  1.  <ul>
  2.      <li>item1</li>
  3.      <li>item2</li>
  4.      <li>item3</li>
  5.  </ul>
  6. <script>
  7. const ul=document.querySelector("ul");
  8. ul.addEventListener("click",function(ev){
  9.     ev.target.style.color="red";
  10. });
  11. </script>

留言板

留言板点击留言删除

  1.     <label for=""><input type="text" name="message"></label>
  2.     <ol id="list"></ol>
  3.     <script>
  4.         const msg=document.querySelector("input");
  5.         const list=document.querySelector("#list");
  6.         msg.onkeydown=ev=>{
  7.             //键盘事件中，key表示按下的键名
  8.             console.log(ev.key);
  9.            if(ev.key==="Enter"){
  10.                if(ev.currentTarget.value.length===0){
  11.                    alert("内容不能为空");
  12.                }else{
  13.                    let str=`<li>${ev.currentTarget.value}</li>`;
  14.                 list.insertAdjacentHTML("afterbegin",str);
  15.                 //清空上条数据
  16.                 ev.currentTarget.value=null;
  17.                 }
  18.            }
  19.         }
  20. //点击某条留言则删除
  21.     list.addEventListener("click",function(ev){
  22.             list.removeChild(ev.target);
  23.         });
  24.     </script>

字符串方法

  1. //slice(start,end)取子串
  2. let str="hello php.cn";
  3. let res=str.slice(0,5);
  4. //截取
  5. substr(start,length)
  6. res=str.substr(0,5);
  7. //trim()删除两边空格
  8. let psw=" root  ";
  9. psw.trim();
  10. //字符串长度
  11. str.length;
  12. //查找字符串 某一个指定的字符首次出现的位置
  13. str.indexOf("hello");
  14. //替换内容replace("被替换","替换后的内容");
  15. str.replace("hello","morning");
  16. //大小写转换
  17. str.toUpperCase();//转为大写
  18. str.toLowerCase();//转为小写
  19. //转为数组
  20. str.split(" ");使用空格分隔
  21. //内容匹配，查找字符串中特定的字符，找到则返回这个字符
  22. str.match("hello");
  23. //复制字符串repeat(次数)
  24. str.repeat(2);
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