javascript-删除克隆节点+事件对象和方法+鼠标键盘对象

删除节点

<button>删除</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //2.注册时间
        btn.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

删除留言案例

1. 当我们把文本域里面的值赋给li的时候，多添加一个删除的连接
2. 需要把所有的连接获取过来，当我们点击当前的连接的时候，删除当前连接所在的li
3. 阻止连接跳转需要添加javascript：void（0）；或者javascript：；

4. //1。获取元素
           var btn = document.querySelector('button');
           var text = document.querySelector('textarea');
           var ul = document.querySelector('ul');
           //2.注册事件
           btn.onclick = function () {
               if (text.value == '') {
                   alert('您没有输入内容');
                   return false;
   
               } else {
                   //1.创建元素
                   var li = document.createElement('li');
                   li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                   //2.添加元素
                   // ul.appendChild(li);
                   ul.insertBefore(li, ul.children[0]);
                   //3.删除元素 删除当前连接的li 他的父亲
                   var as = document.querySelectorAll('a');
                   for (var i = 0; i < as.length; i++) {
                       as[i].onclick = function () {
                           //node.removeChild(child);删除的是li 当前a所在的li this。parentNode
                           ul.removeChild(this.parentNode);
                       }
                   }
               }
           }
       </script>

   克隆节点

    <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ul>
       <script>
           var ul = document.querySelector('ul');
           //1.node.cloneNode();括号为空或者里面是false浅拷贝 只复制标签不复制里面的内容
           //1.node.cloneNode(true);括号为空或者里面是true深拷贝 
           var lili = ul.children[0].cloneNode(true);
           ul.appendChild(lili);
   
       </script>

   动态生成表格

   1. 因为里面的学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象存储
   2. 所有的数据都是放到tbody里面的行里面
   3. 因为行很多，需要循环创建行
   4. 每个行里面又有很多的单元格对应数据，我们还继续使用循环创建多个单元格，并把数据存入
   5. 最后一列单元格是删除，需要单独创建单元格。

    <style>
           table {
               width: 500px;
               margin: 100px auto;
               border-collapse: collapse;
               text-align: center;
           }
   
           td,
           th {
               border: 1px solid #333;
           }
   
           thead tr {
               height: 40px;
               background-color: #ccc;
           }
       </style>    

   <table cellspacing="0">
           <thead>
               <tr>
                   <th>姓名</th>
                   <th>科目</th>
                   <th>成绩</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
   
           </tbody>
       </table>
       <script>
           //1.学生数据
           var datas = [
               {
                   name: '曹操',
                   subject: 'javascript',
                   score: 100
               },
               {
                   name: '刘备',
                   subject: 'javascript',
                   score: 99
               },
               {
                   name: '张飞',
                   subject: 'javascript',
                   score: 100
               },
               {
                   name: '关羽',
                   subject: 'javascript',
                   score: 98
               }
           ];
           //2.往tbody中创建行，通过数组长度获取行数
           var tbody = document.querySelector('tbody');
           for (var i = 0; i < datas.length; i++) {
               //创建行
               var tr = document.createElement('tr');
               tbody.appendChild(tr);
               //行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数
               for (var k in datas[i]) {
                   var td = document.createElement('td');
                   //把对象的属性值给td
                   td.innerHTML = datas[i][k];
                   tr.appendChild(td);
               }
               //创建有删除两个字的单元格
               var td = document.createElement('td');
               td.innerHTML = '<a href="javascript:;">删除</a>';
               tr.appendChild(td);
           }
           //4.删除操作
           var as = document.querySelectorAll('a');
           for (var i = 0; i < as.length; i++) {
               as[i].onclick = function () {
                   //点击a 删除当前a所在行√ node.removeNode
                   tbody.removeChild(this.parentNode.parentNode);
               }
           }
       </script>

   三种动态创建元素区别

   document.write()

   element.innerHTML

   document.createElement()

   区别

   1.document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

   2.inner HTML是将内容写入某个DOM节点，不会导致页面全部重绘

   3.inner HTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

   4.create Element（）创建多个元素效率较低一点点，但结构更清晰

    

   注册事件

   注册事件有两种方式：传统方式和方法监听注册方式

   传统注册方式利用onclick

   特点：注册事件的唯一性

   同一个元素同同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

   <button>传统方式注册事件</button>
       <button>方法监听注册方式</button>
       <button>attch</button>
       <script>
           var btns = document.querySelectorAll('button');
           //1.传统方式
           btns[0].onclick = function () {
               alert('hei');
           }
           btns[0].onclick = function () {
               alert('hei u y');
           }
           //2.监听方式
           btns[1].addEventListener('click', function () {
               alert(22);
           });
           btns[1].addEventListener('click', function () {
               alert(33);
           });
           //3.了解 
           btns.attachEvent('onclick', function () {
               alert(11);
           });
       </script>

   删除事件

    <div>1</div>
       <div>2</div>
       <div>3</div>
       <script>
           var divs = document.querySelectorAll('div');
           divs[0].onclick = function () {
               alert(11);
               //1.传统方式删除事件
               divs[0].onclick = null;
           }
           //2.removeEventListener删除事件
           divs[1].addEventListener('click', fn);
           function fn() {
               alert(22);
               divs[1].removeEventListener('click', fn);
           }
       </script>

   DOM事件流

   事件流描述的是从页面中接收事件的顺序

   事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

    

   事件对象

   <div>123</div>
       <script>
           //事件对象
           var div = document.querySelector('div');
           div.onclick = function (event) {
               console.log(event);
           }
           div.addEventListener('click', function () {
               console.log(e);
           })
           //1.event就是一个事件对象 写到我们侦听函数的小括号里面 当形参来看
           //2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
           //3.事件对象 是我们事件的一系列相关数据的集合 跟事件相关的比如鼠标点击里面就包
           //含了鼠标的相关信息，鼠标坐标啊，如果键盘事件里面就包含的键盘事件的信息 比如判断用户按下了按个键
           //4.这个事件可以自己命名 比如event evt e

   事件对象常见的属性和方法

   <div>123</div>
       <ul>
           <li>abc</li>
           <li>abc</li>
           <li>abc</li>
       </ul>
       <script>
           //常见的事件对象的属性和方法
           //1.e.target返回的是触发事件的对象（元素） this返回的是绑定的事件的对象（元素）
           //区别：e.target点击了那个元素，就返回那个元素 this那个元素绑定了这个点击事件，那么就返回谁
           var div = document.querySelector('div');
           div.addEventListener('click', function (e) {
               console.log(e.target);
               console.log(this);
           })
           var ul = document.querySelector('ul');
           ul.addEventListener('click', function (e) {
               console.log(this);
               console.log(e.target);
           }) 
       </script>
   
   
       <div>123</div>
       <a href="http://www.baidu.com">百度</a>
       <form action="https://www.baidu.com">
           <input type="submit" value="提交" name="sub">
       </form>
       <script>
           //常见事件对象的属性和方法
           //1.返回事件类型
           var div = document.querySelector('div');
           div.addEventListener('click', fn);
           div.addEventListener('mouseover', fn);
           div.addEventListener('mouseout', fn);
           function fn(e) {
               console.log(e.type);
           }
           //2.阻止默认行为
           var a = document.querySelector('a');
           a.addEventListener('click', function (e) {
               e.preventDefault();
           });
           a.onclick=function(e){
               //利用 return false 也能阻止默认行为 没有兼容性问题 特点 return 后面的代码不再执行
               return false;
           }
       </script>

   阻止冒泡

   标准写法

   e.stopPropagation()

   事件委托原理

   不是每个字节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

   以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为li，事件会冒泡到ul上，ul有注册事件，就会触发监听器。

   <ul>
           <li>知否知否</li>
           <li>知否知否</li>
           <li>知否知否</li>
           <li>知否知否</li>
       </ul>
       <script>
           var ul = document.querySelector('ul');
           ul.addEventListener('click', function (e) {
               e.target.style.backgroundColor = 'pink';
           })
       </script>

   常用鼠标事件

   1.禁止鼠标右键菜单

        //1.contextmenu
           document.addEventListener('contextmenu', function (e) {
               e.preventDefault();
           });

   2.禁止鼠标选中

   document.addEventListener('selectstart', function (e) {
               e.preventDefault();
           });

   鼠标事件对象

   <script>
           //鼠标事件对象MouseEvent
           document.addEventListener('click', function (e) {
               //1.client鼠标在可视区的x和y坐标
               console.log(e.clientX);
               console.log(e.clientY);
               //2.page鼠标在页面文档的x和y坐标
               console.log(e.pageX);
               console.log(e.pageY);
               //3.screen鼠标在电脑屏幕的x和y坐标
               console.log(e.screenX);
               console.log(e.screenY);
           });
       </script>

   案例：跟随鼠标的图片

   1. 鼠标不断的移动，使用鼠标移动事件：mousemove
   2. 在页面中移动，给document注册事件
   3. 图片要移动距离，而且不占位置，我们使用绝对定位即可
   4. 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y作为图片的top和left值就可以移动图片

   5. <style>
              img {
                  width: 100px;
                  height: 140px;
                  position: absolute;
              }
          </style>    
      <img src="images/IMG_3124.JPG" alt="">
          <script>
              var pic = document.querySelector('img');
              document.addEventListener('mousemove', function (e) {
                  var x = e.pageX;
                  var y = e.pageY;
                  pic.style.left = x - 50 + 'px';
                  pic.style.top = y - 70 + 'px';
              });
          </script>

       常用键盘事件

   6. <script>
              //常用键盘事件
              //1.keyup案件弹起触发
              // document.onkeyup = function () {
              //     console.log('tanqilai');
              // }
              document.addEventListener('keyup', function () {
                  console.log('我弹起来了');
              });
              //2.keydown按键按下的时候触发
              document.addEventListener('keydown', function () {
                  console.log('我按下了down');
              });
              //3.keypress按键按下的时候触发 不能识别功能键 比如ctrl shift 左右等
              document.addEventListener('keypress', function () {
                  console.log('我按下了press');
              });
              //4.三个事件的执行顺序 keydown-keypress-keyup
          </script>

      
      键盘事件对象

   <script>
           //键盘事件对象中keycode可以得到相应的ASCII值
           document.addEventListener('keyup',function(e){
               console.log(e.keyCode);
               //1.我们的keyup和keydown事件不区分大小写 a和A都是65
               //2.我们的keypress事件区分大小写 a是97 ，A是65
           });
       </script>

   案例：京东搜索框

   核心思路 ：检测用户是否按下s键，如果按下s键，就把光标定位到搜索框里面

   使用键盘事件对象里面的keycode判断用户按下的是否是s键

   搜索框获得焦点，使用js里面的focus（）方法

   <input type="text">
       <script>
           var search = document.querySelector('input');
           document.addEventListener('keyup', function (e) {
               if (e.keyCode == 83) {
                   search.focus();
               }
           });
       </script>

   案例：京东快递单号查询

   • 快递单号输入内容时，上面的大号字体盒子（con）显示这里面的文字
   • 同时把快递单号里面的值获取过俩赋值给con盒子作为内容
   • 如果快递单号为空，则隐藏大号字体盒子
   • 注：keydown和keypress在文本框里面的特点，他们两个事件触发的时候，文字还没有落入文本框中
   • keyup事件触发时，文字已经落入文本框里面了
   • 当我们失去焦点，就隐藏这个con盒子
   • 获得焦点时，并且文本框内容不为空，就显示con盒子

   * {
               margin: 0;
               padding: 0;
           }
   
           .search {
               position: relative;
               width: 178px;
               margin: 100px;
           }
   
           .con {
               display: none;
               position: absolute;
               top: -40px;
               width: 171px;
               border: 1px solid rgba(0, 0, 0, .2);
               box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
               padding: 5px 0;
               font-size: 18px;
               line-height: 20px;
               color: #333;
           }
   
           .con::before {
               content: '';
               width: 0;
               height: 0;
               position: absolute;
               top: 28px;
               left: 18px;
               border: 8px solid #000;
               border-style: solid dashed dashed;
               border-color: #fff transparent transparent;
           }
       </style>    

   <div class="search">
           <div class="con">123</div>
           <input type="text" placeholder="请输入您的快递单号" class="jd">
       </div>
       <script>
           var con = document.querySelector('.con');
           var jd_input = document.querySelector('.jd');
           jd_input.addEventListener('keyup', function () {
               if (this.value == '') {
                   con.style.display = 'none';
               } else {
                   con.style.display = 'block';
                   con.innerHTML = this.value;
               }
           });
           //当失去焦点就隐藏con盒子
           jd_input.addEventListener('blur', function () {
               con.style.display = 'none';
           });
           jd_input.addEventListener('focus', function () {
               if (this.value !== '') {
                   con.style.display = 'block';
               }
           });
       </script>