跟着黑马视频学JS第六天

DOM

删除节点：node.removeChild(child); 
复制节点：node.cloneNode();//括号内容为空或者是false是浅拷贝 只复制标签不复制内容 true为深拷贝
DOM总结：P246

事件高级

addEventListener('click', function() {})//事件监听方式 有兼容性问题
// 2. 事件侦听注册事件 addEventListener 
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

removeEventListener 删除事件

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
    divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

    function fn() {
        alert(22);
        divs[1].removeEventListener('click', fn);
    }
   
</script>

DOM事件流

 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  
 document -> html -> body -> father -> son
 var son = document.querySelector('.son');
 son.addEventListener('click', function() {
 alert('son');
 }, true);
 var father = document.querySelector('.father');
 father.addEventListener('click', function() {
     alert('father');
 }, true);
 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  
 son -> father ->body -> html -> document

事件对象

    var div = document.querySelector('div');
    div.onclick = function (e) {
        // console.log(e);
        // console.log(window.event);
        // e = e || window.event;
        console.log(e);
    }
    //1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
    // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
    // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
    // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
    // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    有兼容性问题
    

常见的事件对象属性和方法

常见事件对象的属性和方法
    1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
    // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
    2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
    var a = document.querySelector('a');
    a.addEventListener('click', function(e) {
            e.preventDefault(); //  dom 标准写法   常用
        })
    3. 阻止冒泡  dom 推荐的标准 stopPropagation() 
    var son = document.querySelector('.son');
    son.addEventListener('click', function(e) {
        alert('son');
        e.stopPropagation(); // stop 停止  Propagation 传播
        e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
    }, false);   
    4.事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        // alert('知否知否，点我应有弹框在手！');
        // e.target 这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';
    })