事件冒泡与默认行为

Event

在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素、事件的类型、与特定事件相关的信息)

所有浏览器都支持Event对象,但支持方式不同

IE中的事件对象:window.event

/*

封装Event对象

IE:window.event

*/

function getEvent(event){

return event?event:window.event;

}

事件冒泡

什么是事件冒泡

即事件开始时由最具体的元素(文档中嵌套最深的那个元素)接收,然后逐级向上传播到较不为具体的节点

所有浏览器都支持事件冒泡

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>事件冒泡</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

.one{

400px;

height:100px;

border:1px solid #333;

}

.two{

height:35px;

line-height:35px;

padding-left:15px;

border:1px solid red;

}

.three{

padding:10px;

background-color: green;

border:1px solid #999;

cursor:pointer;

}

</style>

<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script>

$(function(){

$(".one").click(function(event) {

alert($(this).text());

});

$(".two").click(function(event) {

alert($(this).text());

});

$(".three").click(function(event) {

alert($(this).text());

});

});

</script>

</head>

<body>

<div class="one">

我是one(div)

<p class="two">

我是two(p)

<span class="three">我是three(span)</span>

</p>

</div>

</body>

</html>

当在span、p、div元素上各绑定一个click事件,当单击span元素时,会依次触发三个事件,即span、p、div元素上的click事件,这就是事件冒泡,按照DOM层次结构像水泡一样不断向上直至顶端

阻止事件冒泡

DOM中提供stopPropagation()方法,但IE不支持,使用event对象在事件函数中调用就行

IE中提供的是,cancelBubble属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用

/*

封装事件冒泡函数:

document.all:判断浏览器是否是IE

IE:cancelBubble

Firefox:stopPropagation

*/

function stopPropagation(e){

var e = window.event || e;

if(document.all){

e.cancelBubble = true;

}else{

e.stopPropagation();

}

}

jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用用event对象来调用就行,即event.stopPropagation();

默认行为

什么是默认行为

网页元素,都有自己的默认行为,例如,单击超链接会跳转...

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行

IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用

复制代码

/*

封装阻止元素的默认行为函数

IE:returnValue

DOM:preventDefault

*/

function preventDefaultAction(event){

var event = window.event || event;

if(document.all){

//支持IE

event.returnValue = false;

}else{

//IE不支持

event.preventDefault();

}

}

复制代码 jQuery中提供了preventDefault()方法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault()

如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

原文地址:https://www.cnblogs.com/jinhuixin/p/4266922.html