jQuery事件

最新推荐文章于 2024-06-07 23:26:45 发布

Z_cx

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量124

点赞数

分类专栏： web前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/Python1One/article/details/120896249

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1. jQuery事件注册

单个事件注册
element.事件(function(){})
$("div").click(function(){})
其他事件和原生基本一致
如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

$(function () {
            //1. 单个事件注册
            $("div").click(function () {
                $(this).css("background", "blue")
            })
            $("div").mouseover(function () {
                $(this).css("background", "purple")
            })
            $("div").mouseout(function () {
                $(this).css("background", "pink")
            })
            //2. 事件处理on
        })

2. jQuery事件处理

1. 事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法
element.on(events,[selector],fn)

events：一个或多个用空格分割的时间类型，如"click"或者"keydown"
selector:元素的子元素选择器
fn：回调函数即绑定在元素身上的监听函数

 //2. 事件处理on
            $("div").on({
                mouseenter: function () {
                    $(this).css("background", "purple")
                },
                click: function () {
                    $(this).css("background", "blue")
                },
                mouseleave: function () {
                    $(this).css("background", "pink")
                }
            })

on()方法优势1
可以绑定多个事件，多个处理事件处理程序

$("div").on({
                mouseenter: function () {},
                mouseleave: function () {}
                click: function () {},
            })；

如果事件处理程序相同

$("div").on("mouseover mouseout",function(){
    $(this).toggleClass("current");
})

on()方法优势2
可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的时间绑定在父元素身上，就是把时间委派给父亲

$("ul").on("click","li",function(){
    alert("hello");
})

on()方法优势3
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .current {
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function () {
            //1. 单个事件注册
            // $("div").click(function () {
            //     $(this).css("background", "blue")
            // })
            // $("div").mouseover(function () {
            //     $(this).css("background", "purple")
            // })
            // $("div").mouseout(function () {
            //     $(this).css("background", "pink")
            // })
            //2. 事件处理on
            // $("div").on({
            //     mouseenter: function () {
            //         $(this).css("background", "purple")
            //     },
            //     click: function () {
            //         $(this).css("background", "blue")
            //     },
            //     mouseleave: function () {
            //         $(this).css("background", "pink")
            //     }
            // })

            $("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current")
            })

            //（2）on实现事件委派
            // $("ul li").click();
            $("ul").on("click", "li", function () {
                alert(11)
            })
            //click绑定在ul上  触发在ul的li身上

            // (3) on可以给未来动态创建的元素绑定事件
            // $("ol li").click(function () {
            //     alert(11);
            // })

            $("ol").on("click", "li", function () {
                alert(11);
            })
            var li = $("<li>后来的</li>")
            $("ol").append(li)

        })
    </script>

</body>

</html>

案例发布评论

2. 事件处理off()解绑事件

off()方法可以移除通过on方法添加的时间处理程序

$("p").off()    //解除p元素所有事件处理程序
$("p").off("click")    //解除p元素上面的点击事件 后面的foo是侦听函数名
$("ul").off("click","li")    //解除事件委托

如果有的事件只想触发一次可移动one()来绑定事件

3. 自动触发事件trigger()

有些事情希望自动触发，比如轮播图的自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧点击按钮事件，不必鼠标点击触发

element.click() //第一种简写形式
element.trigger("type") //第二种自动触发模式
element.triggerHandler(type) //第三种自动触发模式

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {

            $("div").on("click", function () {
                alert(111)
            });
            //自动触发事件
            // 1. 元素.事件()
            // $("div").click();

            //2. 元素.trigger("事件")
            // $("div").trigger("click")

            //3. 元素.triggerHandler("事件")    不会触发元素的默认行为
            // $("div").triggerHandler("click")
            $("input").on("focus", function () {
                $(this).val(123123)
            })
            //不会获得光标但是会触发focus
            $("input").triggerHandler("focus")

        })
    </script>
</head>

<body>
    <div></div>
    <input type="text">
</body>

</html>

jQuery事件对象

事件被触发，就会有事件对象产生
element.on(events,[selector],function(event){})
阻值默认行为：event.preventDefaule() 或者 return false
阻值冒泡：event.stopPropadgation()

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $(document).on("click", function () {
                console.log("点击了document");
            })
            $("div").on("click", function (event) {
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

Z_cx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件

1. jQuery事件注册单个事件注册element.事件(function(){})$("div").click(function(){})其他事件和原生基本一致如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等$(function () { //1. 单个事件注册 $("div").click(function () { $(th
复制链接

扫一扫