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

最新推荐文章于 2024-09-26 21:28:22 发布

竹苓丿

最新推荐文章于 2024-09-26 21:28:22 发布

阅读量1.4k

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_58498354/article/details/123959638

版权

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;
  }
}