码迷，mamicode.com
首页 > Web开发 > 详细

jquery续集

时间：2019-06-13 09:14:30      阅读：124      评论：0      收藏：0      [点我收藏+]

标签：lse   驱动   方式   btn   child   表示   event对象   set   鼠标   

11.jquery的事件

技术图片

11.1事件的概念

HTML中，与js的交互是通过事件驱动实现的。
例如鼠标点击事件、页面的滚动事件等，可以向文档或文档中的元素添加事件侦听器(即addEventListener()方法)来预定事件。
想要知道这些事件在什么时候调用，需要了解下"事件流"的概念。

11.2什么是事件流

事件流描述的是从页面中执行事件的顺序

DOM事件流包括三个阶段：
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段

11.3DOM事件流执行顺序演示

介绍事件流执行顺序前，首先介绍以下内容

1.addEventListener()方法，是js对象的方法，不是jquery对象的方法
oBtn.addEventListener(‘click‘, function() {
        console.log(‘按钮处于捕获阶段‘);
        alert(1);
    }, true)
a.该方法是指定事件处理程序的操作。
b.该方法接受三个参数，
    第一个：要处理的事件名。
    第二个：事件处理函数
    第三个：布尔值，为true，表示捕获阶段调用事件处理程序。为false，表示冒泡阶段调用事件处理程序。

2.document、document.documentElement和document.body三者之间的关系
a.document代表整个html页面。
b.document.documentElement代表<html>标签
c.document.body代表的是<body>标签

事件流首先经过捕获阶段，接着处于目标阶段，最后事件冒泡阶段。

注意：
实际开发中，我们只需要关注事件冒泡阶段。

"事件流执行顺序如下:"

技术图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
<input type="button" value="按钮" id="btn">

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //由于是属于js的事件，所以要获取js对象
            var btn = document.getElementById(‘btn‘);
            btn.addEventListener(‘click‘,function () {
                console.log("按钮捕获阶段");
                console.log("按钮事件中内容");
            },true);
            document.body.addEventListener(‘click‘,function () {
                console.log("body捕获阶段");
                    },true);
            document.addEventListener(‘click‘,function () {
                console.log("document捕获阶段");
                    },true);
            document.documentElement.addEventListener(‘click‘,function () {
                console.log("html捕获阶段");
                    },true);

            btn.addEventListener(‘click‘,function () {
                console.log("按钮冒泡阶段")
                    },false);
            document.documentElement.addEventListener(‘click‘,function () {
                console.log("html冒泡阶段");
                    },false);
            document.body.addEventListener(‘click‘,function () {
                console.log("body冒泡阶段");
                    },false);
            document.addEventListener(‘click‘,function () {
                console.log("document冒泡阶段");
                    },false);
        });
    </script>
</body>
</html>

技术图片

11.4事件冒泡处理

方法一：
$(‘a‘).click(function (event) {
                //防止事件冒泡
                event.stopPropagation();
                //防止默认事件，a标签默认会跳转，阻止了之后，就可以定义自己的事件方式
                event.preventDefault();
                console.log("a click");
            });

方法二：
$(‘.father‘).click(function (event) {
            console.log(‘father click‘);
            //既能阻止默认事件，又能阻止冒泡
            return false;
        });

99%的事件都需要做冒泡处理

11.4.1没有做冒泡处理时

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
    <a href="">按钮</a>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $(‘.father button‘).click(function () {
                console.log("button click");
            });
            $(‘a‘).click(function () {
                console.log("a click");
            });
            $(‘.father‘).click(function () {
                console.log(‘father click‘);
            });
            $(‘body‘).click(function () {
                console.log(‘body click‘);
            });
        });

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

技术图片

11.4.2做了冒泡处理后

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
    <a href="">按钮</a>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $(‘.father button‘).click(function (event) {
                //阻止事件冒泡
                event.stopPropagation();
                console.log("button click");
            });
            $(‘a‘).click(function (event) {
                //防止事件冒泡
                event.stopPropagation();
                //防止默认事件
                event.preventDefault();
                console.log("a click");
            });
            $(‘.father‘).click(function () {
                console.log(‘father click‘);
                //既能阻止默认事件，又能阻止冒泡
                return false;
            });
            $(‘body‘).click(function () {
                console.log(‘body click‘);
            });
        });

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

