JavaScript的事件流模型有哪些？以及如何阻止事件冒泡和事件默认行为

JavaScript的事件流模型有哪些？

• 事件冒泡：由最具体的元素开始接收事件，并往上传播
• 事件捕获：由最不具体的元素接收，并往下传播
• Dom事件流：事件捕获 → 目标阶段 → 事件冒泡

如何阻止事件冒泡

stopPropagation方法：用于取消所有后续事件冒泡
cancelBubble 属性：默认为 false，设置为 true 可以取消冒泡（与 DOM 的stopPropagation()方法相同），这个属性是为了兼容IE8及更早版本的浏览器。

function stopBubble(event){   
    if(event.stopPropagation){
        event.stopPropagation()
    }else{
    	//兼容低版本的ie浏览器
        event.cancelBubble = true;
    }
}

如何阻止事件的默认行为

reventDefault方法：用于取消事件的默认行为
returnValue属性：默认为 true，设置为 false 可以取消事件默认行为（与 DOM 的 preventDefault()方法相同），这个属性是为了兼容IE8及更早版本的浏览器。

function stopDefault(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
  		//兼容低版本的ie浏览器
    event.returnValue = false;
  }
}