Blogger Information
Blog 20
fans 0
comment 0
visits 10977
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
事件冒泡,字符串api
Original
368 people have browsed it

1.事件冒泡

1.1原理

当前元素的事件会向上(向父级)进行传递,当父级有同名事件时会自动触发

1.2 事件冒泡

  1. 根据冒泡原理,当前元素上的同名事件,会向上传递到它的父级,如果当前是一个列表,或者当前是一组集合,那么添加事件会非常麻烦,不管当前有多少个元素,根据DOM树的特点,都会有一个父级,所以,可以将这个事件, 直接添加到它的父级上即可, 可以极大的简化代码,但是要通过一些手段, 来判断当前是哪个子元素触发了事件
  2. 事件委托/事件代理: 将子元素的事件,委托在父元素上触发,以简化代码

  1. 如图 点击父盒子 子盒子也会触发
  2. <body>
  3. <div class="box" style="width:400px;height:400px; background-color:seagreen">
  4. <div class="box1" style="width:200px;height:200px; background-color:sandybrown"></div></div>
  5. </body>
  6. <script>
  7. document.querySelector('.box').addEventListener('click',()=>{
  8. alert('666')
  9. // 事件绑定者:event.currentTarget
  10. console.log(event.currentTarget)
  11. // 事件触发者:event.target
  12. console.log(event.target);
  13. })
  14. </script>

2. 字符串api

  1. let a='AbCdeF'
  2. // 1.大小写转换
  3. // 小写
  4. console.log(a.toLocaleLowerCase());
  5. // 大写
  6. console.log(a.toUpperCase());
  7. // 2.分隔字符串
  8. console.log(a.split(''));
  9. // 3.将字符串变api
  10. document.write(`${a.link('https:baidu.com')}`)
  11. // 4.字符串加粗
  12. document.write(`${a.bold()}`)
  13. // 5.去除字符串的两边的空格,会将去除空格之后的结果返回给我们。
  14. let b=' 123 '
  15. console.log(b.trim());
Correcting teacher:PHPzPHPz

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