zoukankan      html  css  js  c++  java

  • Jquery事件

    事件流

    事件流描述的是从页面中接收事件的顺序

    1、DOM事件流

    “DOM2级事件”规定的事件流包括三个阶段：

    ① 事件捕获阶段；

    ② 处于目标阶段；

    ③ 事件冒泡阶段

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var oBtn = document.getElementById('btn');
        // oBtn.onclick = function(){
        //     alert(1);
        // };
        // addEventListener(操作，fn，false) 默认为false（表示没有捕获阶段） true表示有捕获
        oBtn.addEventListener('click',function(){
            console.log('按钮 处于捕获阶段');
            alert(1);
        },true);
        document.body.addEventListener('click',function(){
            console.log('body 处于捕获阶段');
        },true);
        document.documentElement.addEventListener('click',function(){
            console.log('html 处于捕获阶段');
        },true);
        document.addEventListener('click',function(){
            console.log('文档 处于捕获阶段');
        },true);
        
        // 
        oBtn.addEventListener('click',function(){
            console.log('按钮 处于冒泡阶段');
        },false);
        document.body.addEventListener('click',function(){
            console.log('body 处于冒泡阶段');
        },false);
        document.documentElement.addEventListener('click',function(){
            console.log('html 处于冒泡阶段');
        },false);
        document.addEventListener('click',function(){
            console.log('文档 处于冒泡阶段');
        },false);
    </script>
</body>
</html>

    1、addEventListener

    addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

    2、document、documentElement和document.body三者之间的关系：

    document代表的是整个html页面；

    document.documentElement代表的是<html>标签；

    document.body代表的是<body>标签；

    在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。

    img

    首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。

    接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。

    1、IE中的事件流只支持“事件冒泡”，但是版本到了IE9+以后，实现了“DOM2级事件”，也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。

    2、在DOM事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被看成“冒泡阶段”的一部分。然后，“冒泡阶段”发生，事件又传播回文档。

    冒泡事件的处理

    <script>
        $(function(){
            $('.btn').click(function(event){
                // 在所有的事件回调函数中 都会有默认的事件对象
                // event原声js的事件对象
                console.log(event);
                console.log($(this).text());
                alert($(this).text());

                // 阻止事件冒泡
                event.stopPropagation();
            });

            $('.father').click(function(event){
                alert('father');
                // event.stopPropagation();
                
                console.log('2333333');
                
                // return fasle 即阻止了默认事件 有阻止了冒泡
                return false;
            });

            $('a').click(function(e){
                // 阻止默认事件（跳转）
                e.preventDefault();

                alert('a a a');
            });

            $('body').click(function(){
                alert('body');
            });
        });
    </script>

    评论简易抽屉

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .commentBtn{
            font-size: 30px;
            color: aliceblue;
            cursor: pointer;
        }
        .box{
             300px;
            background-color: #666666;
            line-height: 100px;
            text-align: center;
        }
        .comment{
            position: relative;
             300px;
            height: 500px;
            background-color: darkgrey;

        }
        .comment span.close{
            position: absolute;
            top: 0;
            right: 3px;
            color: #000000;
            cursor: pointer;
            font-size: 20px;
            line-height: 26px;
        }
        .comment button.hide{
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="commentBtn">评论</span>
        <div class="comment" style="display:none;">
            <span class="close active">X</span>
            <button class="hide active">收起</button>
        </div>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // 点击评论 展开评论列表
            $('.commentBtn').click(function(e){
                e.stopPropagation();
                $('.comment').delay(70).slideDown(200);
            });
            // 收起
            $('.comment span.active,.comment button.active').click(function(e){
                e.stopPropagation();                
                $('.comment').stop().slideUp(100);
            });
            $('.box').click(function(e){
                e.stopPropagation();
                // $('.comment').stop().slideUp(100);
            });
            $('body').click(function(e){
                // e.stopPropagation();
                $('.comment').stop().slideUp(100);
            });
        });
    
    </script>
