DOM事件

作者: 我不信这样也重名 | 来源:发表于2018-12-18 13:17 被阅读0次

DOM2事件传播机制

DOM2事件传播包含三个阶段：
事件捕获（capturing）：事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
目标节点：此时事件在目标上发生，被看做冒泡的一部分。
事件起泡（bubbling）：事件从目标节点一级一级向上上溯，直到顶级文档树节点。
DOM2通过addEventListener(eventType, handler, propagate)或removeEventListener(eventType, handler, propagate)给节点对象添加或删除事件处理函数，其中参数含义如下：
eventType：即事件类型，如click；
handler：事件处理函数，传入参数即为时间对象event；
propagate：若为true则只执行捕获和目标节点两个阶段。
IE的事件传播只包含目标节点和事件起泡两个阶段。其通过attachEvent(eventType, handler)与detachEvent(eventType, handler)给节点对象添加或删除事件处理函数。

addEventListener与onclick

addEventListener是W3C DOM中提供的注册事件监听器的方法，它的优点包括：

它允许给一个事件注册多个监听器。尤其是在使用DHTML库或Mozilla拓展包（即使使用了其他的库或拓展包，也需要保证运作良好）的场合特别有用。
它提供了一种更为精细的手段来控制事件监听器的触发阶段。（即可以选择捕获阶段或冒泡阶段。）
它能够作用于所有DOM元素，而不仅仅是HTML元素。

onclick作为内联事件，可以使用匿名函数、构造函数、闭包等，对单一事件来说，功能和addEventListener大致相同。但它有一个明显不足：由于内联事件是作为元素属性保存起来的，这些属性可以被覆盖，所以如果为同一个事件绑定了多个处理程序，那么最后一个处理程序会覆盖之前的程序。因此，onclick只能为元素添加一个事件处理程序。

DOM样式操作

修改样式：可修改元素的style属性，修改结果直接反应到页面元素

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'

获取样式：使用getComputedStyle获取元素计算后的样式，不要通过node.style.属性获取

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

class操作：样式的改变尽量使用class的新增删除来实现

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

DOM元素获取

DOM全称Document Object Model，即文档对象模型，其目的是为了操作文档而产生的API。

一、DOM元素选取的API

1. document对象

每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

    document.doctype
    document.title
    document.characterSet
    document.head
    document.body
    document.images

    /*了解
    readyState属性返回当前文档的状态，共有三种可能的值

    1. loading：加载HTML代码阶段，尚未完成解析
    2. interactive：加载外部资源阶段
    3. complete：全部加载完成
    */
    document.readyState

    /*了解
    compatMode 属性返回浏览器处理文档的模式，可能的值为
    1. BackCompat：向后兼容模式，也就是没有添加DOCTYPE
    2. CSS1Compat：严格模式，添加了DOCTYPE
    */
    document.compatMode

document.location：也可直接使用location，返回一个只读对象，提供了当前文档的URL信息。虽然location属性返回的对象是只读的，但是可以将URL赋值给这个属性，网页就会自动跳转到指定网址。
document.open()/close()：document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容
document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。
document.write()：document.write方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。

2. Element

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作

getElementById()：返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
getElementsByClassName()：返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByTagName()：返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByName()：用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
querySelector()：返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。无法选中CSS伪元素。
querySelectorAll()：返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

二、创建元素

1. createElement()

用来生成HTML元素节点。参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

var newDiv = document.createElement("div");

2. createTextNode()

用来生成文本节点，参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

3. createDocumentFragment()

生成一个DocumentFragment对象。DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

var docFragment = document.createDocumentFragment();

三、修改元素

1. appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

2. insertBefore()

在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

3. replaceChild()

replaceChild()接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

三、删除与复制元素

1. removeChild()

删除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

2. cloneNode()

cloneNode()方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

node.cloneNode(true);

事件传播机制

事件传播机制分为三个阶段：

