事件冒泡处理

使用event.stopPropagation();阻止事件冒泡

冒泡事件也可以使用return false来处理

并且

    <script type="text/javascript" src="jQuery3.3.1.js"></script>

    <script>

        $(function () {

            $('.box button').click(function (event) {

                alert('点击了button');

            });

            $('.box').click(function (event) {

                alert('点击了box');

                //事件冒泡阻止

                event.stopPropagation()

            })

        })

        /*事件冒泡，当一个div标签里面有一个button元素时

       给div与button绑定点击事件，当点击button的时候也会触发div绑定的事件

       jquery中只有事件冒泡阶段，没有puhuo

       事件冒泡阶段：button->body->html->document

       使用stopPropagation()可以处理事件冒泡这种情况

       或者使用return false也可以处理事件冒泡，不过return false也会处理默认的js事件，比如说a标签的跳转

         */

    </script>

jquery的事件

单双击事件

  • 单击事件click()
  • 双击事件dblclick()

一个按键同时绑定单击事件以及双击事件，两次单击中间的事件差是300毫秒，如果小于300毫秒，表示双击。假如小于300毫秒，也是表示调用了两次单击，一次双击。如果是单击

    <script type="text/javascript" src="jQuery3.3.1.js"></script>

    <script>

        $(function () {

            //解决单双击事件冲突问题

            var timeer = null;

            $('button').click(function () {

                //上来先把timer定时器清空了

                clearTimeout(timeer);

                //定时器，延时300毫秒

                timeer=setTimeout(function () {

                    console.log('单击了');

                },300)

            });

            $('button').dblclick(function () {

                //触发了双击事件也把定时器清空了

                clearTimeout(timeer);

                console.log('双击了')

            });

        })

    </script>

鼠标移入移出事件

  • mouseover()移入

  • mouseout()移出

  • mouseenter()移入

  • mouseleave()移出

  • 合成事件

    • hover()这个是jquery中的合成事件，合成了mouseenter与mouseleave事件
<head>

    <meta charset="UTF-8">

    <title>合成事件</title>

    <style>

        .shop-car{

            position: relative;

            width: 100px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            background-color: #666;

        }

        .shop{

            width: 400px;

            height: 200px;

            display: none;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="shop-car">

        <span>购物车</span>

        <div class="shop"></div>

    </div>

    <script type="text/javascript" src="jQuery3.3.1.js"></script>

    <script>

        $(function () {

            $('.shop-car').hover(function () {

                $('.shop').stop().slideDown(500);

            },function () {

                $('.shop').stop().slideUp(500);

            })

        })

    </script>

</body>

表单事件

  • select()事件，文本选中的时候会调用
<body>

<form action="#">

    <input type="text">

</form>

    <script type="text/javascript" src="jQuery3.3.1.js"></script>

    <script>

        $('input[type=text]').select(function () {

            console.log('内容被选中了')

        })

    </script>

</body>
  • submit()事件
<script type="text/javascript" src="jQuery3.3.1.js"></script>

<script>

    $(function () {

        //原声js的是onsubmit事件

        $('from').submit(function (e) {

            //阻止form表单的默认事件（submit触发form表单的action，往action发请求）

            e.preventDefault();

            //自定义去发请求

            console.log('form被submit了')

        })

    })

</script>

鼠标的聚焦，失焦，键盘事件

  • focus()获得焦点:输入框标示闪烁
  • blur()失去焦点:输入框标示不闪烁
  • 键盘按键keyup()
<script type="text/javascript" src="jQuery3.3.1.js"></script>

<script>

    $('input[type=text]').keyup(function (e) {

        //e.keyCode是键盘的键码

        //可以通过键盘键码使用流程控制判断进行控制

        console.log(e.keyCode)

    })

</script>

事件委托

事件委托：利用事件冒泡原理，需要动态往父级元素里面添加标签，并且让新添加的标签拥有与兄弟标签一样的事件，可以使用事件委托

<body>

    <ul>

        <li>111</li>

        <li>222</li>

    </ul>

    <button>按钮</button>

    <script type="text/javascript" src="jQuery3.3.1.js"></script>

    <script>

        $(function () {

            //事件委托（如果是未来追加的元素，需要绑定事件，可以使用事件委托）

            //on() 第一个属性事件名，第二个属性是选择器，第三个是fun

            $('ul').on('click','li',function () {

                alert($(this).text())

            });

            //未来动态的往ul中追加了li标签，如果只是ul>li标签绑定了click事件，那么可以考虑使用事件委托

            $('button').click(function () {

                $('ul').append('<li>喵</li>')

            })

        })

    </script>

</body>

jQuery的事件的更多相关文章

  1. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  2. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  3. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  4. jquery的事件命名空间详解

    jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...

  5. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 不写完不让回家的JQuery的事件与动画

    在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...

  8. jQuery scroll事件实现监控滚动条分页示例（转）

    这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...

  9. jquery双击事件

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

  10. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

随机推荐

  1. shell 键盘输入

    命令:read 从键盘读入数据,赋值变量 [root@ssgao shell]# cat b.sh #!bin/bash read a b c echo "a is : ${a}" ...

  2. windows bat发布成服务

    删除服务 删除名为"WINDOWS MANAGEMONT INSTALLER"的系统服务 sc delete "windows managemont Installer& ...

  3. OO第三次课程总结分析

    OO第三次课程总结分析 规格化设计发展历史 在网上找了好久也没找到合适的信息,稍稍参考了同学的博客.大致如下:最初的的软件并没有形式化方法,随着软件工程的兴起,为了便于工程间的协调管理,人们提出采用工 ...

  4. mac系统下安装Composer和laravel

    先手动下载Composer 地址:https://getcomposer.org/composer.phar 下载后mv composer.phar /usr/local/bin/composer 这 ...

  5. Android : 添加apk私有权限

    一.Android的系统权限: apk在安装时,Android 为每个软件包提供唯一的 Linux 用户 ID.此 ID 在软件包在该设备上的使用寿命期间保持不变.在不同设备上,相同软件包可能有不同的 ...

  6. 5.8 C++重载自增与自减操作符

    参考:http://www.weixueyuan.net/view/6386.html 注意: 自增“++”与自减“--”都是一元操作符,其前置和后置两种形式都可以被重载. 前置 stopwatch ...

  7. Matlab产生波形数据文件

    reference: https://blog.csdn.net/HOOKNET/article/details/79254351 前言 在FPGA开发过程中几乎都要用到仿真的功能,对于一些简单的外部 ...

  8. Centos7下mysql5.7.22主从配置

    一:服务器配置 1.1修改root密码: ALTER USER 'root'@'localhost' IDENTIFIED BY 'xxxx'; 1.2添加远程登陆用户: GRANT ALL PRIV ...

  9. SQLite3 C/C++ 开发接口简介

    SQLite3 C/C++ 开发接口简介 1.0 总览 SQLite3是SQLite一个全新的版本,它虽然是在SQLite 2.8.13的代码基础之上开发的,但是使用了和之前的版本不兼容的数据库格式和 ...

  10. Oracle特殊字符转义：&amp;和&#39;

    Oracle特殊字符转义:&和'    我们在SQL*PLUS下执行 SQL show all命令时,可以发现一个参数:define & (hex 26),如下所示 concat . ...