jQuery事件

最新推荐文章于 2023-09-10 13:40:58 发布

前端笨鸟

最新推荐文章于 2023-09-10 13:40:58 发布

阅读量261

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_41670147/article/details/103484529

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、jQuery事件注册

单个事件注册

element.事件(function(){})
$("div").click(function(){事件处理程序})

其他事件和原生基本一致
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

2、jQuery事件处理

2.1事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：

element.on(events,[selector],fn)

1、events：一个或多个用空格分隔的事件类型，如"click"或"keydown"
2、selector：元素的子元素选择器。
3、fn：回调函数，即绑定在元素身上的侦听函数。

<!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>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $("div").on({
            mouseenter: function() {
                $(this).css("background", "skyblue");
            },
            click: function() {
                $(this).css("background", "red")
            }
        })
    </script>
</body>

</html>

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

$("div").on({
	mouseover:function(){},
	mouseout:function(){},
	click:function(){};
})

如果事件处理程序相同

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

<!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>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        
        .current {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // $("div").on({
        //     mouseenter: function() {
        //         $(this).css("background", "skyblue");
        //     },
        //     click: function() {
        //         $(this).css("background", "red")
        //     }
        // })
        $("div").on("mouseover mouseout", function() {
            $(this).toggleClass("current");
        })
    </script>
</body>

</html>

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

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

在此之前有bind(),live(),delegate()等方法来处理事件绑定或事件委派，最新版本的请用on进行替代。
on()方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。

$('ul').on('click','li',function(){
	alert('hello world');
});
var li = $("<li>我是后来创建的</li>");
$("ul").append(li);

2.2事件处理off()解绑事件

off()方法可以移除通过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>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        
        .current {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div></div>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script>
        // $("div").on({
        //     mouseenter: function() {
        //         $(this).css("background", "skyblue");
        //     },
        //     click: function() {
        //         $(this).css("background", "red")
        //     }
        // })
        $("div").on("mouseover mouseout", function() {
            $(this).toggleClass("current");
        });
        //事件委托
        $("ul").on("click", "li", function() {
            alert(11)
        });
        //事件解绑  off()
        $("div").off();   //解除了div身上的所有事件
        $("div").off("click")  //解除了div身上的点击事件
        $("ul").off("click", "li") //解除了事件委托
    </script>
</body>

</html>

如果有的事件只想触发一次，可以用one()来绑定事件。

 $("p").one("click",function(){
            alert(11);      //只触发一次，无需解绑
 })

2.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>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(function() {
            $("div").click(function() {
                alert(11);
            });
            //自动触发事件
            //1、元素.事件()
            //$("div").click();
            //2、元素.trigger("事件")
            //$("div").trigger("click");
            //3、元素.triggerHandler("事件")
             $("div").triggerHandler("click")  //不会触发元素的默认行为

        });
    </script>
</body>

</html>

3、jQuery事件对象

事件会被触发，就会有事件对象的产生

element.on(events,[selector],function(event){})

阻止默认行为：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()

前端笨鸟

关注

0
点赞
踩
0

收藏

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

1、jQuery事件注册单个事件注册element.事件(function(){})$("div").click(function(){事件处理程序})其他事件和原生基本一致比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等2、jQuery事件处理2.1事件处理on()绑定事件on()方法在匹配元...
复制链接

扫一扫