技术图片

11.5event事件对象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
    <input type="text" name="user" value="123">
    <p class="content"></p>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.input标签只有js对象的oninput属性，能实时获取内容
            $(‘input‘)[0].oninput=function (event) {
                console.log("input标签--event.target.value：",event.target.value);
            };
            $(‘button‘).click(function (event) {
                event.stopPropagation();
                console.log("event对象",event);
                console.log("当前事件的目标对象(js对象)--event.currentTarget：",event.currentTarget);
                console.log("当前事件的对象(js对象)--event.target：",event.target);
                console.log("当前对象的文本内容--event.target.innerText：",event.target.innerText);
                console.log("当前js对象转为jquery对象，获取文本内容--$(e.target.text())：",$(event.target).text());
                console.log("通过this获取当前jquery对象获取文本内容--$(this).text()：",$(this).text());
                console.log("this==event.target：",this==event.target);
                console.log("this==event.currentTarget：",this==event.currentTarget);
            });
        });
    </script>
</body>
</html>

技术图片

11.6jquery的双击事件

两次单击的间隔时间差是300毫秒，如果小于300毫秒，表示双击
遇到的问题：双击 时，同时调用了两次单击
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //两次单击的间隔时间差是300毫秒，如果小于300毫秒，表示双击
            //遇到的问题：双击 时，同时调用了两次单击
            var timer = null;
            $(‘button‘).click(function () {
                console.log("单击");
                //取消第一次延时未执行的方法
                clearTimeout(timer);
                timer = setTimeout(function () {

                },300);
            });
            $(‘button‘).dblclick(function () {
                //取消第二次延时未执行的方法
                clearTimeout(timer);
                console.log("双击");
            });
        });
    </script>
</body>
</html>

11.7jquery的鼠标移入事件

mouseover
mouseout
这里有个重要的现象，从父元素出来再进入子元素，会先执行一次mouseout，再执行一次mouseover。

mouseenter
mouseleave
从父元素进入子元素，不会执行mouseenter，mouseleave。
所以我们常用mouseenter，mouseleave。

技术图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color:red;

        }
        .child{
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>

</head>
<body >
    <div class="father">
        <p class="child">
            vita
        </p>
    </div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $(‘.father‘).mouseenter(function () {
                console.log("mouseenter");
            });
            $(‘.father‘).mouseleave(function () {
                console.log("mouseleave");
            });
        });
    </script>
</body>
</html>

技术图片

11.7.1购物车小案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .shopCart{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: red;
        }
        .content{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: yellowgreen;
            display: none;
        }
    </style>

</head>
<body >
    <div class="shopCart">
        购物车
    </div>
    <div class="content"></div>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $(‘.shopCart‘).mouseenter(function () {
                $(‘.content‘).css(‘display‘,‘block‘);
            });
            $(‘.shopCart‘).mouseleave(function () {
                $(‘.content‘).css(‘display‘,‘none‘);
            });

            // 合成事件  mouseenter mouseleave
            // $(‘.shopCart‘).hover(function() {
            //    $(this).siblings(‘.content‘).slideDown(500);
            // }, function() {
            //  /* Stuff to do when the mouse leaves the element */
            //    $(this).siblings(‘.content‘).slideUp(500);
            // });
        });
    </script>
</body>
</html>

技术图片

11.8jQuery的鼠标事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
    <input type="text" name="user">

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //加载页面时，让输入框获得焦点
            $(‘input‘).focus();
            //1.获得焦点-focus()
            $(‘input‘).focus(function () {
                console.log("获得焦点了");
            });
            //2.失去焦点——blur()
            $(‘input‘).blur(function () {
                console.log("失去焦点了");
            });

            //3.键盘按键事件
            $(‘input‘).keyup(function (e) {
                switch (e.keyCode) {
                    case 13:
                        console.log(‘回车调用了‘);
                        break;
                    default:
                        console.log("e.keyCode",e.keyCode);
                        break;
                }
            });
        });
    </script>
</body>
</html>

技术图片

11.9表单事件的select事件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
    <form action="http://www.baidu.com/s" method="get">
        <input type="text" name="wd">
        <input type="submit" value="

jquery续集

标签：lse   驱动   方式   btn   child   表示   event对象   set   鼠标   

原文地址：https://blog.51cto.com/10983441/2408112
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！