第二十到第二十一天：让你和页面对话-IFE-CSDN博客

第二十到第二十一天：让你和页面对话

日期	总用时	学习目标
2018.08.16	4h	DOM

学习目标

掌握 JavaScript 的核心之一：DOM，能够熟悉 DOM 相关操作，了解 JavaScript 事件机制

学习内容 V

学习笔记

事件冒泡与事件代理(事件委托）

事件冒泡

默认情况下:子元素的 event 触发会传播至父元素的相应事件
阻止冒泡:

   document.getElementById('parent').onclick=function () {
        console.log(this.getAttribute('data-id'));
    };
    document.getElementById('child').onclick=function (ev) {
        var e = ev||window.event;//<span style="color:#FF0000;">IE中event可以通过window.event随时取到，而其他浏览器需要通过参数传递</span>
        console.log(this.getAttribute('data-id'));
        stopPropagation(e);
    };
    function stopPropagation(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }

事件代理(事件委托)

子元素事件委托给父元素处理

var ul = document.getElementById('parentUl');
    ul.onclick=function (event) {
      var e = event||window.event,
              source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement
        if(source.nodeName.toLowerCase() == "li"){   //判断只有li触发的才会输出内容
            alert(source.innerHTML);
        }
        stopPropagation(e);                           //阻止继续冒泡
    };
    function addElement() {
        var li = document.createElement('li');
        li.innerHTML="我是新孩子";
        ul.appendChild(li);
    }

第二十到第二十一天：让你和页面对话-IFE

第二十到第二十一天：让你和页面对话

学习目标

学习内容 V

学习笔记

事件冒泡与事件代理(事件委托）

事件冒泡

事件代理(事件委托)

setInteval 和 setTimeout

CSS Sprite

作业：

待深入的知识

疑问

Flag