您的位置：首页 > Web前端 > JavaScript

Js学习笔记－事件冒泡、事件捕获、阻止默认行为

2016-12-10 11:54 274 查看

事件冒泡

事件冒泡是指，触发内层的事件之后，事件会按照DOM的层次结构像水泡一样不断的向上直至顶端．例如：

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

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

<div id="msg"></div>

当点击内部

<span>

元素的同时，也点击了包含

<span>

元素的

<div>

和包含

<div>

元素的元素

<body>

，并且每一个元素都会按照特定的顺序响应

click

事件．

冒泡过程：

(1)

<span>

(2)

<div>

(3)

<body>

为了避免意料之外的效果，有必要对事件的作用范围进行限制．阻止事件冒泡可以使用JQuery提供的

stopPropagation()

方法．

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

在W3c中，使用

event.stopPropagation（）

方法

在IE下设置

event.cancelBubble = true；

事件捕获

事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶部往下开始触发．

捕获过程：

(1)

<body>

(2)

<div>

(3)

<span>

事件捕获是从最外层元素开始，然后再到最里层元素．遗憾的是，并非所有主流浏览器都支持事件捕获，JQuery不支持事件捕获．

W3C自带的两个事件，添加事件和删除事件处理程序的操作：

addEventListener()

和

removeEventListener()

。所有DOM节点中都包含这两个方法，并且它们都接受3个参数；事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)。

window.addEventListener('load',function(){  //添加事件    3个参数（事件名，函数，冒泡） IE不兼容捕获
alert('123')
},false)

window.removeEventListener('load',function(){  //删除事件
alert('123')
},false)

IE 实现了与DOM 中类似的两个方法：

attachEvent()

和

detachEvent()

。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8 及更早版本只支持事件冒泡，所以通过

attachEvent()

添加的事件处理程序都会被添加到冒泡阶段。

window.attachEvent('load',function(){  //（事件名，函数）
alert('123')
})

window.detachEvent('load',function(){  //（事件名，函数）
alert('123')
})

阻止默认行为

网页中的元素有自己默认的行为 , 比如 , 单击超链接后会跳转、单击”提交”按钮后表单会提交 , 有时需要阻止元素的默认行为.

event.preventDefault()

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

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

<div id="msg"></div>

当表单内容为空时,单击提交按钮,会提示不能提交. 如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中

return false

. 这是对

event.preventDefault()

和

event.stopPropagation()

的简写.

a5c3

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 函数

相关文章推荐

新的分享

章节导航