鼠標事件

時間  2019-11-10
標籤 鼠標 事件 简体版
原文   原文鏈接

 

一、鼠標離開進來各作什麼事情

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #child{
            width: 50px;
            height: 50px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child"></div>
    </div>
</body>
</html>

一個父元素，一個子元素javascript

 添加jqhtml

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('#box').mouseover(function () {
            console.log('移入進來了');
        })
    </script>

將鼠標從空白移動紅會打印，移除紅再移到紅再打印，將鼠標從紅移動黑會打印，從黑移到紅會打印。黑紅間來回移，移一次打印一次。前端

也就是說移到父元素上，和移到子元素上都會調用此事件。java

修改樣式：jquery

        #box{
           width: 100px; height:40px;
            background-color: red;
            position: relative;
        }
        #child{
           width: 100px; height: 100px;
            background-color: #000;
          position: absolute;
        }

作成子絕父相，子黑父紅，設置寬高。而後被蓋住了。ajax

給子盒子往下調一下，寬度加一下，變成以下：後端

       #child{
            width: 400px;
            height: 100px;
            background-color: #000;
            position: absolute;
            top: 40px;
        }

黑盒子設置display:none ，紅盒子鼠標over事件時，選中黑盒子.slideDown()一秒顯示。服務器

    <script type="text/javascript">
        $('#box').mouseover(function () {
            console.log('移入進來了');
           $('#child').slideDown(1000);
        })
    </script>

效果：鼠標移到紅盒子，黑盒子1秒內下滑而出而後就這樣了。咱們須要的效果應該是移到紅就出黑，移出紅就隱藏黑。ide

添加移出鼠標的效果：函數

    <script type="text/javascript">
        $('#box').mouseover(function () {
            console.log('移入進來了');
            $('#child').slideDown(1000);
        })
        $('#box').mouseout(function () {
            console.log('移出去了');
            $('#child').slideUp(1000);
        })
    </script>

效果：移出紅，黑上滑變沒。短期內屢次移入移出，而後中止鼠標不動，它會計數移入移出次數，直到次數結束移入移出效果才停

 

設置黑盒子top的時候不當心多加了1px，紅黑有了縫隙。

鼠標穿過父級元素和子元素都會調用這個方法：從父移到子的歷程，黑經歷離開父隱藏，移到子顯示；從子移到父歷程，黑經歷離開子隱藏，移到父顯示；兩種移到一次可是黑都是隱藏顯示動了兩次。

事件具備傳播性，從父到子的傳播。小米購物車通常用的不是鼠標over的事件，消耗性能

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        #box{
            width: 100px;
            height:40px;
            background-color: red;
            position: relative;
        }
        #child{
            width: 400px;
            height: 100px;
            background-color: #000;
            position: absolute;
            top: 40px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child"></div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('#box').mouseenter(function () {
            console.log('移入進來了');
            $('#child').slideDown(1000);
        })
        $('#box').mouseleave(function () {
            console.log('移出去了');
            $('#child').slideUp(1000);
        })
    </script>
</body>
</html>
View Code 
        $('#box').mouseenter(function () {
            console.log('移入進來了');
            $('#child').slideDown(1000);
        })
        $('#box').mouseleave(function () {
            console.log('移出去了');
            $('#child').slideUp(1000);
        })

 只有鼠標到紅顯示黑，鼠標從紅到黑不會動，而以前是黑上下動了兩次。若是這裏二者間有空隙也容易出上面的問題。

若是快速反覆進入離開紅的操做，那麼黑在鼠標不動以後仍然顯示隱藏反覆數的次數。全部每次都應該中止stop（）而後再上滑下滑

捲簾門效果代碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        #box{
            width: 100px;
            height:40px;
            background-color: red;
            position: relative;
        }
        #child{
            width: 400px;
            height: 100px;
            background-color: #000;
            position: absolute;
            top: 40px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child"></div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('#box').mouseenter(function () {
            console.log('進來了');
            $('#child').stop().slideDown(1000);
        })
        $('#box').mouseleave(function () {
            console.log('離開了');
            $('#child').stop().slideUp(1000);
        })
    </script>
</body>
</html>
View Code

小米購物車就是這個方法：

鼠標離開進來各作什麼事情

 

hover方法比上面那個代碼量少，結合兩者的效果，使用兩個回調函數

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        #box{
            width: 100px;
            height:40px;
            background-color: red;
            position: relative;
        }
        #child{
            width: 400px;
            height: 100px;
            background-color: #000;
            position: absolute;
            top: 40px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child"></div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('#box').hover(function () {
            $('#child').stop().slideDown(1000)
            },
            function () {
                $('#child').stop().slideUp(1000);}
        )
    </script>
</body>
</html>
View Code 
    <script type="text/javascript">
        $('#box').hover(function () {
            $('#child').stop().slideDown(1000)
            },
            function () {
                $('#child').stop().slideUp(1000);}
        )
    </script>

二、聚焦失焦事件 

鼠標點到框裏是聚焦  鼠標點到框外是失焦

 

