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

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

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

学习目标

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

学习内容 V

• 第十九天：找到那个 DOM
• MDN DOM

学习笔记

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

事件冒泡

默认情况下:子元素的 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);
    }

setInteval 和 setTimeout

• setTimeout(functionName,time) 不会重复
• setInteval(functionName,time) 不会重复

CSS Sprite

将小图片组合成大的图片以节省带宽

对于后台程序员很简单，就不写了

作业：

• console submit
• 控制 display
• 显示颜色
• 显示颜色-利用事件代理
• 淡入淡出
• 一帧动画

待深入的知识

• 《JavaScript 高级程序设计》
• 跨平台测试
• CSS animation

疑问

Flag

系统的学习前端，坚持 66 天