【2017-6-5】JQuery 事件

事件
1、常规事件
1.1把JS中的事件，on去掉即可


1.2复合事件 hover(function(){},function(){}) 相当于把mouseover()mouseout()合二为一

                toggle(function(){},function(){},....) 点击事件循环执行


1.3未来元素 对象.live("事件名",function(){});


2、事件冒泡
阻止事件冒泡：return false

如果不return false，点击div4回依次弹出44444、33333、22222、11111

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style>
        #div1 {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        #div2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        #div3 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        #div4 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div1">
            <div id="div2">
                <div id="div3">
                    <div id="div4">
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $("#div1").click(function () {
        alert("11111");
        return false;
    });

    $("#div2").click(function () {
        alert("22222");
        return false;
    });

    $("#div3").click(function () {
        alert("33333");
        return false;
    });

    $("#div4").click(function () {
        alert("44444");
        return false;
    });



</script>

 

posted @ 2017-06-05 15:15  Fengbao.2333  阅读(150)  评论(0)  编辑  收藏  举报