js事件冒泡 监听

事件冒泡

bubbles 返回布尔值，指示事件是否是冒泡事件类型。 默认true
cancelBubble 返回布尔值，指示事件是否取消了冒泡事件。 默认false

oBox1.οnclick=function(ev){
ev=ev||window.event;
alert(“box1”);
if(ev.stopPropagation){
ev.stopPropagation()
}else{
// 除IE外的主流浏览器
ev.cancelBubble=true;
}
}

事件监听

box1可以多次进行监听不会被下一次监听覆盖

oBox1.addEventListener(“click”,function(ev){
console.log(ev);
console.log(“添加了监听事件01”)
},false)

事件捕获

oBox4.addEventListener(“click”,function(){
alert(“box4”)
},true)

默认事件

cancelable 返回布尔值，指示事件是否拥有可取消的默认动作。
defaultPrevented 返回布尔值，表明当前事件是否调用了 event.preventDefault()方法。

默认事件：元素本身自带的事件

oAnchor.onclick = function (ev) {
    ev = ev || window.event;
    if (ev.preventDefault) {
        ev.preventDefault()
    } else {
        return false;
        // ev.returnValue=true;
    }
    console.log(ev)
}

事件委托

oAdd.οnclick=function(){
var newBtn=document.createElement(“BUTTON”);
newBtn.innerText=“按钮”+index;
newBtn.className=“btn”;
oBox.appendChild(newBtn);
index++;
}

oBox.addEventListener(“click”,function(ev){
if(ev.target&&ev.target.nodeName==“BUTTON”){
console.log(ev.target.innerText)
}
})