事件捕获阶段：事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。(ie低版本没有捕获）
事件处理阶段：事件到达目标元素,执行目标元素的事件处理函数。
事件冒泡阶段：从捕获到事件源的元素开始往父级元素进行事件冒泡，DOM0级事件中，事件绑定函数的触发都发生在冒泡阶段。

阻止传播

用stopPropagation()取消事件进一步捕获或冒泡。

取消默认事件

用preventDefault()取消事件默认行为。

事件代理

通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target 指向引发触发事件的元素。

样例代码

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
      <li data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=338874098,844915032&fm=200&gp=0.jpg">鼠标放置查看图片1</li>
      <li data-img="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2424996049,3819069058&fm=200&gp=0.jpg">鼠标放置查看图片2</li>
      <li data-img="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=337973655,587192418&fm=200&gp=0.jpg">鼠标放置查看图片3</li>
  </ul>
  <div class="img-preview"></div>
<script>
  function $(selector){
    return document.querySelector(selector);
  }
  function $$(selector1, selector2){
    return selector1.querySelectorAll(selector2);
  }
  
  var children = $$($('.ct'), 'li');
  for(var i=0; i<children.length; i++){
    children[i].addEventListener('mouseenter', function(){
      $('.img-preview').innerHTML = '<img src="'+this.getAttribute('data-img')+'">';
    });
  }
</script>
</body>
</html>

补全代码，要求：
1.当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
2.当点击每一个元素li时控制台展示该元素的文本内容。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
  </ul>
  <input class="ipt-add-content" placeholder="添加内容"/>
  <button id="btn-add-start">开头添加</button>
  <button id="btn-add-end">结尾添加</button>
  <script>
    function $(selector){
      return document.querySelector(selector);
    }
    var start = $('#btn-add-start');
    var end = $('#btn-add-end');
    var content = $('#ipt-add-content');
    var ct = $('.ct');
    
    start.addEventListener('click', function(){
        var newLi = document.createElement('li');
        newLi.innerText = content.value;
        ct.insertBefore(newLi, ct.firstChild);
    });
    
    end.addEventListener('click', function(){
      var newLi = document.createElement('li');
      newLi.innerText = content.value;
      ct.appendChild(newLi);
    });
    
    ct.addEventListener('click', function(e){
      if(e.target.tagName.toLowerCase() === 'li'){
        console.log(e.target.innerText);
      }
    });
  </script>
</body>
</html>

要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
      <li>这里是</li>
      <li>饥人谷</li>
      <li>前端14班</li>
  </ul>
  <script>
    document.querySelector('.ct').addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
      console.log(e.target.innerText);
    }
  })
  </script>
</body>
</html>

写一个函数，批量操作 css。

function css(node, styleObj){
  for(var i in styleObj){
    node.style[i] =  styleObj[i];
  }
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
})

写一个 Demo，演示事件传播的过程，演示阻止传播的效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container,
    .box,
    .target{
      border: 1px solid;
      padding: 10px;
    }  
  </style>
</head>
<body>
  <div class="container">
    container
    <div class="box">
      box
      <div class="target">target</div>
    </div>
  </div>
  <script>
    function $(selector){
      return document.querySelector(selector);
    }
    var container = $('.container'),
        box = $('.box'),
        target = $('.target');
    
    container.addEventListener('click', function(e){
      console.log('contianer click.. in 捕获阶段');
    }, true);
    box.addEventListener('click', function(e){
      //若添加e.stopPropagation()，则捕获阶段止于box，不会再向下进行
      //e.stopPropagation();
      console.log('box click.. in 捕获阶段');
    }, true);
    target.addEventListener('click', function(e){
      console.log('target click.. in 捕获阶段');
    }, true);
    
    container.addEventListener('click', function(e){
      console.log('contianer click.. in 冒泡阶段');
    }, false);
    box.addEventListener('click', function(e){
      //若添加e.stopPropagation()，则冒泡阶段止于box，不会再向上进行
      //e.stopPropagation();
      console.log('box click.. in 冒泡阶段');
    }, false);
    target.addEventListener('click', function(e){
      console.log('target click.. in 冒泡阶段');
    }, false);
  </script>
</body>
</html>

点击事件处理：预览链接