DOM事件

2018-12-18  本文已影响0人  我不信这样也重名

DOM2事件传播机制

addEventListener与onclick

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

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

DOM样式操作

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

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

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

2. Element

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

二、创建元素

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);

事件传播机制

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

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

阻止传播

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

取消默认事件

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

事件代理

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

样例代码

<!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>

<!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>

<!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>

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

<!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>
上一篇 下一篇

猜你喜欢

热点阅读