jQuery系列之事件(二)

最新推荐文章于 2024-07-13 14:58:19 发布

原创最新推荐文章于 2024-07-13 14:58:19 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文通过实例介绍了使用jQuery处理各种事件的方法，包括双击、鼠标悬停及文本框聚焦等常见事件，展示了如何利用jQuery简化JavaScript事件处理过程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示许多事件</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        //事件
        //当某件事发生时,就叫做发生了什么什么事件
        //比如:卢沟桥事变(事件)
        //浏览器可以监听到事件的发生 可选择性的对事件进行处理
        //对事件做的处理.被封装成了事件处理器 事件处理器监听到事件发生,
        //去执行传入事件处理器的函数,也就是我们自己写的那些代码

            //clik,点击事件,已经学过
        $(function () {

            //dbclick,双击事件
            $(".dblBtn").dblclick(function () {
                    alert("你双击了我 还想一笑而过")
            });

            //鼠标进入元素事件
            //如果写的是onclick,那么是在调用原生js属性
            $("div").mouseenter(function () {
                alert("进入了我");
            });

            $("div").mouseout(function () {
               alert("走了");
            });

            $("div").mouseover(function () {
               alert("结束了");
            });

            $("div").mousemove(function () {
                alert("移走了");
            });


            $("#text").focusin(function () {
                alert("得到焦点")
            });

        });



    </script>
</head>
<body>
    <button class="dblBtn">啦啦啦</button>
    <div>哈哈哈</div>
    <input type="text" id="text">


</body>
</html>