DOM事件

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

前端面试题（3）——DOM事件类
DOM事件
DOM事件
DOM0和DOM2级事件简单理解
Dom事件
3-6 DOM事件
HTML DOM 事件
网易微专业-DOM编程艺术 05 事件
DOM事件类
DOM事件

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>

点击事件处理：预览链接

前端面试题（3）——DOM事件类
基本概念：DOM事件的级别 DOM事件模型：事件冒泡事件捕获 DOM事件流描述DOM事件捕获的具体流程 Even...
DOM事件
DOM级别与DOM事件 DOM级别：DOM0级、DOM1级、DOM2级、DOM3级DOM事件：DOM0级事件处理、...
DOM事件
DOM级别与DOM事件 DOM级别：DOM0级，DOM1级，DOM2级和DOM3级DOM事件：DOM0级事件处理，...
DOM0和DOM2级事件简单理解
关于DOM0 和DOM1级事件可以简单理解为：事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件...
Dom事件
基本概念 Dom事件级别 Dom事件模型 Dom事件流描述Dom事件捕获的具体流程 Event对象的常见应用自...
3-6 DOM事件
问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流描述DOM事件捕获的具体流程 Ev...
HTML DOM 事件
HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...
网易微专业-DOM编程艺术 05 事件
1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...
DOM事件类
基本概念：DOM事件的级别 DOM事件模型 DOM事件流描述DOM事件捕获的具体流 Event对象的常见应用自...
DOM事件
DOM事件的级别 DOM事件模型 DOM事件流描述DOM时间捕获的具体流程 Event对象的常见应用自定义事件...

DOM事件

DOM2事件传播机制

addEventListener与onclick

DOM样式操作

DOM元素获取

一、DOM元素选取的API

1. document对象

2. Element

二、创建元素

1. createElement()

2. createTextNode()

3. createDocumentFragment()

三、修改元素

1. appendChild()

2. insertBefore()

3. replaceChild()

三、删除与复制元素

1. removeChild()

2. cloneNode()

事件传播机制

阻止传播

取消默认事件

事件代理

样例代码

相关文章

前端面试题（3）——DOM事件类

DOM事件

DOM事件

DOM0和DOM2级事件简单理解

Dom事件

3-6 DOM事件

HTML DOM 事件

网易微专业-DOM编程艺术 05 事件

DOM事件类

DOM事件

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读