JavaScript 事件

        .wrapper  {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .content {
            margin-left: 200px;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box {
            margin-left: 200px;
            height: 100px;
            width: 100px;
            background-color: yellow;
        }
<div class="wrapper">
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

事件冒泡 自底向上

结构上(非视觉上)嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素。

    var wrapper = document.getElementsByClassName('wrapper')[0];

    wrapper.onclick = function () {
        console.log('a');
    }

    var wrapper = document.getElementsByClassName('wrapper')[0];
    wrapper.addEventListener('click',function () {
        console.log('a')
    },false)

事件捕获 自顶向下

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。

触发顺序 先捕获 后冒泡

focus,blur,change,submit,reset,select 等事件不冒泡。

取消冒泡和阻止默认事件

取消冒泡

w3c标准 event.stopPropagetion(); 但不支持ie9以下版本

	e.stopPropagation();

IE 独有

	e.cancelBubble = true;

封装一个函数

 function stopBubble(event) {
     if (event.stopPropagation){
         event.stopPropagation();
     }else {
         event.cancelBubble = true;
     }
 }
// 第一种使用方法
content.addEventListener('click',stopBubble,false);
// 第二种使用方法
    content.onclick = function (e) {
        stopBubble(e);
    };

阻止默认事件

1 ，return false 以对象属性的方式注册的事件才生效

	<a href="#">百度</a>

	var a  = document.getElementsByTagName('a')[0];
		a.onclick = function(){
		    return false;
	};

2 ，

行间 void() 里面相当于 return 返回值

<a href="javascript:void (false)">demo</a>

事件对象

<div  class="wrapper" style="width: 100px;height: 100px;background-color: red;">
    <div class="box" style="width: 50px;height: 50px;background-color: green;"></div>

</div>

<script>
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var box = document.getElementsByClassName('box')[0];

    wrapper.onclick = function (e) {
        var event = e || window.event;
        console.log(event);
    }

事件源对象
event.target 火狐 google 上也有

event.srcElement IE只有这个

这俩chrome都有

循环绑定 打印内容

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<script>
    var li = document.getElementsByTagName('li');
    for (var i = 0 ; i < li.length ; i ++ ){
        li[i].onclick = function () {
            console.log(this.innerText);
        }
    }
</script>

事件委托

利用事件冒泡，和事件源对象进行处理解决
优点 1 性能 不需要循环所有元素一个个绑定事件
2 灵活 当有新的子元素时不需要重新绑定事件

    var ul  = document.getElementsByTagName('ul')[0];
        ul.onclick = function (e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            console.log(target.innerText);
        }