jQuery事件

最新推荐文章于 2024-08-27 13:38:21 发布

九阈

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量79

点赞数

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

本文链接：https://blog.csdn.net/weixin_46048542/article/details/125648373

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

jQuery注册

单个事件注册
语法:

element.事件(function() {})

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

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

on注册事件

on注册简单事件

    // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
    $(selector).on( "click", function() {});

on注册委托事件

    // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
    $(selector).on( "click",'span', function() {});

on注册事件的语法：

    // 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
    // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
    // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
    // 第四个参数：handler，事件处理函数
    $(selector).on(events,[selector],[data],handler);

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function(){
            //1.单个事件注册
            // $("div").click(function(){
            //     $(this).css("background","purple");
            // });
            // $("div").mouseenter(function(){
            //     $(this).css("background","red");
            // });

            //2.事件处理on
            $("div").on({
                mouseenter: function(){
                    $(this).css("background","red");
                },
                click: function(){
                    $(this).css("background","purple");
                }
            });
            //on实现事件委托
            $("ul").on("click","li",function(){
                alert(11);
            });
            //click是绑定在ul身上的，但是触发的对象是ul里面的小li
            
            //3.on可以给动态创建的元素绑定事件
            $("ol").on("click","li",function(){
                alert(11);
            })
            var li = $("<li>后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>
</html>

off事件解绑

off()方法可以移除通过on()方法添加的事件处理程序。

    // 解绑匹配元素的所有事件
    $(selector).off();
    // 解绑匹配元素的所有click事件
    $(selector).off("click");

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <ul>
        <li>11111111111111</li>
        <li>2222222222222222</li>
        <li>3333333333333333333333</li>
    </ul>
    <p>我是p标签</p>
    <script>
        $(function(){
            $("div").on({
                click: function(){
                    console.log("我点击了");
                },
                mouseover: function(){
                    console.log("我鼠标经过了");
                }
            });
            //1.事件解绑off
            // $("div").off();//这个是解除了div身上的所有事件
            $("div").off("click");//这个是解除了div身上的点击事件


            //2.one()但是它只能触发事件一次
            $("p").one("click",function(){
                alert(11);
            })
        })
    </script>
</body>
</html>

触发事件

    $("selector").click(); //触发 click事件
    $("selector").trigger("click");
    $("selector").traggerHandler("click");就是不会触发元素的默认行为，没有光标

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <input type="text"> 
    <script>
        $(function(){
            $("div").on("click",function(){
                alert(11);
            });
            //自动触发事件
            //1.元素.事件()
            $("div").click();
            //2.元素.trigger("事件")
            $("div").trigger("click");
            //3.元素.triggerHandler("事件")
            //就是不会触发元素的默认行为，没有光标
            $("div").traggerHandler("click");
            $("input").on("focus",function(){
                $(this).val("你好");
            });
            $("input").traggerHandler("focus");
        })
    </script>
</body>
</html>

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

    //screenX和screenY	对应屏幕最左上角的值
    //clientX和clientY	距离页面左上角的位置（忽视滚动条）
    //pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）
    
    //event.keyCode	按下的键盘代码
    //event.data	存储绑定事件时传递的附加数据
    
    //event.stopPropagation()	阻止事件冒泡行为
    //event.preventDefault()	阻止浏览器默认行为
    //return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

请添加图片描述

九阈

关注

0
点赞
踩
0

收藏

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

单个事件注册语法:其他事件和原生基本一致。比如mouseover、mouseout、 blur. focus、 change、 keydown、 keyup、 resize、 scroll等on注册简单事件on注册委托事件on注册事件的语法：off事件解绑off()方法可以移除通过on()方法添加的事件处理程序。触发事件jQuery事件对象jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。...
复制链接

扫一扫

专栏目录