</body>
</html>

    事件对象

    	<script>
        $(function(){
            $('button').click(function(e){
                // currentTarget 当前事件的目标对象 == $('button')
                console.log(e.currentTarget);

                // target 是事件的触发对象 是js对象 == 'button'
                console.log(e.target);
                console.log(e.target.innerText);
                console.log($(this).text());

                // e.currentTarget == this    e.target == this
                console.log(this == e.currentTarget);
                console.log(this == e.target);
                
                // 在用事件时 99%都需要阻止冒泡
                e.stopPropagation();
            });

            $('body').click(function(e){
                // console.log(e.currentTarget);
                console.log(e.target);
            });

            $('html').click(function(e){
                // console.log(e.currentTarget);
                console.log(e.target);
            });
            
            // jquery中没有监听输入内容的方法
            // $('input').input(function(e){
            //     console.log(e.target.value);
                
            // });
            
            // 原生js 监听input内容 双向数据绑定
            $('.content').text($('input').val());
            $('input')[0].oninput = function(e){
                console.log(e.target.value);
                $('.content').text(e.target.value);
            };
        });
    </script>

    jquery的常用事件

    img

    双击/单击事件
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // 双击调用了两次单击
            // 两次单击之间的的事件差是300ms，如果小于300ms 表示双击
            var timmer = null;
            $('button').click(function(e){
                // 如果是双击事件 要阻止 两次单击事件的调用
                clearTimeout(timmer);
                timmer = setTimeout(function(){
                    console.log('单击了');
                },300);
            });
            
            $('button').dblclick(function(e){
                clearTimeout(timmer);
                console.log('双击了');
                
            });
        });
    </script>
</body>
</html>
    鼠标移入移出事件
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father{
             200px;
            height: 200px;
            background-color: #666666;
        }
        .child{
             100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="child">
            q1ang
        </p>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // 鼠标穿过被选元素和被选子元素 会触发此事件
            // $('.father').mouseover(function(e){
            //     console.log('移入')
            // });
            // $('.father').mouseout(function(e){
            //     console.log('移出')
            // });

            // 鼠标只穿过被选元素 会触发此事件
            $('.father').mouseenter(function(e){
                console.log('进入')
            });
            $('.father').mouseleave(function(e){
                console.log('离开')
            });
        });
    </script>
</body>
</html>

    demo

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .shopCart{
             100%;
            background-color: #666666;
        }
        .shopCart>div{
            position: relative;
             100px;
            background-color: hsl(0, 3%, 23%);
        }
        .shopCart span{
            font-size: 18px;
            line-height: 40px;
            cursor: pointer;
            color: aliceblue;
        }
        .content{
            position: absolute;
            top: 40px;
            left: 0;
             300px;
            height: 200px;
            background-color: grey;
        }

    </style>
</head>
<body>
    <div class="shopCart">
        <div>
            <span>购物车</span>
            <div class="content" style="display:none"></div>
        </div>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){            
            // 合成事件 mouseleave mouseenter
            $('.shopCart>div').hover(function(){
                $('.content').stop().slideDown(300);
            },function(){
                $('.content').stop().slideUp(300);
            });
        });
    </script>
</body>
</html>
    表单事件
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com/s" method="getS">
        <input type="text" name="wd">
        <input type="submit" value="搜索">
    </form>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // 文本选中的时候 
            $('input[type=text]').select(function(){
                console.log('选中');
            });

            $('form').submit(function(e){
                e.preventDefault();
                // 未来 自己发请求
                console.log('submit');
            });
        });
    </script>
</body>
</html>
    聚焦失焦，键盘事件
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" name="user" id="">
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // 获取焦点
            $('input[type=text]').focus();

            // 失焦
            setTimeout(function(){
                $('input[type=text]').blur();
            },2000);

            $('input[type=text]').focus(function(){
                console.log('获取焦点');
            });
            $('input[type=text]').blur(function(){
                console.log('失焦');
            });
            
            // 键盘事件
            $('input').keydown(function(e){
                // console.log('键盘按下',e.keyCode);
                // 获取键码  e.keyCode
                switch (e.keyCode) {
                    case 13:
                        console.log('回车',$(this).val());
                        break;
                
                    default:
                        break;
                }
            });

            $('input').keyup(function(){
                console.log('键盘弹起');
            });
        });
    </script>
</body>
</html>

    事件委托

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>q1ang</li>
        <li>q2ang</li>
    </ul>
    <button>添加</button>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // $('li').click(function(){
            //     alert($(this).text());
            // });

            $('ul').on('click','li',function(e) {
                alert($(this).text());
            });
            // 未来 动态的往ul追加li标签 自己完成不了click()事件 -> 事件委托
            $('button').click(function(){
                $('ul').append('<li>...</li>');
            });
        });
    </script>
</body>
</html>
  • 相关阅读:
    java项目中ehcache缓存最简单用法
    最简单的freemarker用法实例
    java从包package中获取所有的Class
    java获取properties配置文件中某个属性最简单方法
    java去除字符串中的空格、回车、换行符、制表符
    java获取中文汉字的所有拼音
    运行时给java对象动态的属性赋值
    java中把文件拷贝到指定目录下最简单几种方法
    在Springmvc普通类@Autowired注入request为null解决方法
    java导入excel很完美的取值的方法
  • 原文地址：https://www.cnblogs.com/q1ang/p/9886315.html
Copyright © 2011-2022 走看看