Dom以及事件委托和事件冒泡

当网页被加载的时候，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM模型被构造为对象的树。

1. elememt 常用的属性和方法：

element.appendChild()
element.hasAttribute() 如果元素拥有指定属性，则返回true
element.insertBefore(newItem,exitItem) insert newItem before exitItem
element.setAttribute()
element.getAttribute()
element.removeAttribute()
element.childNodes 返回该元素的所有类型的子节点所组成的数组
element.children 返回该元素的所有元素节点
element.clientHeight content + padding
element.offsetHeight content + padding + border
element.scrollHeight content + padding(网页正文的全文高度，就是指包含滚动条的全部高度)
element.scrollTop 网页被卷上去的高度
element.firstChild 返回第一个子节点（注意不是子元素节点）
element.lastChild 返回最后一个子节点
element.innerHTML 设置或返回元素的html

2. 事件源对象event的常用属性和方法：

event.target 触发此事件的元素
event.preventDefault() 阻止浏览器默认动作
event.stopPropagation() 阻止事件的传播，也就是阻止事件捕获和事件冒泡

3. 事件捕获：

事件捕获是指事件的触发从最外层的body逐渐向内部触发该事件的元素捕获。
比如：div > span > a 这种层次结构，若点击了a，最先会触发body的点击监听 => div的点击监听 => span的点击监听 => 最后才会触发a的点击监听。

4. 事件冒泡：

事件冒泡与事件捕获正好相反，触发事件的元素会逐渐向上将事件的触发向上冒泡。
比如：div > span > a，若点击了a，会先触发a的点击监听，再触发span的，最后触发div的。

	<div class="classv">
	        我是祖宗
	        <div class="actva">
	            我是老爸
	            <div class="foo">
	                我是孩子
	            </div>
	        </div>
	</div>

    <script type="text/javascript">
        var a = document.querySelector('.classv').addEventListener('click', function() {
            console.log('我是祖宗')
        }, false)
        var b = document.querySelector('.actva').addEventListener('click', function() {
            console.log('我是老爸')
        }, false)
        var c = document.querySelector('.foo').addEventListener('click', function() {
            console.log('我是孩子')
        }, false)
	</script>

5. 事件委托（事件代理）

所谓的事件委托就是利用冒泡的处理机制，将子元素要做的事情委托给父元素，但是这样又会造成另外一个问题，就是所有子元素的同一类型的事件监听所做的事情都是相同的，所以这里就要用到事件源对象event，该事件源对象event的target属性能够表明是哪个元素将事情委托给父元素，从而对该子元素的样式或其他进行修改。

事件委托的优点：
    1. 提高性能：每一个函数都会占用内存空间，只需添加一个事件处理函数代理所有子元素的事件处理函数，所占用的内存空间更少。
    2. 动态监听：使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素同样的事件处理函数。

	<ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <button id="btn">添加新的li</button>
    
    <script>
        window.onload = function(){
            var btn = document.getElementById('btn');
            var ul = document.getElementById('ul1');
            var lis = document.getElementsByTagName('li');

            ul.onclick = function(e){
                var e = e || window.event;
                var target = e.target || e.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = 'red';
                }
            }

            btn.onclick = function(){
                var newLi = document.createElement('li');
                newLi.innerHTML = '我是新添加的li';
                ul.appendChild(newLi);
            }
        }
    </script>

初次运行效果图：

点击111和222的li之后的效果图：

点击按钮添加新的li之后，再对这个li进行点击的效果图：

从中可以看出利用事件委托可以给新添加的元素也进行事件代理，利用事件委托可以很好地解决一个页面上出现很多同类监听器的方法，但是并不是所有的事件监听器都可以用事件委托的方法，有些事件是没有事件冒泡的，所以就无法使用事件委托。