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

来源：互联网发布：windows toolkit 编辑：程序博客网时间：2024/06/07 07:19

事件冒泡

事件冒泡是指，触发内层的事件之后，事件会按照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()的简写.

0 0