網頁顯示出來就聚焦：調用一下focus()

    <script type="text/javascript">
         $('input[type=text]').focus();
        $('input[type=text]').focus(function () {
            console.log('聚焦了');
        })
         $('input[type=text]').blur(function () {
            console.log('失焦了');
        })
    </script>

 三、按下鍵盤的事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <input type="text">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('input[type=text]').keydown(function () {
            console.log('鍵盤按下了');
        })
    </script>
</body>
</html>

 

按下鍵盤哪一個鍵能夠獲取按的是哪一個鍵盤碼 keycode：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <input type="text">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('input[type=text]').keydown(function (e) {
            console.log(e);
        })
    </script>
</body>
</html>

其實每一個事件都有個默認的e參數，打印參數e。它是event  事件對象。

其中包括keyCode屬性：三個.點一下就顯示內容了。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <input type="text">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('input[type=text]').keydown(function (e) {
            console.log(e.keyCode);
        })
    </script>
</body>
</html>

keyCode碼有點像ASCII碼

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <input type="text">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('input[type=text]').keydown(function (e) {
            console.log(e.keyCode);
            switch (e.keyCode) {
                case 65:
                    //按a鍵作什麼
                    break;
                case 66:
                    //按鍵b作什麼
                    break;
                default:
                    //
                    break;
            }
        })
        //switch方法裏面能夠寫不少，這裏能夠寫成函數，keydown事件裏就調用這個函數
    </script>
</body>
</html>

四、按指定鍵實現清空的現象

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <input type="text">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('input[type=text]').keydown(function (e) {
            console.log(e.keyCode);
            switch (e.keyCode) {
                case 8:
                    $(this).val('')
                    break;
                case 66:
                    //按鍵b作什麼
                    break;
                default:
                    //
                    break;
            }
        })
        //switch方法裏面能夠寫不少，這裏能夠寫成函數，keydown事件裏就調用這個函數
    </script>
</body>
</html>
View Code 
 $('input[type=text]').keydown(function (e) {
            console.log(e.keyCode);
            switch (e.keyCode) {
                case 8:
                    $(this).val('')
                    break;
                case 66:
                    //按鍵b作什麼
                    break;
                default:
                    //
                    break;
            }
        })

 

寫入abc再按刪除鍵，清空。原理是當按鍵是刪除鍵8的時候，將這個對象的值等於空

 

五、提交。表單提交

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <form action="">
        <input type="text" placeholder="用戶名">
        <input type="password" placeholder="密碼">
        <input type="submit" >
    </form>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">

    </script>
</body>
</html>

有個提示的用戶名 placeholder="用戶名"。form表單有個默認的提交，提交地址是action內容

應該是輸入用戶名和密碼點擊提交，後端給咱們重定向地址，而不是使用form默認的。

通常提交用戶名密碼給後端，後端確認無誤後把信息傳給前端，前端再給個提示或者提示框，不少都顯示3秒後進入***頁面。而後登錄到首頁。這是先後端合做完成，若是隻是用from表單的action的話，只能前端傳遞數據給後端，後端不能給前端返回數據。

    <form action="">
        <input type="text" placeholder="用戶名">
        <input type="password" placeholder="密碼">
        <input type="submit" >
    </form>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('form').submit(function () {
           console.log(‘mcw’);
        })
    </script>

有個問號，點擊提交事件以後，先走的默認的提交事件，而不是本身js寫的點擊事件

那麼應該把默認的提交事件取消掉。方法是添加：

    <form action="javascript:void(0);">
        <input type="text" placeholder="用戶名">
        <input type="password" placeholder="密碼">
        <input type="submit" >
    </form>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('form').submit(function () {
            console.log('mcw');
        })
    </script>

除了form表單須要去默認，a標籤也須要；

<a href="javascript:void(0);">mcw</a>

也可使用  ：    <a href="javascript:;">mcw</a>

 

點擊後顯示

也能夠用jq裏的方法：

    <form action="">
        <input type="text" placeholder="用戶名">
        <input type="password" placeholder="密碼">
        <input type="submit" >
    </form>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $('form').submit(function (e) {
            e.preventDefault();
            console.log('mcw');
        })

    </script>

 

 

 

 阻止當前默認事件3方法： javascript:void(0);      <a href="javascript:;">mcw</a>   $('form').submit(function(e){e.preventDefault(); ****});

 

若是form和後端交互的時候，前端不須要獲取數據，那麼就用form默認的提交就能夠了。

下面來講前端須要獲取後端數據的狀況：

本身寫腳本的話，那麼須要jq，js獲取到用戶名和密碼這些值。提交給服務器。那麼這裏就須要大量操做，就須要使用都ajax。

ajax的代碼

下面是拿到的數據：能夠取res數據對頁面進行操做。好比對某塊父div內的內容作操做，而不用整個網頁刷新。DOM裏reload方法能讓整個網頁刷新，ajax針對於一塊  局部進行刷新。在不重載頁面的狀況下讓這個頁面刷新

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程