冒泡、捕获、阻止默认事件

Ele.addEventListener(type,fn,false);  false为冒泡  true为捕获

在同一个ele上可以绑定相同type事件，可以一个为冒泡一个为捕获。

会先执行捕获事件

1. 事件冒泡：

从代码结构上（非视觉上）嵌套关系的元素，会存在冒泡功能。

点击子元素，会从子元素依次往父元素，触发事件。

1. 事件捕获：

代码结构上（非视觉上）嵌套关系的元素，会存在捕获功能。

点击子元素，会自父元素捕获至子元素（该事件源元素）

触发顺序  先捕获 后冒泡

focus、blur、change、submit、reset、select等事件没有冒泡功能

 

取消冒泡与阻止默认事件

1. 取消冒泡

·标准：event.stopPropagation();

·ie：event.cancelBubble=true;

 

1. 阻止默认事件

阻止默认事件 方法

1. return false； 以对象属性的方式注册的事件才生效

2.event.preventDefault()  w3c标准  ie9下不兼容

3.event.returnValue = false; 兼容ie

表单提交、a标签跳转、右键菜单等

 

// 阻止默认事件 方法
// 1. return false； 以对象属性的方式注册的事件才生效
// 2.event.preventDefault()  w3c标准  ie9下不兼容
// 3.event.returnValue = false; 兼容ie
// 表单提交、a标签跳转、右键菜单等

// 阻止右键菜单


document.oncontextmenu = function(e){
	console.log(1);
	// return false;
	// e.preventDefault();
	// e.returnValue = false;
}


// 封装阻止默认事件 
function stopEvent(e){
	if (e.preventDefault) {
		e.preventDefault();
	}else{
		e.returnValue = false;
	}
}