08 jQuery事件

事件对象event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象event</title>
</head>
<body>
    <button>按钮</button>
    <input type="text" name="user" value="123">
    <p class="content"></p>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //  实时监听input输入框 有输入触发fun  用于一些实时校验用户的输入数据，实时反馈输入校验结果
            //  e 事件本身 e.target就是事件对应的js对象 类似于 this
            $('input').get(0).oninput = function (e) {
                console.log(e);
                console.log(e.target);
                console.log(e.target.value);
                $('.content').text(e.target.value);
            };
            //  e.target === this  e.currentTarget当前事件的目标对象  e.target事件的触发对象
            $('button').click(function (e) {
                console.log(e.currentTarget);
                console.log(e.target);
                console.log(e.target.innerText);
                console.log($(e.target).text());
                console.log($(this).text());
                console.log(e == this);  // false e是jquery对象 this是js对象
                console.log(e.target == this);  // true
                console.log(e.target === this);  // true
                e.stopPropagation();  // 阻止冒泡
            });

            $('body').click(function(e){
                console.log(e.currentTarget);  // 事件的目标js对象 点的哪个元素就是哪个 如button input
                console.log(e.target);  // 事件触发js对象 即 body
                console.log(this);  // 事件触发js对象 即 body
                console.log(this===e.currentTarget);
                console.log(this===e.target);
                e.stopPropagation();  // 阻止冒泡
            });

            $('html').click(function(e){
                // console.log(e.currentTarget);
                console.log(e.target);
                console.log(this===e.currentTarget);
                console.log(this===e.target);
            });
        })
    </script>
</body>
</html>

 

jquery单双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单双击事件jquery</title>
</head>
<body>
    <button>按钮</button>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            timer = null;
            $('button').click(function (e) {
                // 这个清除上一次单击的事件，因为每次单击创建的timer不一样；
                // 下面双击事件清除的timer是最后一次单击创建的timer，第一次创建的timer那里并不能清除。
                clearTimeout(timer);
                timer = setTimeout(function (e) {
                    console.log('单击咯');
                },300);
                console.log('click',timer);
                e.stopPropagation();
            });

            $('button').dblclick(function (e) {
                console.log('dblclick',timer);
                clearTimeout(timer);
                console.log('双击咯');
                e.stopPropagation();
            });
        })
    </script>
</body>
</html>

 

jquery鼠标移入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery鼠标移入</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" id="f1">
        <p class="child" id="c1">steven</p>
    </div>
    <div class="father" id="f2">
        <p class="child" id="c2">steven</p>
    </div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            // mouseover mouseout  鼠标移入移出  这里会有穿透现象，同样作用在其子元素上面
            // 如下 当鼠标从子元素移动到父元素内的时候也会触发事件
            $('#f1').mouseover(function (e) {
               console.log('警告，不明物体侵入！！！');
            });
            $('#f1').mouseout(function (e) {
               console.log('警告解除，不明物体滚了！！！');
            });

            // mouseenter mouseleave  鼠标移入移出  这里不会有穿透现象，不作用在其子元素上面
            // 如下 当鼠标从子元素移动到父元素内的时候不会触发事件
            $('#f2').mouseenter(function (e) {
               console.log('警告，不明物体侵入！！！');
            });
            $('#f2').mouseleave(function (e) {
               console.log('警告解除，不明物体滚了！！！');
            });

        })
    </script>
</body>
</html>

 

posted @ 2019-07-02 11:46  毛斯钢  阅读(126)  评论(0)  编辑  收藏  举报