浏览器的默认行为
当我们在浏览网页的时候,浏览器会为我们自动化的处理一些事件,这就是浏览器的默认行为。
比如说当按下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)
}