今日webAPI知识点总结

创建元素的三种方式

第一种方式:document.write 例:document.write("<p>文本</p>")

第二种创建方式: innerTHML  例: 父元素.innerHTML="<p>文本</p>"

第三种方式创建:

第一步使用createElement创建标签(空的):

var pObj = document.createElement("标签");

第二步使用appendChild添加到父元素里

父元素.appendChild(pObj);

注意 : 创建是一个空的标签,如果是要添加属性或者文本,通过 新元素.属性="值"  新元素.innerText="文本内容";

注册/移除事件的三种方式

注册事件:

addEventListener("事件的类型(不加on)",事件处理函数，false)------谷歌，火狐支持，ie11支持，ie8不支持

attachEvent("事件的类型(加on)",事件处理函数);--------谷歌，火狐，ie11不支持，ie8支持

on事件类型 = function (){}---------所有浏览器都支持

解绑事件:

removeEventListener("事件的类型(不加on)",事件处理函数，false)

detachEvent("加on的事件类型"，事件处理函数);

on事件类型 = function (){ 事件源.on事件类型 = null; }

事件兼容代码

//绑定事件兼容代码
function addEventListener(element, type, fn) {  
    if (element.addEventListener) {    
        element.addEventListener(type, fn, false);  
    } else if (element.attachEvent){    
        element.attachEvent('on' + type,fn);  
    } else {    
        element['on'+type] = fn;  
    }
}
//解绑事件兼容代码
function removeEventListener(element, type, fn) {  
    if (element.removeEventListener) {    
        element.removeEventListener(type, fn, false);  
    } else if (element.detachEvent) {    
        element.detachEvent('on' + type, fn);  
    } else {    
        element['on'+type] = null;  
    }
}

事件的三个阶段

1.捕获阶段:由外到内

2.当前目标阶段: 选择的那个

3.冒泡阶段: 由内到外

事件对象.eventPhase属性可以查看事件触发时所处的阶段

1===捕获阶段

2===目标阶段

3===冒泡阶段

addEventListener（事件的类型，事件处理函数，控制事件阶段的）；

第三个参数为false：冒泡，如果为true：捕获

阻止事件冒泡： 

①e.stopPropgation-----e是事件参数对象，是火狐特有的-----谷歌火狐支持，ie8不支持

 ②window.event.cancelBubble---window.event是事件参数对象，是ie特有的，ie不支持e，----谷歌ie支持