9_js_dom编程进阶3

• Dom节点删除和复制操作
• 事件加强讲解

1. 节点操作

1.1 删除节点

• Node.removeChild() 方法从 DOM 中删除一个子节点。返回删除的节点。

  • child 是要移除的那个子节点。

  • node 是child的父节点。

  • PS：只能由父节点删除子节点

• 课堂案例：1.节点操作之删除节点.html

• 
  
  
      
      
      
      
  
  
      
  
          
  111
          
  222
          
  333
      
      删除li元素
  
      
      
  
  

1.2 复制（克隆）节点

• Node.cloneNode() 方法返回调用该方法的节点的一个副本。

  • 是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身。

• 课堂案例：2.节点操作之克隆节点.html

• 
  
  
  
      
      
      
      
  
  
  
      
  
          
  111
          
  222
          
  333
      
  
  
      
  
  
  
  

2. 事件进阶内容剖析

2.1 页面初始化事件

• load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

• 课堂案例：3.页面初始化事件.html

2.2 注册事件的2种方式

• 基于监听的方式注册事件：

  • addEventListener(type, listener, useCapture);

    • type：事件类型

    • listener：监听事件的方法

    • useCapture：捕获还是冒泡

  • EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）。

• 课堂案例：4.注册事件两种方式有何区别.html

• 
  
  
      
      
      
      
      
  
  
      第1种注册事件的方式
      第2种注册事件的方式
  
  

2.3 移除事件

• 课堂案例：5.移除事件.html

• 基于属性的注册方式移除：

  • this.onclick = null;

• 基于监听器的注册方式移除：

  • EventTarget 的 removeEventListener() 方法可以删除使用 EventTarget.addEventListener() 方法添加的事件。可以使用事件类型，事件侦听器函数本身，以及可能影响匹配过程的各种可选择的选项的组合来标识要删除的事件侦听器。参见下文的匹配要删除的事件监听器。

  • 
    
    
    
        
        
        
        
        
    
    
    
        事件1
        事件2
    
    
    

2.4 事件监听之事件流原理剖析

• EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）。

• addEventListener(type, listener, useCapture);

  • useCapture：

    • 默认是false表示事件会冒泡

    • 如果设置为true表示事件会捕获

  • : 一个布尔值，表示在 DOM 树中注册了 listener 的元素，是否要先于它下面的 EventTarget 调用该 listener。当 useCapture（设为 true）时，沿着 DOM 树向上冒泡的事件不会触发 listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 DOM Level 3 事件及 JavaScript 事件顺序文档。如果没有指定，useCapture 默认为 false。

2.5 事件流原理剖析

• 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

• 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。

• 课堂案例：6.事件的捕获与冒泡理解1.html

• 
  
  
      
      
      
      
      
      
  
  
      
  
          
  事件的冒泡
      
  
  

• 课堂案例：7.事件的捕获与冒泡理解2.html

• 
  
  
  
      
      
      
      
      
  
  
  
      捕获和冒泡同时存在的时候
  
  
  

3. 事件对象

3.1 什么是事件对象

• Event 接口表示在 DOM 中出现的事件。

  • 一些事件是由用户触发的，例如鼠标或键盘事件，而其他事件常由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等等。

• 课堂案例：8.什么是事件对象.html

• 
  
  
      
      
      
      
      
      
  
  
      
  
          事件对象
      
  
  

3.2 事件对象的属性和方法

• 只读属性 Event.type 会返回一个字符串，表示该事件对象的事件类型。

• Event.target：触发事件的对象 (某个 DOM 元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时，它与event.currentTarget不同。

• Event 接口的只读属性 currentTarget 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 Event.target 则是事件触发的元素。

• 课堂案例：9.事件对象的属性.html

• 
  
  
      
      
      
      
      
  
  
      
  111
      
  
          
  111
          
  222
          
  333
      
  
      
  
  

3.3 阻止事件触发

• event.preventDefault：

  • Event 接口的 preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。

• 课堂案例：10.阻止事件触发.html

• 
  
  
  
      
      
      
      
  
  
  
      京东
  
      
  
  
  

3.4 阻止事件冒泡

• event.stopPropagation：

  • Event 接口的 stopPropagation() 方法阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。如果要停止这些行为，请参见 preventDefault() 方法，它可以阻止事件触发后默认动作的发生。它也不能阻止附加到相同元素的相同事件类型的其它事件处理器，如果要阻止这些处理器的运行，请参见 stopImmediatePropagation() 方法。

• 课堂案例：11.阻止事件冒泡.html

• 
  
  
      
      
      
      
      
  
  
      
  
          
  事件的冒泡
      
  
      
      
  
  

3.5 事件委托案例

• 课堂案例：12.事件委托案例.html

• 
  
  
      
      
      
      
  
  
      
  
          
  111
          
  222
          
  333
      
  
      
      
  
  

4. 常用鼠标事件

4.1 禁止鼠标事件案例

• 课堂案例：13.禁止鼠标事件案例.html

• 
  
  
      
      
      
      
  
  
      
  
          xxxxx,禁止文字被选中
      
  
  
      
  
  

4.2 事件坐标属性

• x：横坐标

• y：纵坐标

• 课堂案例：14.获取鼠标在页面的坐标.html

4.3 改变鼠标样式案例

• 课堂案例：15.改变鼠标样式案例.html

4.4 键盘事件

• keyup 事件在按键被松开时触发。

• keydown事件触发于键盘按键按下的时候。

• 课堂案例：16.常用的键盘事件.html

• 
  
  
      
      
      
      
  
  
      常用的键盘事件
      keyup:  事件在案件松开的时候触发
  
      
  
  

4.5 键盘对象的属性

• 只读属性 KeyboardEvent.key 返回用户按下的物理按键的值。它还与 shiftKey 等调节性按键的状态和键盘的区域 / 和布局有关。

• 课堂案例：17.键盘对象的属性.html

4.6 键盘事件案例讲解

• 课堂案例：18.键盘事件案例解析.html

5. 课堂作业

• 课堂作业讲解：19.课堂作业.html

• 
  
  
      
      
      
      
      
  
  
      
      发布
      
  
          
  比屋教育前端课程
          
  xxxxx
          
  xxxxx
          
  xxxxx