jQuery事件（常见事件的总结）

最新推荐文章于 2024-02-11 09:00:00 发布

darling.0

最新推荐文章于 2024-02-11 09:00:00 发布

阅读量481

点赞数 1

分类专栏： web前端文章标签： jQuery 事件

本文链接：https://blog.csdn.net/daliyuan350649623/article/details/53768787

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

jQuery事件

jQuery 提供额外的事件，用于完善javascript缺失的
focusin 和 focusout
focusin 获得焦点。js focus。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout 失去焦点。js blur。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

mouseenter 和 mouseleave
mouseenter 鼠标移入。js mouseover
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave 鼠标移出。js mouseout
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02{
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }

    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#e01").blur(function(){
                $("#textMsg").html("文本框失去焦点：blur");
            }).focus(function(){
                $("#textMsg").html("文本框获得焦点：focus");
            }).keydown(function(){
                $("#textMsg").append("键盘按下：keydown");
            }).keypress(function(event){
                $("#textMsg").append("键盘按下：keypress");
            }).keyup(function(){
                $("#textMsg").append("键盘按下：keyup");
            }).select(function(event){
                //支持谷歌
                var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
                $("#textMsg").html("文本内容被选中：select ， " + sub);
            });

            var i = 0;
            $("#e02").mouseover(function(){
                $("#divMsg").html("鼠标移上：mouseover");
            }).mousemove(function(){
                $("#divMsg").html("鼠标移动：mousemove , " + i++ );
            }).mouseout(function(){
                $("#divMsg").html("鼠标移出：mouseout");
            }).mousedown(function(){
                $("#divMsg").html("鼠标按下：mousedown");
            }).mouseup(function(){
                $("#divMsg").html("鼠标弹起：mouseup");
            });

            $("#e03").click(function(){
                $("#buttonMsg").html("单击：click");
            }).dblclick(function(){
                $("#buttonMsg").html("双击：dblclick");
            });

        });

    </script>

</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span> <br/>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span> <br/>
    <hr/>
    <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>

focusin和focusout

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //父元素不能检测子元素获取焦点情况
            //$("#outerDiv").focus(function(){
                //alert("outer");
            //});
            //focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。focusout与blur同理
            $("#outerDiv").focusin(function(){
                alert("outer");
            });
        });
    </script>

</head>
<body>
    <div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
        <div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
    </div>

    <br/>
    <span id="showSpan"></span>

</body>
</html>

mouseover与mouseenter

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    //与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

        $(document).ready(function(){
            var i= 0; 
            //如果指针穿过任何子元素，同样会触发mouseover事件
            //$("#outerDiv").mouseover(function(){
                //$("#showSpan").html(i++);
            //});
            //如果指针穿过任何子元素，不会触发mouseenter事件
            $("#outerDiv").mouseenter(function(){
                $("#showSpan").html(i++);
            });
        });
    </script>

</head>
<body>
    <div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
        <div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
    </div>

    <br/>
    <span id="showSpan"></span>

</body>
</html>

darling.0

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件（常见事件的总结）

jQuery事件 jQuery 提供额外的事件，用于完善javascript缺失的 focusin 和 focusout focusin 获得焦点。js focus。 focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。 focusout 失去焦点。js blur。 focusout事件跟blur事件区别在
复制链接

扫一扫