jQuery鼠标键盘表单事件大全

最新推荐文章于 2022-11-09 09:06:45 发布

原创最新推荐文章于 2022-11-09 09:06:45 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的事件监听示例，包括鼠标点击、双击、覆盖、移入和移出等事件，以及键盘按键、焦点获得和失去、表单提交等交互事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>jquery事件监听</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var msg = $('#msg');
            //鼠标点击事件
            $('#div1').click(function(){
                msg.html('1被点击了');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            //鼠标双击事件
            $('#div2').dblclick(function(){
                msg.html('2被双击了');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            //鼠标覆盖事件
            $('#div3').mouseover(function(){
                msg.html('鼠标在3上面');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            //鼠标移入事件
            $('#div4').mouseenter(function(){
                msg.html('鼠标移入了4');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            //鼠标移出事件
            $('#div4').mouseleave(function(){
                msg.html('鼠标移出了4');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            //鼠标按下事件
            $('#div5').mousedown(function(){
                msg.html('鼠标在5按下了');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            //鼠标松开事件
            $('#div5').mouseup(function(){
                msg.html('鼠标在5松开了');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });

            $('#input1').keydown(function(){
                msg.html('在input1按下键盘！');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            $('#input1').keyup(function(){
                msg.html('在input1松开键盘！');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });

            $('#input1').focus(function(){
                msg.html('input1得到了焦点！');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
            $('#input1').blur(function(){
                msg.html('input1失去了焦点！');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });

            $('#input2').change(function(){
                msg.html('input2的内容改变了！并失去了焦点');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });

            $('#mainForm').submit(function(event) {
                msg.html('表单内容提交！');
                msg.fadeIn(1000);
                msg.fadeOut(1000);
            });
        });
    </script>
    <style type="text/css">
        .div1{
            height: 30px;
            width: 30px;
            background: pink;
            display: inline-block;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="div1" id="div1">1</div>
    <div class="div1" id="div2">2</div>
    <div class="div1" id="div3">3</div>
    <div class="div1" id="div4">4</div>
    <div class="div1" id="div5">5</div>
    <form id="mainForm" action="#">
        1：<input type="text" id="input1"/><br>
        2：<input type="text" id="input2"/><br>
        <input type="submit" name="submit">
    </form>
    <div id="msg" style="display:none"></div>
</body>
</html>