事件冒泡处理

使用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. random模块，time模块，os模块，sys模块

    一.random模块 >>> import random #随机小数 >>> random.random() # 大于0且小于1之间的小数 0.7664338663 ...

  2. [Codeforces Round #340 (Div. 2)]

    [Codeforces Round #340 (Div. 2)] vp了一场cf..(打不了深夜的场啊!!) A.Elephant 水题,直接贪心,能用5步走5步. B.Chocolate 乘法原理计 ...

  3. Oracle12c CDB架构图

  4. TortioseSVN切换账号教程

    TorioseSVN如果不记住用户名密码那么基本每样连接服务器的操作都要重新请求认证这很麻烦,所以我们一般选择记住用户认证信息. 但记住用户认证信息后以后每次登录都后台自动以该用户身份登录,不像QQ自 ...

  5. Linux用户创建/磁盘挂载相关命令

    命令 作用 常用参数说明 groupadd 增加用户组 -g指定组id groupmod 修饰用户组 参数和groupadd类似 groupdel 删除用户组 直接组名没参数 useradd 增加用户 ...

  6. CentOS配置教程

    1.配置网卡开机自动启动 查看/etc/sysconfig/network-scripts/ifcfg-eth0的初始内容: cat /etc/sysconfig/network-scripts/if ...

  7. jstack Dump 日志文件中的线程状态

    [转]jstack Dump 日志文件中的线程状态 dump 文件里,值得关注的线程状态有: 死锁,Deadlock(重点关注)  执行中,Runnable 等待资源,Waiting on condi ...

  8. Linux 第一周作业

    [](http://images2017.cnblogs.com/blog/1249774/201710/1249774-20171001234038872-10d31233192.pngd

  9. Linux系统分区方案（CentOs 6）

    装Linux如何分区: 方案1:(监控服务器,负载均衡器) 1./boot 引导分区,存放引导文件和Linux内核.       启动文件:用于判断你需要启动哪个操作系统或启动哪个内核.        ...

  10. angular 离开页面相关操作

    $scope.$on("$destroy", function() { $interval.cancel(autoRefresh);})