javascript事件传播

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuruhong/p/3389455.html

文章标签：

#java #javascript #ViewUI

本文介绍了事件冒泡和事件捕获两种事件传播机制，并通过一个具体的jQuery示例展示了事件冒泡的过程。当点击嵌套的div元素时，事件会从最内部的元素开始触发并逐级向外传播。

1、事件捕获：多个元素响应同一事件

例如有 A、B两个元素，A包含B，则事件先由外层元素A处理，再由B处理

2、事件冒泡

与事件捕获相反，先由内层元素响应事件，再由外层元素响应

DOM标准规定同时使用这两种模型，先是由一般到具体，再是冒泡返回顶层元素，事件处理程序可注册到任何一阶段

jquery事件是注册在冒泡阶段，是先由具体元素响应

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="cp" value="${pageContext.request.contextPath}" ></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
            #div1{width:200px;height:200px;background-color:red;border-style:solid;}
            #div2{width:150px;height:150px;background-color:green;border-style:solid;margin:0}
            #div3{width:100px;height:100px;background-color:yellow;border-style:solid;}
            .cursor{cursor:pointer;}
        </style>
        <script type="text/javascript" src="${cp}/js/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#div1").click(function(event){
                    alert("div1 click!" + (event.target == this));
                });        
                $("#div2").click(function(){
                    alert("div2 click!");
                });
                $("#div3").click(function(){
                    alert("div3 click!");
                });
            });
        </script>
    </head>
<body>
    <div id="div1">div1
        <div id="div2">div2
            <div id="div3">div3</div>
        </div>
    </div>
</body>
</html>