博主信息
博文 34
粉丝 0
评论 0
访问量 29192
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
事件传递机制与事件冒泡/事件代理及字符串常用的api
OC的PHP大牛之路
原创
496人浏览过

事件传递机制与事件冒泡/事件代理

事件三要素
1.事件名称:字符串’click’、’keydown’、’scroll’
2.事件主体:元素<button>、<div>、<p>、
3.事件方法:函数function(ev){…}

事件传递机制与事件冒泡

  1. <ul>
  2. <li>item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. <li>item4</li>
  6. <li>item5</li>
  7. </ul>
  8. <script>
  9. const items=document.querySelectorAll('li');
  10. items.forEach(function(item){
  11. item.onclick=function(){
  12. console.log(event.currentTarget);
  13. // 阻止冒泡
  14. event.stopPropagation();
  15. };
  16. });
  17. // 事件冒泡:当前元素的事件会向上(父级)传递,父级有同名事件会自动触发
  18. // 关键词:父级、同名
  19. // li的父级ul
  20. document.querySelector('ul').onclick=()=>console.log('li的父级ul',event.currentTarget);
  21. // ul的父级body
  22. document.body.onclick=()=>console.log('ul的父级body',event.currentTarget);
  23. // body的父级html
  24. document.documentElement.onclick=()=>console.log('body的父级html',event.currentTarget);
  25. // html的父级document
  26. document.onclick=()=>console.log('html的父级document',event.currentTarget);
  27. // document的父级window
  28. window.onclick=()=>console.log('document的父级window',event.currentTarget);
  29. </script>

事件代理

  1. <body>
  2. <ul>
  3. <li data-index="1">item1</li>
  4. <li data-index="2">item2</li>
  5. <li data-index="3">item3</li>
  6. <li data-index="4">item4</li>
  7. <li data-index="5">item5</li>
  8. </ul>
  9. <script>
  10. // 事件代理:将子元素的事件,委托在父元素上出发,以简化代码
  11. // 1.先获取所有li的父级ul
  12. const ul=document.querySelector('ul');
  13. // 2.给ul添加事件
  14. ul.onclick=function(){
  15. // 事件目标:li,子元素
  16. // 为了知道当前事件的触发者,可以为它添加自定义属性data-...
  17. console.log(event.target,event.target.dataset.index);
  18. // 事件目标:ul,父元素
  19. console.log(event.currentTarget);
  20. }
  21. </script>

字符串常用的api

  1. <script>
  2. let str='Php中文网';
  3. // 1.str.charAt()
  4. console.log(str.charAt(3));
  5. // 2.str.indexOf()
  6. console.log(str.indexOf('文'));
  7. // 3.str.search()
  8. console.log(str.search('文'));
  9. // 4.str.concat()
  10. console.log(str.concat('(','php.cn',')'));
  11. // 5.str.replace()
  12. console.log(str.replace('中文网','.cn'));
  13. // 6.str.slice()
  14. console.log(str.slice(0,3));
  15. // 7.str.substr()
  16. console.log(str.substr(0,3));
  17. // 8.str.split()把字符串以分割符为界点分割成数组
  18. console.log(str.split('h',[2]));
  19. // 9.str.trim()去掉字符串前后空格
  20. console.log(str.trim('网'));
  21. // 10.str.charCodeAt()指定位置的字符转ASCII码
  22. console.log(str.charCodeAt(1));
  23. // 11.str.toUpperCase()转成大写
  24. console.log(str.toUpperCase('php中文网'));
  25. // 12.str.toLowerCase()转为小写
  26. console.log(str.toLowerCase('php中文网'));
  27. </script>
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学