• JQuery系列之事件



    一、事件注册

    JQuery 为我们提供了方便的事件注册机制,优缺点如下:

    • 优点:操作简单,且不用担心事件覆盖等问题。
    • 缺点:普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。

    1、语法

    element.事件(fn);
    element.事件(data, fn);;
    $("div").click(function () {
    	// 事件处理程序
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

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

    2、示例

    <body>
    	<div>div>
    	<script>
    		$(function () {
    			// 1. 单个事件注册
    			$("div").click(function () {
    				$(this).css("background", "purple");
    			});
    			$("div").mouseenter(function () {
    				$(this).css("background", "skyblue");
    			});
    		});
    	script>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    二、事件处理

    因为普通注册事件方法的不足,jQuery又开发了多个处理方法。

    • on():用于事件绑定,目前最好用的事件绑定方法
    • off():事件解绑
    • trigger() / triggerHandler():事件触发

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

    1.1、概述

    在选择元素上绑定一个或多个事件的事件处理函数。

    on()方法绑定事件处理程序到当前选定的JQuery对象中的元素。在JQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。

    1.2、语法

    selector.on(events, [selector], [data], fn);
    
    • 1

    1.3、参数

    • events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click""keydown.myPlugin"
    • selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
    • data:当一个事件被触发时要传递event.data给事件处理函数。
    • fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
    • events-map:个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示事件绑定的处理函数。
    • selector:一个选择器字符串过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。

    1.4、示例

    当一个段落被点击时,在alert中显示它的文本

    $("p").on("click", function () {
    	alert($(this).text());
    });
    
    • 1
    • 2
    • 3

    将数据传递给事件处理程序,事件处理程序在这里通过名称指定

    function myHandler(event) {
    	alert(event.data.foo);
    }
    $("p").on("click", { foo: "bar" }, myHandler);
    
    • 1
    • 2
    • 3
    • 4

    取消表单提交操作,并通过返回false来防止事件冒泡

    $("form").on("submit", false);
    
    • 1

    使用.preventdefault()只取消默认操作。

    $("form").on("submit", function (event) {
    	event.preventDefault();
    });
    
    • 1
    • 2
    • 3

    使用.stoppropagation()方法在不阻止表单提交的情况下停止冒泡提交事件。

    $("form").on("submit", function (event) {
    	event.stopPropagation();
    });
    
    • 1
    • 2
    • 3

    1.5、优势

    1.5.1.1、优势1

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

    $("div").on({
    	mouseover: function () {},
    	mouseout: function () {},
    	click: function () {}
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5

    如果事件处理程序相同

    $("div").on("mouseover mouseout", function () {
    	$(this).toggleClass("current");
    });
    
    • 1
    • 2
    • 3
    1.5.1.2、优势2

    可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

    $("ul").on("click", "li", function () {
    	alert("hello world!");
    });
    
    • 1
    • 2
    • 3

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

    1.5.1.3、优势3

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

    $("div").on("click", "p", function () {
    	alert("俺可以给动态生成的元素绑定事件");
    });
    
    • 1
    • 2
    • 3
    $("div").append($("

    我是动态创建的p

    "
    ));
    • 1

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

    2.1、概述

    在选择元素上移除一个或多个事件的事件处理函数。

    off() 方法移除用.on()绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件的名称,命名空间,选择器,或处理函数名称的组合。当有多个过滤参数,所提供的参数都必须匹配的事件处理程序被删除。

    如果一个简单的事件名称,比如提供"click",所有 这种类型的事件(包括直接和委派)从jQuery设置的元素上删除。当编写代码,将作为一个插件使用,或者干脆当一个大的代码基础工作,最好的做法是安装和取下使用命名空间的事件,从而使代码不会无意中删除其他代码附加事件处理程序。在一个特定的命名空间中的所有类型的所有事件,可以从一个元素中删除,只是提供了一个命名空间,比如 “.myPlugin”。至少,无论是命名空间或事件名称必须提供。

    要删除特定的委派事件处理程序,提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件,使用特殊值 “**” 。

    处理程序也可以删除handler参数指定名称的函数。当jQuery的绑定一个事件处理程序,它分配一个唯一的ID给处理函数。函数用jQuery.proxy()代理或类似有相同的唯一ID机制(代理函数),因此,通过代理处理程序.off 可能会删除比预期更多的处理程序。在这些情况下,最好是附加和移除事件处理程序,使用命名空间。

    和.on()一样,你可以传递一个 events-map>参数明确的指定而不是用events 和 handler作为单独参数。键事件和/或命名空间;值是处理函数或为false的特殊价值。

    2.2、语法

    selector.off(events, [selector], [fn]);
    
    • 1

    2.3、参数

    • events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", “keydown.myPlugin”, 或者 “.myPlugin”;
    • selector:一个最初传递到.on()事件处理程序附加的选择器。
    • fn:事件处理程序函数以前附加事件上,或特殊值false。
    • events-map:一个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示先前事件绑定的处理函数。
    • selector:一个最初传递到.on()事件处理程序附加的选择器。

    2.4、示例

    从所有段落删除所有事件处理程序

    $("p").off();
    
    • 1

    从所有段落中删除所有委托的单击处理程序

    $("p").off("click", "**");
    
    • 1

    通过将它作为第三个参数传递,只删除一个先前绑定的处理程序

    var foo = function () {
    	// code to handle some kind of event
    };
    
    // ... now foo will be called when paragraphs are clicked ...
    $("body").on("click", "p", foo);
    
    // ... foo will no longer be called.
    $("body").off("click", "p", foo);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    根据名称空间取消绑定所有委托的事件处理程序

    var validate = function () {
    	// code to validate form entries
    };
    
    // delegate events under the ".validator" namespace
    $("form").on("click.validator", "button", validate);
    
    $("form").on("keypress.validator", "input[type='text']", validate);
    
    // remove event handlers in the ".validator" namespace
    
    $("form").off(".validator");
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    3、one(type,[data],fn)

    3.1、概述

    为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

    在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。

    多数情况下,可以把事件处理函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理函数则作为第三个参数),见示例二。

    3.2、语法

    selector.one(type, [data], fn);
    
    • 1

    3.3、参数

    • type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
    • data:将要传递给事件处理函数的数据映射
    • fn:每当事件触发时执行的函数。

    3.4、示例

    当所有段落被第一次点击的时候,显示所有其文本。

    $("p").one("click", function () {
    	alert($(this).text());
    });
    
    • 1
    • 2
    • 3

    4、事件处理 trigger() 自动触发事件

    4.1、概述

    在每一个匹配的元素上触发某类事件。

    这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

    你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。

    事件处理函数会收到一个修复的(规范化的)事件对象,但这个对象没有特定浏览器才有的属性,比如keyCode。

    jQuery也支持 命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数,而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。

    jQuery 1.3中新增:

    所有触发的事件现在会冒泡到DOM树上了。举例来说,如果你在一个段落p上触发一个事件,他首先会在这个元素上触发,其次到父元素,在到父元素的父元素,直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡,或者在事件处理函数中返回false即可。

    事件对象构造器现在已经公开,并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 jQuery.Event 的文档里找到。

    你可以有三种方式指定事件类型:

    • 你可以传递字符串型的事件名称(type参数)。

    • 你可以使用jQuery.Event对象。可以将数据放进这个对象,并且这个对象可以被触发的事件处理函数获取到。

    • 最后,你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你’‘‘必须’’'指定一个 type 属性。

    4.2、语法

    selector.trigger(type, [data]);
    
    • 1

    4.3、参数

    • type:一个事件对象或者要触发的事件类型
    • data:传递给事件处理函数的附加参数
    • event:事件发生时运行的函数

    4.4、示例

    提交第一个表单,但不用submit()

    $("form:first").trigger("submit");
    
    • 1

    给一个事件传递参数

    $("p")
    	.click(function (event, a, b) {
    		// 一个普通的点击事件时,a和b是undefined类型
    		// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
    	})
    	.trigger("click", ["foo", "bar"]);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    下面的代码可以显示一个"Hello World"

    $("p").bind("myEvent", function (event, message1, message2) {
    	alert(message1 + " " + message2);
    });
    $("p").trigger("myEvent", ["Hello", "World!"]);
    
    • 1
    • 2
    • 3
    • 4

    5、triggerHandler(type, [data])

    5.1、概述

    这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。

    这个方法的行为表现与trigger类似,但有以下三个主要区别:

    • 第一,他不会触发浏览器默认事件。

    • 第二,只触发jQuery对象集合中第一个元素的事件处理函数。

    • 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。

    5.2、语法

    selector.triggerHandler(type, [data]);
    
    • 1

    5.3、参数

    • type:要触发的事件类型
    • data:传递给事件处理函数的附加参数

    5.4、示例

    如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作。

    <button id="old">.trigger("focus")button>
    <button id="new">.triggerHandler("focus")button><br /><br />
    <input type="text" value="To Be Focused" />
    
    • 1
    • 2
    • 3
    $("#old").click(function () {
    	$("input").trigger("focus");
    });
    $("#new").click(function () {
    	$("input").triggerHandler("focus");
    });
    $("input").focus(function () {
    	$("Focused!").appendTo("body").fadeOut(1000);
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    三、事件对象

    1、event.currentTarget

    在事件冒泡阶段中的当前DOM元素

    2、event.data

    当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind。

    3、event.delegateTarget

    当currently-called的jQuery事件处理程序附加元素。

    此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件,事件处理程序附加在正在处理的元素的祖先上。它可用于,例如,指明委派识别和删除事件处理程序。

    对于非授权的事件处理程序,直接连接到一个元素,event.delegateTarget 总是等价于event.currentTarget.

    4、event.isDefaultPrevented()

    根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。

    5、event.isImmediatePropagationStopped()

    根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

    6、event.isPropagationStopped()

    根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。

    7、event.namespace

    当事件被触发时此属性包含指定的命名空间。

    8、event.pageX

    鼠标相对于文档的左边缘的位置。

    9、event.pageY

    鼠标相对于文档的顶部边缘的位置。

    10、event.preventDefault()

    阻止默认事件行为的触发。

    11、event.relatedTarget

    在事件中涉及的其它任何DOM元素。

    对于 mouseout 事件,它指向被进入的元素;对于 mousein 事件,它指向被离开的元素。

    12、event.result

    这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined。

    13、event.stopImmediatePropagation()

    阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

    除了阻止元素上其它的事件处理函数的执行,这个方法还会通过在内部调用 event.stopPropagation() 来停止事件冒泡。如果仅仅想要停止事件冒泡到前辈元素上,而让这个元素上的其它事件处理函数继续执行,我们可以使用event.stopPropagation() 来代替。

    使用 event.isImmediatePropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。

    注意:

    自从.live()方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.delegate() 事件将始终传播给其中包含的被委托元素;元素上的事件将在被委托事件被调用的时候执行。

    14、event.stopPropagation()

    防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。

    我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。

    这个方法对 trigger() 来自定义的事件同样有效。

    注意,这不会阻止同一个元素上的其它事件处理函数的运行。

    额外说明:

    自从.live()方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.delegate() 事件将始终传播给其中包含的被委托元素;元素上的事件将在被委托事件被调用的时候执行。

    15、event.target

    最初触发事件的DOM元素。

    这是注册事件时的对象,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。

    16、event.timeStamp

    这个属性返回事件触发时距离1970年1月1日的毫秒数。

    这可以很方便的检测某个jQuery函数的性能。

    17、event.type

    18、event.which

    针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。

    event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

    写在最后

    如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
    如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
    如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
    谢谢各位读者们啦(^_^)∠※!!!

  • 相关阅读:
    TB1荧光染料
    遗传算法在TSP中的两步求解(Matlab代码实现)
    JavaScript基础知识09——数据类型
    2022年湖北特种作业操作证应急管理厅怎么报考?甘建二
    Kubernetes(k8s)网络策略NetworkPolicy
    Spring Boot创建多模块项目
    lesson-2C++类与对象(中)
    导电滑环材料选型要注意的因素
    tarfile.ReadError: not a gzip file
    Prompt、RAG、微调还是重新训练?选择正确的生成式 AI 的方法指南
  • 原文地址:https://blog.csdn.net/weixin_62277266/article/details/126712794