jq事件冒泡

什么是事件冒泡

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

事件冒泡的作用

事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
表现事件冒泡的代码

 
     



从这个代码就可以看出事件冒泡的过程,只点击了“点击我”,就会依次弹出“我是最里层—->我是中间层—->我是最外层—->然后再链接到百度. ”,本来只点击ID为hr_three的标签,但执行了三个alert的操作;过程:hr_three—->divTwo—->divOne。从最里层冒泡到最外层。

四种阻止冒泡的方法

  1. even.stopPropagation();


even.stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。 此时点击“点击我”,就阻止了事件冒泡,但不会阻止默认行为,会弹出“我是最里层”,然后链接到百度

  1. return false;


点击“点击我”,会弹出“我是最里层”,但不会链接到百度 作用是:事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

  1. event.preventDefault();


点击“点击我”,会发现它依次弹出:我是最里层—->我是中间层—->我是最外层,但最后却没有跳转到百度 作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转) 注:一个事件起泡对应触发的是上层的同一事件 如果在click事件中,在你要处理的事件之前加上e.preventDefault();那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。

你可能感兴趣的:(jq事件冒泡)