创建元素方法及事件监听与解绑

今天的学习可能是状态不好，感觉格外吃力
本次部分案例

 // 添加到第一个子元素的前面
    // insertBefore(要添加的子元素, 添加到某个子元素的前面)
    my$("dv").insertBefore(obj, my$("dv").firstElementChild);
}

//移除父元素的第一个子元素
my$("btn2").onclick = function () {
    //  removeChild(移除的元素)
    my$("dv").removeChild(my$("dv").firstElementChild);
}

//干掉所有的子元素
my$("btn3").onclick = function () {
    // 循环的删掉第一个子元素
    while (my$("dv").firstElementChild){
        my$("dv").removeChild(my$("dv").firstElementChild)
    }
}

//替换子元素
my$("btn4").onclick = function () {
    var newTxt = document.createElement("a");
    newTxt.innerHTML = "好困";
    //  替换   replaceChild(新元素, 要替换的元素)
    my$("dv").replaceChild(newTxt, my$("dv").firstElementChild);
}

事件监听的兼容
//定义一个 为任意元素绑定的任意事件 --> 参数: 元素, 事件, 函数
function addEvent(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 addEvent(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 f1(){
console.log(‘呵呵’)
}
//绑定
addEvent(my$("btn"),"click",f1)addEvent(my$(“btn”), “click”, function () {
console.log(‘呵’)
})

//解绑
my$("btn2").onclick = function(){
    removeEvent(my$("btn"),"click", f1)
}