简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1. 事件冒泡,事件代理的原理是什么,实例演示 2. 自选5个课堂中未提及的字符串API,进行演示

1. 事件冒泡,事件代理的原理是什么,实例演示 2. 自选5个课堂中未提及的字符串API,进行演示

P粉314265155
P粉314265155原创
2022年07月30日 17:05:09328浏览

classList对象与事件添加方式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>classList对象与事件添加方式</title>
  8.     <style>
  9.         .red{
  10.         color: red;
  11.         }
  12.         .bgc {
  13.             background-color: blue  ;
  14.         }
  15.         .ye{
  16.             color: yellow;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <h1 class="red bgc ">hello</h1>
  22.     <h2>word</h2>
  23.      <script>
  24.         // 1、style 属性：标签的行内样式
  25.         // 2、getComputerStyle 计算样式
  26.         // 3、classList  来操作 class 属性
  28.         const h1 = document.querySelector('h1');
  29.         console.log(h1.className);
  30.         console.log(h1.classList);
  31.      const h2 =document.querySelector('h2');
  33.      console.log('================');
  34.     //  classList 的添加、 判断   替换 删除、切换
  35.     // 1、add();  添加
  36. h2.classList.add('red');
  38.     // 2、contains 判断  输出布尔
  39.     console.log( h2.classList.contains('red'));
  40. // 3、replace   替换
  41.               h1.classList.replace('red','ye');
  42.         // 4、remove   删除      ' 
  43.             h1.classList.remove('bgc');
  44.     // 5、切换
  45.     // 如果有这个类就去掉，没有就加上
  46.     console.log(h2.classList);
  47.     console.log(h1.classList);
  48.     // 有去掉
  49.     h1.classList.toggle('ye');
  50.     // 没有加上替换
  51.     h2.classList.toggle('ye');
  53.      </script>
  54. </body>
  55. </html>

事件的添加与删除

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>事件的添加与删除</title>
  8. </head>
  9. <body>
  12.     <!-- <button onclick="alert(this.texcontent)">元素对象</button>
  13.      -->
  14.      <button>我是第一个按钮</button>
  15.      <button>我是第三个按钮</button>
  16.      <button>我是第四个按钮事件派发器</button>
  17.      <button>我是第五个按钮事件派发器</button>
  18.      <button>我是第二个按钮</button>
  19.     <script>
  20.         // 事件三要素
  21.         // 1、事件名称 ：字符串  click   keydown   scroll
  23.         // 2、事件主体： 元素    button   div p  
  24.         // 3、事件方法 ==事件侦听器 ==函数  function（）{。。。。。。}
  25. const btn1 = document.querySelector('button:first-of-type');
  26. // 1、事件添加   的方法。事件监听
  27. // on +事件类型 type    =  callback   回调
  28. btn1.onclick = function () {
  29. // event:预定义对象。保存了绑定到当前事件主体上的事件对象详情 事件对象
  30. // event  官方已不建议使用 此方法 。事件对象。保存事件细节。不需要定义
  31. console.log('1');
  32. console.log(event);
  33.  };
  34. // 简化  箭头函数
  35. // btn1.onclick = () => console.log(event);
  36. // 事件取消
  37. // btn1.onclick = null;
  39. // 2、事件监听  addEventListener()
  41. const btn2   = document.querySelector('button:last-of-type')    ;
  42. // addEventListener()  事件名称.事件回调方法，触发阶段
  43. btn2.addEventListener('click',function(){
  44.     console.log(event);
  45. },false);
  46. // 事件取消  当使用了事件监听器时，如果需要取消事件，就不能用回调来声明事件方法
  47. // btn2.removeEventListener('click',show,false);
  48. console.log('=======');
  49. const show =function(){
  50.     console.log(event);
  51. }
  52. const btn3   = document.querySelector('button:nth-of-type(2)')    ;
  53. // addEventListener()  事件名称.事件回调方法，触发阶段
  54. btn3.addEventListener('click',show,false);
  55. // 事件取消  当使用了事件监听器时，如果需要取消事件，就不能用回调来声明事件方法
  56. btn3.removeEventListener('click',show,false);
  57. // 3、事件派发
  58. // 第一步 ：先创建一个自定义事件
  59. const btn4  = document.querySelector('button:nth-of-type(3)')    ;
  60. let  i = 0;
  61. btn4.addEventListener('click',function(){
  62.     i=i+1;
  63.     // console.log('已经赚了：'+ i + ' 元');
  64. //   while(i > 10)  return console.log('hello');;
  65.  (i <10 )? (console.log('已经赚了：'+ i + ' 元')) :false;
  67.     // if(i>= 100) return false;
  68. });
  69. console.log('--------');
  70. //  创建一个自定义事件
  71. const btn5  = document.querySelector('button:nth-of-type(4)')    ;
  72. let h = 0;
  73.       btn5.addEventListener('click', function () {
  74.        h+= 1;
  75.         console.log('已经赚了 : ' + h + ' 元');
  76.       });
  77. const myEvent   =new Event('click');
  78. // 事件派发// dispatchEvent
  79. btn5.dispatchEvent(myEvent);
  80. // 第二步：将事件自动派发给 指定元素，并触发
  81. // 添加定时器，自动派发setTimeout  单次执行，每个一段时间，执行一次，一次性的
  82. let timer= setInterval(function(){
  83.     console.log('hello');
  84.     btn5.dispatchEvent(myEvent);
  85.     // 关闭定时器
  86.     // h =1 ;
  87.     if (h >= 10) clearInterval(timer);
  88. },2000
  89. );
  93. // setInterval  间歇性的，不间断的
  94.     </script>
  95. </body>
  96. </html>

事件代理、事件传递、事件委托、事件传递机制与事件冒泡

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>事件代理、事件传递、事件委托、事件传递机制与事件冒泡
  8.     </title>
  9. </head>
  10. <body>
  11.      <button onclick="show()"> 点击</button>
  12.      <ul>
  13.         <li >item1</li>
  14.         <li>item2</li>
  15.         <li>item3</li>
  16.         <li>item4</li>
  17.         <li>item5</li>
  18.      </ul>
  19.      <ul>
  20.         <li data-index="6" >item6</li>
  21.         <li data-index="7" >item7</li>
  22.         <li data-index="8" >item8</li>
  23.         <li data-index="9" >item9</li>
  24.         <li data-index="10" >item10</li>
  25.      </ul>
  28.      <script>
  29.     //     function show (){
  30.     //     //    事件独享：总是可用
  31.     //         console.log(event);
  32.     //      // 1、事件主体、触发者   代表当前事件触发的 button
  33.     //        console.log('事件主体：',event.currentTarget);
  34.     //        console.log(typeof event);
  35.     //     //    console.log(typeof event.bubbles);
  36.     //     // 事件目标、
  37.     //     console.log('事件目标：',event.target);
  38.     // 没有事件委托 时 事件主体= 事件目标 true   有事件委托是 就是fasle
  39.     //     console.log(event.currentTarget==event.target);
  40.     //     }
  41.     //     // 获取所有的li
  42.     //     const items =document.querySelectorAll('li');
  43.     //     // items.forEach((items) =>(items.onclick = ()=>console.log(event.currentTarget)));
  44.     //     items.forEach(function(items){
  45.     //         items.onclick = function(){
  46.     //             // 事件主体 
  47.     //             console.log(event.currentTarget);
  48.     //             // 事件主体的内容
  49.     //             console.log(event.currentTarget.textContent);
  50.     //             // 阻止冒泡
  51.     //             event.stopPropagation();
  52.     //         }
  53.     //     });
  54.     //     //    1、每个li 的父级都是同一个，是ul
  55.     //         // 2| ul 的父级是body
  56.     //         // body的父级是 html
  57.     //         //  事件冒泡，1、当前元素的事件会向上传递，往父级上冒泡        2、
  58.     //                             //  2、当父级的同名事件时会自动触发
  59.     //                             // 关键词 ：父级  、同名（事件名称）
  60.     //                 //  点击li   触发ul  的点击事件
  61.     //                             document.querySelector('ul').onclick = ( )  =>console.log(event.currentTarget);
  63.     //                //  触发ul  的点击事件 触发，引起ul 父级触发
  64.     //                document.querySelector('body').onclick = ( )  =>console.log(event.currentTarget);
  65.     //                 //  触发body  的点击事件 触发，引起html 父级触发
  66.     //                document.querySelector('html').onclick = ( )  =>console.log(event.currentTarget);
  67.     //                 //  触发html  的点击事件 触发，引起document  父级触发
  68.     //                 document.onclick = ( )  =>console.log(event.currentTarget);
  69.     //   //  触发document 的点击事件 触发，引起windows  父级触发
  70.     //   window.onclick = ( )  =>console.log(event.currentTarget);
  73.     //   简化版
  74.         // 根据冒泡原理，当前元素上的同名事件，会向上传递到它的父级
  75.         // 如果当前是一个列表，或者当前是一组集合，那么添加事件会非常麻烦
  76.         //  不管当前有多少个元素，根据dom树的特点，都会有一个父级
  77.         // 所以可将这个事件，直接添加到它的父级上即可,可以简化代码。但是
  78.         // 需要通过一些手段判断哪个子元素触发了事件、
  81.     //  事件委托、事件代理 ：将子元素的事件委托到父元素上触发，以简略代码
  82. // 1、先获取到 所有 li的父级 ul
  83. const  ul = document.querySelector('ul:last-of-type') ;
  84. // 1、给ul 添加事件
  85. ul.onclick = function(){
  86.     // 事件目标  点击事件的触发者  li  子元素
  87.     console.log(event.target);  
  88. //   找到当前事件的触发者  可以为他添加自定义属性 data-index  
  89.     console.log(event.target.dataset.index);
  90.     console.log('========');
  91.         // 事件主体  onclick  父元素
  92.         console.log(event.currentTarget);
  93.         // 在事件代理的场景下,事件目标与事件主体是不一致: 父子关系
  94.         console.log(event.target === event.currentTarget);
  96. }
  99.      </script>
  100. </body>
  101. </html>

表单事件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表单事件</title>
  8. </head>
  9. <body>
  10.  <!-- 1、添加  onsubmit="alert('hello')   事件，当提交时，跳转弹框 -->
  11. <!-- <form action="ph.php" method="post" id="login" onsubmit="alert('hello')"> -->
  12.      <!-- 方式二 取消form表单元素的默认提交行为 -->
  13.     <!-- <form action="ph.php" method="post" id="login" onsubmit="return false"> -->
  15.         <form action="ph.php" method="post" id="login" >
  16.     <label class="title">用户登录</label>
  17.     <br>
  18. <label for="email">邮箱账户：</label>
  20. <input type="email" id="email" name="email" value=""  autofocus />
  21. <br>
  22. <label for="password">邮箱密码：</label>
  23. <input type="password" name="password" id="password" autofocus  />
  24. <br>
  25. <!-- 如果把<button 放到表单 form 里面默认就是提交行为 ，需要禁用掉 -->
  26.  <!-- 1、修改 <button 类型 改为 button  不会跳转 页面-->
  27.     <!-- <button type="button"  name="submit" onclick="check(this)">登录</button> -->
  28.     <button name="submit" onclick="check(this)">登录</button>
  29. </form>
  32. <script>
  33.     function check(e) {
  34.         // 方式三、禁用提交按键的 默认行为  ,增加用户提交信息验证   推荐
  35.          event.preventDefault();
  36.         //  防止 冒泡
  37.         event.stopPropagation();
  38.         // 进行非空验证
  39.         // 每一个表单控件  input button select     都有一个属性 form  是当前表单的引用对象
  40.         console.log(e.form);
  41.         let email = e.form.email;
  42.         let password = e.form.password;
  43.         // 开始判断
  44.         if (email.value.length ==0){
  45.             alert('邮箱不能为空')
  46.             // 焦点重置
  47.             email.focus();
  48.             return false;
  49.         } else if (password.value.length ==0){
  50.             alert('密码不能为空')
  51.             password.focus();
  52.             return false;
  53.         } else {
  54.             // document.textContent('登录成功');
  56.             console.log('登录成功');
  57.         }
  59.     }
  61.      // 1. submit: 提交
  62.       // 2. focus: 焦点
  63.       // 3. blur: 失去焦点
  64.       // 4. change: 值改变,且失去焦点时
  65.       // 5. input: 值一旦改变就触发, 不等失去焦点
  66. </script>
  68. </body>
  69. </html>

字符串中的常用

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>字符串中的常用</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         let str = 'php中文网';
  12.         console.log(str);
  13.         console.log(str[1]);
  14.         console.log(str.length);
  15.         // charAt(1)  注意是小括号  根据索引拿到值
  16.         console.log(str.charAt(1));
  18.         // 根据值拿到索引  indexOf()
  19.         console.log(str.indexOf('h'));
  20.         console.log(str.search('h'));
  21.     //   字符串拼装
  22.     console.log(str.concat('（'+'www.baidu.com'+')'));
  23.     //  模板字面量 拼装 用反引号 括起来
  25.     // 字符串替换  临时替换输出 不是最终的 ,但是可以保存到变量中
  26.     console.log(str.replace('中文','百度'));
  27.     console.log(str);
  28. //  输出 结果从  索引 0到 3  但是 不包括 3
  29. console.log(str.slice(0,3));
  30. // 第二个参数 是获取的数量 
  31. console.log(str.substr(0,5));
  33. // 支持负数   从左到右 分别是 -1  -2  -3
  34. console.log(str.substr(-2,5));
  36. //  -2 是从右边开始 的起始索引
  37.     //   5是获取的数量，向右
  41.     </script>
  42. </body>
  43. </html>

上一条：JS数据类型和遍历循环下一条：Javascript的Dom增删改方法、留言板添加自定义样式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多