JavaScript事件冒泡机制原理实例解析_javascript技巧

来源:脚本之家  责任编辑:小易  

$('.aaa').on('click',function(event){event.preventDefault();alert('aaa');});('.bbb').on('click',function(event){event.stopPropagation();alert('bbb');});('.bbb').off('click').on('click',function(){alert('bbb2');})只能做到这样,在第一次绑定之后,解绑,并且重新绑定对应的方法(方法中去掉stopPropagation)www.zgxue.com防采集请勿采集本网。

这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。IE 5.5:div->body->document IE 6.0:div->body->html -> document Mozilla 1.0:div->body->

DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。

先解除绑定,再进行绑定 (\".bbb\").unbind(\"click\");(\".bbb\").on(\"click\",function(event){ alert(\"bbb\");})事件没法覆盖,连续两次事件绑定会先后执行这两个函数,所以要先解除绑定,再进行绑定

听了简介介绍之后,您可能不理解,所以举个例子:

<html><head><title>js事件冒泡测试</title></head><body><div id='content' onclick='alert("content")'><div id='div' onclick='alert("div");'><ul onclick='alert("ul");'><li onclick='alert("li");'>test</li></ul></div></div></body></html>

点击test页签,会依次执行li的onclick、ul的onclick、div的onclick,content的onclick,从内到外执行,所以这个就是冒泡事件的简单例子

最近也遇到了这种情况,所以就去网上搜索资料,简单学习一下,就是点击一个按钮的时候,竟然触发了两次,通过排查,发现了冒泡机制导致的,解决方法是禁用事件冒泡机制

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

$(element).click(function(e){ e.stopPropagation();//ie e.cancelBubble = true});

当然除了冒泡机制会导致onclick被调用两次外,事件被绑定2次的情况也有可能,解决方法是解除事件,然后再绑定

$(element).unbind('click').click(function() { // todo })

1、cancelBubble(HTML DOM Event 对象属性):如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。3、preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。例子:function stopBubble(e){if(e&e.stopPropagation)e.stopPropagation()elsewindow.event.cancelBubble=true}把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript 中事件冒泡和事件捕获机制的详解
  • javascript事件捕获机制【深入分析ie和dom中的事件模型】
  • js事件监听机制(事件捕获)总结
  • javascript 事件冒泡机制详细介绍
  • js点击事件的执行过程实例分析【冒泡与捕获】
  • javascript事件冒泡详解和捕获、阻止方法
  • js冒泡、捕获事件及阻止冒泡方法详细总结
  • js事件冒泡、事件捕获和阻止默认事件详解
  • javascript中捕获/阻止捕获、冒泡/阻止冒泡方法
  • js中绑定事件顺序(事件冒泡与事件捕获区别)
  • javascript事件冒泡和事件捕获详解
  • js事件机制----捕获与冒泡机制实例分析
  • javascript 读后台cookie代码
  • javascript数组组合成字符串的脚本
  • javascript怎样在删除前添加确认弹出框?
  • js常见疑难点分析之match,charat,charcodeat,map,search用法
  • javascript封装domcontentloaded事件实例
  • jquery方法+js一般方法+js面向对象方法实现拖拽效果
  • js排序算法之希尔排序与快速排序实现方法
  • js中生成map对象的方法
  • 原生javascript实现读写css样式的方法详解
  • 用javascript修改css属性的代码
  • javascript 的事件冒泡如何阻止
  • javascript设置了阻止冒泡后,又怎么再次允许事件冒泡
  • javascript阻止冒泡事件
  • 请问javascript中事件捕获和事件冒泡该怎么理解?
  • javascript事件冒泡与捕获什么意思
  • javascript设置了阻止冒泡,之又怎么再次允许事件冒泡
  • 如何理解javascript中事件冒泡和事件捕获
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript 中事件冒泡和事件捕获机制的详解javascript事件捕获机制【深入分析ie和dom中的事件模型】js事件监听机制(事件捕获)总结javascript 事件冒泡机制详细介绍js点击事件的执行过程实例分析【冒泡与捕获】javascript事件冒泡详解和捕获、阻止方法js冒泡、捕获事件及阻止冒泡方法详细总结js事件冒泡、事件捕获和阻止默认事件详解javascript中捕获/阻止捕获、冒泡/阻止冒泡方法js中绑定事件顺序(事件冒泡与事件捕获区别)javascript事件冒泡和事件捕获详解js事件机制----捕获与冒泡机制实例分析javascript 读后台cookie代码javascript数组组合成字符串的脚本javascript怎样在删除前添加确认弹出框?js常见疑难点分析之match,charat,charcodeat,map,search用法javascript封装domcontentloaded事件实例jquery方法+js一般方法+js面向对象方法实现拖拽效果js排序算法之希尔排序与快速排序实现方法js中生成map对象的方法原生javascript实现读写css样式的方法详解用javascript修改css属性的代码js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包phpmyadmin导入时提示文件大小超出php限制js 得到文件后缀(通过正则实现)javascript数据结构与算法之队列原理与用es5新增数组的实现方法javascript中concat复制数组方法浅析js 组件系列之bootstrap table的冻结列功微信小程序云开发如何使用云函数生成二维javascript 在网页上单击鼠标的地方显示层javascript实现焦点滚动图效果 具体方法手机端实现bootstrap简单图片轮播效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved