js 事件绑/解 阻止事件冒泡

绑/解事件

绑定事件的区别

addEventListener();
attachEvent()
相同点: 都可以为元素绑定事件
不同点: 1.方法名不一样 2.参数个数不一样 addEventListener 三个参数,attachEvent 两个参数
3.addEventListener 谷歌,火狐,IE11 支持,IE8 不支持
attachEvent 谷歌火狐不支持,IE11 不支持,IE8 支持
4.this 不同,addEventListener 中的 this 是当前绑定事件的对象
attachEvent 中的 this 是 window
5.addEventListener 中事件的类型(事件的名字)没有 on
attachEvent 中的事件的类型(事件的名字)有 on

解绑事件注意

注意:用什么方式绑定事件,就应该用对应的方式解绑事件 1.解绑事件
对象.on 事件名字=事件处理函数—>绑定事件
对象.on 事件名字=null; 2.解绑事件
对象.addEventListener(“没有 on 的事件类型”,命名函数,false);—绑定事件
对象.removeEventListener(“没有 on 的事件类型”,函数名字,false); 3.解绑事件
对象.attachEvent(“on 事件类型”,命名函数);—绑定事件
对象.detachEvent(“on 事件类型”,函数名字);

绑定事件

btn.addEventListener("click",function () {
    console.log(this);
},false);

btn.attachEvent("onclick",function () {
    console.log(this);
});

解绑事件

let btn = document.querySelectorAll("input");
// btn[0].onclick = function () {
//     console.log("我是你爸");
// }
// btn[1].onclick = function () {
//     // 1.解绑事件
//     btn[0].onclick = null;
// }


// 解绑2
function f1() {
    console.log("11");
}
function f2() {
    console.log("22");
}

// btn[0].addEventListener("click",f1,false);
// btn[0].addEventListener("click",f2,false);

// btn[1].onclick = function () {
//     // 2.解绑事件
//     btn[0].removeEventListener("click",f1,false);
// }

// 解绑3
 btn[0].attachEvent("onclick",f1);
 btn[0].attachEvent("onclick",f2);

 btn[1].onclick = function () {
     btn[0].detachEvent("onclick",f1);
 }

绑/解兼容写法

// 获取按钮
let btn = document.querySelectorAll("input");

// 事件函数
function f1() {
    console.log("11");
}

function f2() {
    console.log("22");
}

// 绑定
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] = fn;
    }
}

// 调用
addEventListener(btn[0], "click", f1)
addEventListener(btn[0], "click", f2)
btn[1].onclick = function () {
    removeEventListener(btn[0],"click",f1)
}

阻止事件冒泡

//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
//事件冒泡,阻止事件冒泡,
//如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

// e.stopPropagation(); 谷歌和火狐支持

let d1 = document.querySelector(".d1");
let d2 = document.querySelector(".d2");
let d3 = document.querySelector(".d3");

// 事件冒泡
d1.onclick = function () {
    console.log(this.className);
}
d2.onclick = function () {
    console.log(this.className);

    // window.event.cancelBubble = true;
}
// 事件处理参数对象
d3.onclick = function (e) {
    console.log(this.className);
    // 阻止事件冒泡
    // window.event.cancelBubble = true;
    e.stopPropagation();
}