【jQuery】jQuery事件
admin
2024-05-12 05:00:16
0

一、jQuery 事件注册

    • 单个事件注册

element.事件(function(){}); //例如:$('div').click(function(){事件处理程序})

其他事件和原生基本一致。

比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等。

    

二、 jQuery 事件处理

    • on() 绑定事件

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

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

events:一个或多个用空格分隔的事件类型,如 "click" 或 "keydown" 。

selector:元素的子元素选择器 。

fn:回调函数,即绑定在元素身上的侦听函数。

1.1 on() 方法优势一

可以绑定多个事件,多个处理事件处理程序。

$('div').on({
事件1: function(){},
事件2: function(){},
事件3: function(){}
});

如果事件处理程序相同,那么可以采取这种形式:

$('div').on('事件1 事件2', function() {
$(this).toggleClass('current');
});
    

1.2 on() 方法优势二

可以事件委派操作。

事件委派:把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

$(父元素').on('事件', '子元素', function() {
……
});

事件绑定在父元素上,但触发对象是子元素。(点击子元素后会产生事件冒泡到父元素,而父元素上有绑定的事件)

注意:在此之前有 bind(),live(), delegate() 等方法来处理事件绑定或者事件委派,最新版本的请用 on 替代他们。

    
  • 我们都是好孩子
  • 我们都是好孩子
  • 我们都是好孩子
  • 我们都是好孩子
  • 我们都是好孩子

1.3 on() 方法优势三

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

$('父元素').on('事件','子元素',function(){
alert("俺可以给动态生成的元素绑定事件")
});

$('父元素').append($('

我是动态创建的p

'));
    

    2. off() 解绑事件

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

    $("p").off(); // 解绑p元素所有事件处理程序
    $("p").off( "事件"); // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
    $("ul").off("事件", "li"); // 解绑事件委托
        
    • 我们都是好孩子
    • 我们都是好孩子
    • 我们都是好孩子

    3. one() 绑定事件

    如果有的事件只想触发一次, 可以使用 one() 来绑定事件,使用方法和on()基本一致。

    element.one(events,[selector],fn);
        
    

    我是屁

    4.自动触发事件 trigger()

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

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

    triggerHandler 模式不会触发元素的默认行为,这是和前面两种的区别。

        
    

    三、jQuery事件对象

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

    element.on(events,[selector],function(event) {}); //event就是事件对象

    事件对象操作:

    阻止默认行为:event.preventDefault() 或者 return false

    阻止冒泡: event.stopPropagation()

        
    

    相关内容

    热门资讯

    linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
    C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
    JAVA多线程知识整理 Java多线程基础 线程的创建和启动 继承Thread类来创建并启动 自定义Thread类的子类&#...
    【洛谷 P1090】[NOIP... [NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G ...
    国民技术LPUART介绍 低功耗通用异步接收器(LPUART) 简介 低功耗通用异步收发器...
    城乡供水一体化平台-助力乡村振... 城乡供水一体化管理系统建设方案 城乡供水一体化管理系统是运用云计算、大数据等信息化手段࿰...
    程序的循环结构和random库...   第三个参数就是步长     引入文件时记得指明字符格式,否则读入不了 ...
    中国版ChatGPT在哪些方面... 目录 一、中国巨大的市场需求 二、中国企业加速创新 三、中国的人工智能发展 四、企业愿景的推进 五、...
    报名开启 | 共赴一场 Flu... 2023 年 1 月 25 日,Flutter Forward 大会在肯尼亚首都内罗毕...
    汇编00-MASM 和 Vis... Qt源码解析 索引 汇编逆向--- MASM 和 Visual Studio入门 前提知识ÿ...
    【简陋Web应用3】实现人脸比... 文章目录🍉 前情提要🌷 效果演示🥝 实现过程1. u...
    前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
    windows安装JDK步骤 一、 下载JDK安装包 下载地址:https://www.oracle.com/jav...
    分治法实现合并排序(归并排序)... 🎊【数据结构与算法】专题正在持续更新中,各种数据结构的创建原理与运用✨...
    在linux上安装配置node... 目录前言1,关于nodejs2,配置环境变量3,总结 前言...
    Linux学习之端口、网络协议... 端口:设备与外界通讯交流的出口 网络协议:   网络协议是指计算机通信网...
    Linux内核进程管理并发同步... 并发同步并发 是指在某一时间段内能够处理多个任务的能力,而 并行 是指同一时间能够处理...
    opencv学习-HOG LO... 目录1. HOG(Histogram of Oriented Gradients,方向梯度直方图)1...
    EEG微状态的功能意义 导读大脑的瞬时全局功能状态反映在其电场结构上。聚类分析方法一致地提取了四种头表面脑电场结构ÿ...
    【Unity 手写PBR】Bu... 写在前面 前期积累: GAMES101作业7提高-实现微表面模型你需要了解的知识 【技...