JavaScript APIs-第三天（B站黑马程序员）

一、节点操作（接第二天）

1、删除节点

node.removeChild(child)

// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素  node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
    if (ul.children.length == 0) {
            this.disabled = true;
    } else {
        ul.removeChild(ul.children[0]);
    }
}

案例：删除留言 

// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function() {
    if (text.value == '') {
        alert('您没有输入内容');
        return false;
    } else {
        // console.log(text.value);
        // (1) 创建元素
        var li = document.createElement('li');
        // 先有li 才能赋值
        li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
        // (2) 添加元素
        // ul.appendChild(li);
        ul.insertBefore(li, ul.children[0]);
        // (3) 删除元素 删除的是当前链接的li  它的父亲
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // node.removeChild(child); 删除的是li 当前a所在的li this.parentNode;
                ul.removeChild(this.parentNode);
            }
        }
    }
}

2、克隆节点

node.cloneChild() / node.cloneChild(true)

 var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);

3、3种创建元素方式

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 creatElement 高

a. document.write()

1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
var btn = document.querySelector('button');
btn.onclick = function() {
    document.write('<div>123</div>');
}

b. innerHTML

var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
//     inner.innerHTML += '<a href="#">百度</a>'
// }
var arr = [];
for (var i = 0; i <= 100; i++) {
    arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');

c. document.createElement()

var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
    var a = document.createElement('a');
    create.appendChild(a);
}

二、事件高级

1、注册事件（绑定事件）

a. 传统注册方式

特点： 注册事件的唯一性。同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

// 1. 传统方式注册事件
btns[0].onclick = function() {
    alert('hi');
}
btns[0].onclick = function() {
        alert('hao a u');
}

b. 事件侦听注册

addEventListener()

特点：同一个元素同一个事件可以注册多个监听器。按注册顺序依次执行。

// 2. 事件侦听注册事件 addEventListener 
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {
    alert(22);
})
btns[1].addEventListener('click', function() {
        alert(33);
})

2、删除事件（解绑事件）

a. 传统方式删除

var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
    alert(11);
    // 1. 传统方式删除事件
    divs[0].onclick = null;
}

b. 侦听删除事件

removeEventListener()

// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
    alert(22);
    divs[1].removeEventListener('click', fn);
}

3、DOM事件流

DOM 事件流 三个阶段
1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 只能得到冒泡阶段。
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 son = document.querySelector('.son');
son.addEventListener('click', function() {
    alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
    alert('father');
}, false);
document.addEventListener('click', function() {
    alert('document');
})

4、事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象
event，它有很多属性和方法。
比如：
1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

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

e.target 和 this 的区别

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

5、事件对象阻止默认行为

e.preventDefault()

// 1. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
    e.preventDefault(); //  dom 标准写法
})

// 2. 传统的注册方式
a.onclick = function (e) {
    // 普通浏览器 e.preventDefault();  方法
    // e.preventDefault();
    // 低版本浏览器 ie678  returnValue  属性
    // e.returnValue;
    // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
    return false;
    alert(11);
}

6、阻止事件冒泡

event.stopPropagation()

// 常见事件对象的属性和方法
// 阻止冒泡  dom 推荐的标准 stopPropagation() 
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
    alert('son');
    e.stopPropagation(); // stop 停止  Propagation 传播
    e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
    alert('father');
}, false);
document.addEventListener('click', function() {
    alert('document');
})

7、事件委托（代理、委派）

事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点.

// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
    // alert('知否知否，点我应有弹框在手！');
    // e.target 这个可以得到我们点击的对象
    e.target.style.backgroundColor = 'pink';
})

8、常用的鼠标事件

阻止鼠标的默认行为

// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
})

// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function (e) {
    e.preventDefault();
})

获取鼠标坐标，3种方式定义的坐标 

// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
    // 1. client 鼠标在可视区的x和y坐标
    console.log(e.clientX);
    console.log(e.clientY);
    console.log('---------------------');

    // 2. page 鼠标在页面文档的x和y坐标
    console.log(e.pageX);
    console.log(e.pageY);
    console.log('---------------------');

    // 3. screen 鼠标在电脑屏幕的x和y坐标
    console.log(e.screenX);
    console.log(e.screenY);
})

案例：跟随鼠标的天使

var pic = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
    // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
    // console.log(1);
    // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
    var x = e.pageX;
    var y = e.pageY;
    console.log('x坐标是' + x, 'y坐标是' + y);
    //3 . 千万不要忘记给left 和top 添加px 单位
    pic.style.left = x - 50 + 'px';
    pic.style.top = y - 40 + 'px';
});