JQuery DOM 事件冒泡

时间 2019-11-05

标签 jquery dom 事件冒泡栏目 JQuery 繁體版

原文原文链接

什么是冒泡

在页面上能够有多个事件，也能够多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另外一个元素里，而且都被绑定了click事件，同时body元素上也绑定了click事件。
javascript

<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>

<script type="text/javascript">
$(function(){
	// 为span元素绑定click事件
	$('span').bind("click",function(){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>

当单击内部span元素，即触发span元素的click事件时，会输出3条记录。只单击内部span元素，就会触发外部div元素和body元素上绑定的click事件。这是由事件冒泡引发的。在单击span元素的同时，也单击了包含span元素的元素div和包含div元素的元素body，而且每个元素都会按照特定的顺序响应click事件。html

元素的click事件会按照如下顺序“冒泡”。java

<span>浏览器
<div>函数
<body>spa

之因此称为冒泡，是由于事件会按照DOM的层次结构像水泡同样不断向上直至顶端。code

事件冒泡引起的问题

事件冒泡可能会引发预料以外的效果。上例中，原本只想触发<span>元素的click事件，然而<div>元素和<body>元素的click事件也同时被触发了。所以，有必要对事件的做用范围进行限制。当单击<span>元素时，只触发<span>元素的click事件，而不触发<div>元素和<body>元素的click事件：当单击<div>元素时，只触发<div>元素的click事件，而不触发<body>元素的click事件。orm

事件对象htm

因为IE-DOM和标准DOM实现事件对象的方法各不相同，致使在不一样浏览器中获取事件对象变得比较困难。针对这个问题，JQuery进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。对象

在程序中使用事件对象很是简单，只须要为函数添加一个参数，jQuery代码以下：

$("element").bind("click",function(event){   
	//event  :  事件对象   
	//...   
});

这样，当单击“element”元素时，事件对象就被建立了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

中止事件冒泡

中止事件冒泡能够阻止事件中其余对象的事件处理函数被执行。在JQuery中提供了stopPropagation()方法来中止事件冒泡。

$(function(){
   	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "内层span元素被点击";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});
})

当单击<span>元素时，只会触发<span>元素上的click事件，而不会触发<div>元素和<body>元素的click事件。能够用一样的方法解决<div>元素上的冒泡问题。

$('#content').bind("click",function(event){   
    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";   
    $('#msg').html(txt);   
    event.stopPropagation();    //  阻止事件冒泡   
});

这样，当单击<span>元素或者<div>元素时，就只会输出相应的内容，而不会输出其余的内容。

阻止默认行为

网页中的元素有本身默认的行为，例如，单击超连接后会跳转、单击“提交”按钮后表单会提交，有时须要阻止元素的默认行为。

在JQuery中，提供了preventDefault()方法来阻止元素的默认行为。

举一个例子，在项目中，常常须要验证表单，在单击“提交”按钮时，验证表单内容，例如某元素是不是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。

<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
		     $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
		     event.preventDefault();  //阻止默认行为 ( 表单提交 )
		 }
   })
})

当用户名为空时，单击“提交”按钮，会出现提示，而且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault()方法能阻止表单的提交行为。

若是想同时对事件对象中止冒泡和默认行为，能够在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。

在表单的例子中，能够把 event.preventDefault(); 改写为： return false;

也能够把事件冒泡例子中的 event.stopPropaqation(); 改写为： return false;

事件捕获

事件捕获和事件冒泡是恰好相反的两个过程，事件捕获是从最顶端往下开始触发。仍是冒泡事件的例子，其中元素的click事件会按照如下顺序捕获。

<body>
<div>
<span>

很显然，事件捕获是从最外层元素开始，而后再到最里层元素。所以绑定的click事件，首先会传递给<body>元素，而后传递给<div>元素，最后才传递给<span>元素。

遗憾的是，并不是全部主流浏览器都支持事件捕获，而且这个缺陷没法经过JavaScript来修复。JQuery不交持事件捕获，若是读者须要使用事件捕获，请直接使用原生的JavaScript。