webapi3

WebAPI3
删除节点
node.removeChild(child)从DOM中删除一个节点，返回删除的节点
删除

• 
  
• 熊大
• 
  
• 熊二
• 
  
• 光头强
• 
  

删除留言案例：
javascript:;//阻止链接跳转

复制节点：
node.cloneNode()括号为空或false，是浅拷贝，只复制标签不复制里面的内容
for(var k in obj){
k得到的是属性名
obj[k]得到的是属性值
}
动态生成表格：

    </tbody>
</table>
<script>
    // 1.先去准备好学生的数据
    var datas = [{
        name: '魏璎珞',
        subject: 'JavaScript',
        score: 100
    }, {
        name: '弘历',
        subject: 'JavaScript',
        score: 98
    }, {
        name: '傅恒',
        subject: 'JavaScript',
        score: 99
    }, {
        name: '明玉',
        subject: 'JavaScript',
        score: 88
    }, {
        name: '大猪蹄子',
        subject: 'JavaScript',
        score: 0
    }];

姓名	科目	成绩	操作

var tbody=document.querySelector(‘tbody’);
for(var i=0;i<datas.length;i++){
var th=document.createElement(‘tr’);
tbody.appendChild(tr);
for(var k indatas[i]){
var td=document.createElement(‘td’);
td.innerHTML=datas[i][k];
tr.appendChild(td);
}
//3.创建删除单元格
var td=document.querySelector(‘td’);
td.innerHTML=‘删除’
tr.appendChild(td);
}
//4.删除操作
var as=document.querySelectorAll(‘a’);
for(var i=0;i<as.length;i++){
as[i].οnclick=function(){
tbody.removeChild(this.parentNode.parentNode);
}
}

三种动态创建元素方式：
1.document.write();//文档流执行完毕，会导致页面重绘
document.write(‘

123

’);
2.element.innerHTML//拼接字符串，耗时；数组形式拼接，效率快
var inner = document.querySelector(’.inner’);
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += ‘ 百度’
// }
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push(‘ 百度’);
}
inner.innerHTML = arr.join(’’);
3.document.createElement//创建多个元素效率较高
var create = document.querySelector(’.create’);
for (var i = 0; i <= 100; i++) {
var a = document.createElement(‘a’);
create.appendChild(a);
}
二、事件高级：
1.注册事件（绑定事件）
a。传统：on开头，唯一性，同一元素同一个事件只能设置一个处理函数，后面的事件处理函数会把前面的函数覆盖掉
b。方法监听注册方式：
addEventListener()//同一元素同一个事件可以注册多个监听器，按注册顺序执行
兼容性问题，IE9之前不支持，可使用attachEvent（）代替

eventTarget.addEventListener(type,listener[,useCapture])
type:事件类型字符串，比如click、mouseover，注意这里不要带on
listener:事件处理函数，事件发生时，会调用该监听函数
useCapture:可选参数，是一个布尔值，默认是false，学完DOM事件流后，在进一步学习
var btns=document.querySelector(‘button’);
btns[1].addEventListener(‘click’,function(){
alert(22);
})
btns[1].addEventListener(‘click’,function(){
alert(33);
})//同一个元素同一个事件可以添加多个侦听器（事件处理程序）
c。attachEvent（）//ie9以前的版本支持
eventTarget.attachEvent（eventNameWithOn,callback）
eventNameWithOn:事件类型字符串，比如onclick、onmouseover，这里要带on
callback：事件处理函数，当目标出发事件时回调函数被调用
btns[2].attachEvent(‘onclick’,function(){
alert(11);
})
注册事件兼容性问题解决方案：
function addEventListener (element,fn){
//判断当前浏览器是否支持addEventListener方法
if(element.addEventListener){
element.addEventListener(eventName,fn);//第三个参数默认是false
}else if(element.attachEvent){
element.attachEvent(‘on’+evenName,fn);
}else{
//相当于element.οnclick=fn;
element[‘on’+eventName]=fn;
}
}
删除事件（解绑事件）
1.传统注册事件方式：
eventTarget.οnclick=null;
2.方法监听注册方式：
a.eventTarget.removeEventListener(type,listener,useCapture);
b.eventTarget.detachEvent(eventNameWithon,callback);
删除事件兼容性问题解决方案：
function removeEventListener(element,eventName,fn){
//判断当前浏览器是否支持removeEventListener方法
if(element.removeEventListener){
element.removeEventListener(eventName,fn);
}else if(element.detachEvent){
element.detachEvent(‘on’+eventName,fn);
}else {
element[‘on’+eventName]=null;
}
}

1

2

3

DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
捕获阶段：从大到小
当前目标阶段：
冒泡阶段：从小到大
注意：
1.js代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段
3.addEventListener（type，listener[，useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序，如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4.实际开发我们很少使用事件捕获，更关注事件冒泡
5.有些事件是没有冒泡的，比如onblur\onfous\onmouseenter\onmouseleave
6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件

son盒子

事件对象:

123

事件对象的常见属性和方法：
事件对象属性方法 说明
e.target 返回触发事件的对象 标准
e.srcElement 返回触发事件的对象 非标准ie6-8使用
e.type 返回事件的类型 比如click、mouseover不带on
e.cancelBubble 该属性阻止冒泡 非标准ie6-8使用
e.returnValue 该属性阻止默认事件（默认行为），非标准ie6-8使用 比如不让链接跳转
e.preventDefault() 该属性阻止默认事件（默认行为）标准 比如不让链接跳转
e.stopPropagation() 阻止冒泡 标准

// 常见事件对象的属性和方法
// 1. 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);

    // }
    // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识

---

123

百度

阻止事件对象冒泡的兼容性解决方案：
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancleBubble=true;
}
事件委托（代理、委派）
原理：
不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置的每个子结点

• 吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼
• 吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼
• 吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼
• 吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼
• 吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼

常用的鼠标事件： contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单 //禁用右键 document.addEventListener('contextmenu',function(e){ e.preventDefault(); }) //禁止选中文字selectstart document.addEventListener('selectstart',function(e){ e.preventDefault(); }) 鼠标事件对象： MouseEvent e.clientX 返回鼠标相对于浏览器窗口可视区的x坐标 e.clientY 返回鼠标相对于浏览器窗口可视区的y坐标 e.pageX 返回鼠标相对于文档页面的x坐标 IE9+支持 e.pageY 返回鼠标相对于文档页面的y坐标 IE9+支持 e.screenX 返回鼠标相对于电脑屏幕的x坐标 e.screenY返回鼠标相对于电脑屏幕的y坐标

mousemove事件