<div class="demo">
    <button>方法监听事件1</button>
    <button>方法监听事件2</button>
</div>

<script>
    var buts = document.querySelectorAll('button');
    buts[1].addEventListener('click', function () {
        alert('注册事件1');
    })
    buts[1].addEventListener('click', function () {
        alert('注册事件2');
    })
</script>

<div class="demo">
	<div>删除事件1</div>
	<div>删除事件2</div>
	<div>删除事件3</div>
</div>

<script>
	var divs = document.querySelector(".demo").querySelectorAll("div");
	divs[0].onclick = function () {
		alert("删除弹框事件");
		this.onclick = null;
	};
</script>

<div class="demo">
    <div>删除事件-传统方式</div>
    <div>删除事件-监听方式</div>
</div>

<script>
    var divs = document.querySelector('.demo').querySelectorAll('div');
    divs[0].onclick = function(){
        alert('删除弹框事件');
        this.onclick = null;
    }
    // 调用的方法不用加小括号
    divs[1].addEventListener('click', fn);

    function fn(){
        alert('删除弹框事件1');
        divs[1].removeEventListener('click', fn);
    }

<div class="father">
    <div class="son">son 盒子</div>
</div>

<script>
    var father = document.querySelector('.father');
    var son = document.querySelector('.son');
    // addEventListener 的参数 useCapture 为 true 则是捕获阶段，默认为 false，冒泡阶段
    // 捕获阶段 --- 先出现 father 弹框，再出现 son 弹框
    father.addEventListener('click', function () {
        alert('father')
    }, true)
    son.addEventListener('click', function () {
        alert('son')
    }, true)

    // 冒泡阶段 --- 先出现  弹框，再出现 father 弹框
    father.addEventListener('click', function () {
        alert('father')
    })
    son.addEventListener('click', function () {
        alert('son')
    })
</script>

<div>123</div>
<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>
<script>
    // 常见事件对象的属性和方法
    // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
    // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        // 我们给ul 绑定了事件  那么this 就指向ul
        console.log(this);

        // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
        console.log(e.target);
    })
</script>

<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
    <input type="submit" value="提交" name="sub">
</form>
<script>
    // 常见事件对象的属性和方法
    // 1. 返回事件类型
    var div = document.querySelector('div');
    div.addEventListener('click', fn);
    div.addEventListener('mouseover', fn);
    div.addEventListener('mouseout', fn);

    function fn(e) {
        console.log(e.type);
    }
    // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
    var a = document.querySelector('a');
    a.addEventListener('click', function(e) {
        e.preventDefault(); //  dom 标准写法
    })
    // 3. 传统的注册方式
    a.onclick = function(e) {
        // 普通浏览器 e.preventDefault();
        e.preventDefault();
        // return false 也能阻止默认行为
        // 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
        return false;
        alert(11);
    }
</script>

 <div class="father">
     <div class="son">son儿子</div>
</div>
<script>
    // 阻止冒泡  dom 推荐的标准 stopPropagation()
    var son = document.querySelector('.son');
    son.addEventListener('click', function (e) {
        alert('son');
        e.stopPropagation(); // stop 停止  Propagation 传播
    });

    var father = document.querySelector('.father');
    father.addEventListener('click', function () {
        alert('father');
    });
    document.addEventListener('click', function () {
        alert('document');
    })
</script>

<ul>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
    <li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
    // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        alert('知否知否，点我应有弹框在手！');

        // e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';
    })
</script>