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

删除节点

删除
    

        
1
        
2
        
3
    
    

删除留言案例

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 + "删除";
                   //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);
                       }
                   }
               }
           }
       

   克隆节点

    
   
           
   1
           
   2
           
   3
       
       

   动态生成表格

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

   
           
   
               
   
                   
   姓名
                   
   科目
                   
   成绩
                   
   操作
               
           
           
   
   
           
       
       

   三种动态创建元素区别 document.write() element.innerHTML document.createElement() 区别 1.document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 2.inner HTML是将内容写入某个DOM节点，不会导致页面全部重绘 3.inner HTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 4.create Element（）创建多个元素效率较低一点点，但结构更清晰  

   注册事件

   注册事件有两种方式：传统方式和方法监听注册方式 传统注册方式利用onclick 特点：注册事件的唯一性 同一个元素同同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

   传统方式注册事件
       方法监听注册方式
       attch
       

   删除事件

    
   1
       
   2
       
   3
       

   DOM事件流 事件流描述的是从页面中接收事件的顺序 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流   事件对象

   123
       
   
   
       
   123
       百度
       
   
           
       
       

   阻止冒泡

   标准写法

   e.stopPropagation()

   事件委托原理

   不是每个字节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。 以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为li，事件会冒泡到ul上，ul有注册事件，就会触发监听器。

   
           
   知否知否
           
   知否知否
           
   知否知否
           
   知否知否
       
       

   常用鼠标事件

   1.禁止鼠标右键菜单

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

   2.禁止鼠标选中

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

   鼠标事件对象

   案例：跟随鼠标的图片

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