前端笔记 —— JQuery（二）事件监听

最新推荐文章于 2023-06-28 14:36:05 发布

JohnnyLin00

最新推荐文章于 2023-06-28 14:36:05 发布

阅读量488

点赞数

分类专栏：前端学习文章标签： jquery javascript dom bind

本文链接：https://blog.csdn.net/weixin_44855907/article/details/114985754

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JQuery 事件监听

JQuery 与JavaScript事件写法

JQuery 与JavaScript事件写法

Javascript ：常见onXxxx(),且写在

$(document).ready(function(){
	$(选择器).事件类型(function(){
	});
});

鼠标悬浮（mouseover）和鼠标移开（mouseleave）时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div").mouseover(function(){
                alert("鼠标悬浮……");

            });
            $("div").mouseleave(function(){
                alert("鼠标移开……")
            });

        });
    </script>
</head>
<body>
    <div style="background-color: lightgray; height: 90px; width: 100px;">
    </div>

</body>
</html>

上述事件可以采用链式写法，因为返回事件函数调用结束后dom对象本身。

    <script>
        $(document).ready(function(){
            $("div").mouseover(function(){
                alert("鼠标悬浮……");

            }).mouseleave(function(){
                alert("鼠标移开……")
            });

        });
    </script>

常见事件类型

【鼠标事件】
click() ：鼠标单击事件
mouseover()：鼠标悬浮
mouseleave()：鼠标离开

ready()是windows事件

其他事件可以查看 w3c官网

表单事件

focus()：获得焦点时事件
blur()：失去焦点时事件

	<script>
            //光标聚焦时事件
            //注意使用id选择器时，要加上 #
            $('#username').focus(function(){
                //this是当前选择器选中的dom对象，即id值为username的文本框
                //使用 JQuery转换工厂 $();将dom对象转为JQuery对象
                $(this).css("background","red");
            });
            //失去焦点时事件
            $("#username").blur(function(){
                $(this).css("background","blue");
            });
    </script>

颜色也可以用6位的十六进制表示，如 #000000表示黑色。注意要带上 #

bind()事件绑定与移除

事件绑定

一次绑定
$(“选择器”).bind(“事件名”,[参数],函数);

            $("#username").bind("mouseover",function (){
                alert("bind方式的事件监听……");
            });

批量绑定：一个dom对象同时绑定多个事件

$("选择器").bind(
	{"事件类型":function(){},
		"事件类型":function(){}，……
		,"事件类型":function(){}
	});

            $("#username").bind({
                "mouseover":function(){
                    alert("bind方式鼠标悬浮……");
                },
                "mouseleave":function(){
                 alert("bind方式鼠标离开……")
                }
            });