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

事件传播机制

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

  1. 事件捕获阶段：事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。(ie低版本没有捕获）
  2. 事件处理阶段：事件到达目标元素,执行目标元素的事件处理函数。
  3. 事件冒泡阶段：从捕获到事件源的元素开始往父级元素进行事件冒泡，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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,122评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,070评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,491评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,636评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,676评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,541评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,292评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,211评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,655评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,684评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,295评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2赞 355

推荐阅读更多精彩内容

  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,490评论 1赞 11
  • DOM —— 事件
    事件流 JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 828评论 0赞 3
  • Dom、事件
    一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象...
    饥人谷_罗伟恩阅读 597评论 0赞 2
  • 任务22 DOM、事件-简答题
    1.dom对象的innerText和innerHTML有什么区别？ innerText是一个可写属性，返回元素内包...
    GarenWang阅读 456评论 0赞 0
  • Dom、事件
    问题 1.dom对象的innerText和innerHTML有什么区别？ innerText： 当使用innerT...
    饥人谷_任磊阅读 623评论 0赞 1