JavaScript 默认行为，事件冒泡和事件委托-蒲公英云

JavaScript 默认行为，事件冒泡和事件委托

浏览器的默认行为

当我们在浏览网页的时候，浏览器会为我们自动化的处理一些事件，这就是浏览器的默认行为。
比如说当按下Enter时，此时我们并没有为Enter写入事件，但是浏览器会自动的执行提交表单事件；
在比如说当我们单击鼠标反键时，我们也没有写入事件，浏览器会自动显示反键菜单。

阻止浏览器的默认行为

有些时候我们并不能接受浏览器的默认行为，此时我们需要阻止浏览器的默认行为。
比如说页面上的图片，我不想用户通过反键一键保存，此时我们将鼠标点击反键事件重写，

document.oncontextmenu = function(event){ 
    var event = event || window.event || argument;
    // event.preventDefault();// IE9以下不兼容
    // event.returnValue = false;// 兼容老版本IE
    return false;
}

事件冒泡

当我们在每一个盒子模型中添加点击事件时，当我点击内部盒子是，单击事件会由内到外的方向进行传播；
假设点击盒子模型3时，此时会依次由内到外的进行事件传播触发盒子模型1，2，3的单击事件。
在这里插入图片描述

var div1 = document.getElementsByClassName('div1')[0];
var div2 = document.getElementsByClassName('div2')[0];
var div3 = document.getElementsByClassName('div3')[0];
div3.onclick = function () { 
    alert(this.innerText)
}
div2.onclick = function () { 
    alert(this.innerText)
}
div1.onclick = function () { 
    alert(this.innerText)
}

阻止事件冒泡

和默认行为一样，我们在开发的过程中，我们并不想事件冒泡，因此我们也需要阻止事件冒泡。

当我点击盒子模型3时，最盒子模型2，1的点击事件进行重写。

div2.onclick = function (event) { 
    event.praventDefault(event);
}
div1.onclick = function (event) { 
    event.praventDefault();
}

IE低版本

div2.onclick = function (event) { 
    event.canceBubble = true;
}
div1.onclick = function (event) { 
    event.canceBubble = true;
}

event

其中event对象代表着对象代表事件的状态。

兼容性

var event = event || window.event

下面图片中保存着event事件对象的属性，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。在这里插入图片描述

事件委托
事件委托就是自己的事情委托别人来做，假设说ul下面有一亿个li，li的点击事件我们一般是循环追加事件，但是请注意考虑循环的次数造成的CUP大量占用出现卡顿，卡机的情况，所以我们需要委托ul来帮忙做。

var ul = document.getElementsByTagName('ul')[0];
 ul.onclick = function(event){ 
     // 兼容性
     var event = event || window.event;
     // 获取元素
     var target = event.target || event.SrcElement;
     console.log(target)
 }