使用IDEA学习JSP代码第026课-CFANZ编程社区

new391.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>

    <style type="text/css">
        div{
            width: 400px;
            height: 250px;
            background-color: #0e8385;
            font-size: 16px;
        }
        div span{
            display: inline-block;
            width: 99%;
            height: 50px;
            background-color: #2aabd2;
            margin-top: 100px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //
            $("div").click(function () {
               alert("事件冒泡，我是div。");
            });

            $("span").click(function () {
               alert("事件冒泡，我是span。阻止冒泡，使用return false");
               return false;
            });
        })
    </script>



</head>
<body>
    <div>
        div文字
        <span>span文字</span>
        div文字
    </div>

</body>
</html>

new392.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>

    <style type="text/css">
        div{
            border: 1px solid red;
            width: 300px;
            height: 200px;
            margin-bottom: 50px;
        }
    </style>
    <script type="text/javascript">
        //带参数ev
        window.onload = function () {
            var div1 = document.getElementById("div1");
            div1.onclick = function (ev) {
                div1.innerHTML = ev.toString();
                console.log(ev);
            }
        }
    </script>
    <script type="text/javascript">
        $(function () {
           var $div2 = $("#div2");
           $div2.click(function (event) {
               $div2.html(event.toString());
               console.log(event);
            });
        });
    </script>


</head>
<body>
    <div id="div1"> </div>
    <div id="div2"> </div>
</body>
</html>

new393.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>

    <style type="text/css">
        div{
            border: 1px solid red;
            width: 300px;
            height: 200px;
            margin-bottom: 50px;
        }
    </style>
    <script type="text/javascript">
        //带参数ev
        window.onload = function () {
              var div1 = document.getElementById("div1");
              var tips = "";
              div1.onmousemove = function (ev) {
                  tips += "我进来了<br>";
                  div1.innerHTML = tips;
              };
              div1.onmouseout = function (ev) {
                  tips += "我出来了<br>";
                  div1.innerHTML = tips;
              }

        }
    </script>
    <script type="text/javascript">
        $(function () {
           var $div2 = $("#div2");
           var tips = "";
           $div2.bind("mouseover mouseout",function (event) {
              if (event.type == "mouseover")
              {
                  tips += "哎，我又进来了<br>";
                  $div2.html(tips);
              }
              else if(event.type == "mouseout")
              {
                  tips += "哎，我又出来了<br>";
                  $div2.html(tips);
              }
           });
        });
    </script>


</head>
<body>
    <div id="div1"> </div>
    <div id="div2"> </div>
</body>
</html>