jQuery事件

Posted 2021-06-18 喆星高照

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery事件相关的知识，希望对你有一定的参考价值。

单个事件注册

事件方法触发器或添加一个函数到被选元素的事件处理程序。

触发实例：

$("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

绑定实例：

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。

on()方法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法

 $(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

绑定多个事件

绑定多个事件有两种语法：

一、将事件与方法以对象方式传入

二、若多个事件为同一方法，可以将事件设置为字符串

例：

<script>
    	//多个事件使用同一方法
        $(\'.box\').on(\'mouseenter mouseleave\', function() {
            console.log(\'hello world\');
        });
        
		//多个事件多个方法
        $(\'.box\').on({
            mouseenter: function() {
                $(this).css(\'backgroundColor\', \'skyblue\');
            },
            mouseleave: function() {
                $(this).css(\'backgroundColor\', \'pink\')
            }
        });
</script>

实现事件委托

on()方法可以实现事件委托，其传入的参数有一个childSelector可以实现对子节点（注意：只能是子节点，孙子节点就不行了）的事件委托，事件还是绑定在父节点上的，通过事件冒泡来实现事件的方法

例：

<script>
        $(\'ul\').on(\'click\', \'li\', function() {
            console.log(123);
        });
</script>

实现未来节点绑定

on()方法还可以为还未创建的节点绑定事件

例：

<body>
    <ul></ul>
    <script>
        $(\'ul\').on(\'click\', \'li\', function() {
            console.log(111);
        });
        var li = $(\'<li>123</li>\');
        $(\'ul\').append(li);
    </script>
    
    <div class="box"></div>
    <script>
        $(\'.box\').on({
            mouseenter: function() {
                console.log(123);
            }
        });
        var div = $(\'<div class="box">123</div>\');
        $(\'.box\').append(div);
    </script>
</body>

移除事件

off()方法

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

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法

$(selector).off(event,selector,function(eventObj),map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

例：

<script>
        $(\'div\').on({
            click: function() {
                $(this).css(\'backgroundColor\', \'skyblue\');
            },
            mouseenter: function() {
                $(this).css(\'backgroundColor\', \'green\')
            }
        });
        $(\'div\').off(\'click mouseenter\');       //解绑点击和鼠标经过事件
        $(\'div\').off(\'mouseenter\');             //解绑鼠标经过事件
        $(\'div\').off();                         //解绑所有绑定事件
</script>

执行一次事件

one()方法

one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。

语法

$(selector).one(event,data,function)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

它的用法与on()方法类似，例：

<script>
    $(\'div\').one({
        click: function() {
            console.log(\'hello\');
        },
        mouseenter: function() {
            console.log(\'world\');
        }
    });
</script>

自动触发事件

element.事件()

该方法可以简单的调用一些事件

例如：

$(\'div\').click();

trigger() 方法

trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。

该方法与 triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为。

与 triggerHandler() 方法相比的不同之处:

trigger() 方法不会引起事件（比如表单提交）的默认行为
trigger() 会操作 jQuery 对象匹配的所有元素，而 triggerHandler() 只影响第一个匹配元素。
由 triggerHandler() 创建的事件不会在 DOM 树中冒泡，如果目标元素不直接处理它们，则不会发生任何事情。

语法

$(selector).trigger(event,eventObj,param1,param2,...)

参数	描述
event	必需。规定指定元素上要触发的事件。可以是自定义事件，或者任何标准事件。
param1,param2,...	可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

triggerHandler() 方法

triggerHandler() 方法触发被选元素上指定的事件。

该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。

与 trigger() 方法相比的不同之处:

它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

其语法与方法参数与trigger() 方法相同

例：

<script>
        $(\'.one\').click(function() {
            alert(\'hello one\');
        });
        $(\'.two\').click(function() {
            alert(\'hello two\');
        });
        $(\'input\').focus(function() {
            $(this).val(\'hello world\');
        })
        // $(\'div\').click();                  //第一种方法

        //$(\'div\').trigger(\'click\');          //第二种方法,会匹配所有div
        //$(\'div\').triggerHandler(\'click\');   //第三种方法，只会匹配第一个div，也就是.one

        //$(\'input\').trigger(\'focus\');        //会触发默认行为，输入框中会有表单聚焦
        $(\'input\').triggerHandler(\'focus\');   //不会触发默认行为，所以输入框不会有聚焦
</script>

jQuery事件对象

与javascript类似，jQuery也有事件对象，用法与JavaScript相似

例如，语法

$(\'.one\').click(function(event) {
            console.log(event);
        });

拷贝对象extend()方法

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：

如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
如果多个对象具有相同的属性，则后者会覆盖前者的属性值

语法

$.extend( target [, object1 ] [, objectN ] )

指示是否深度合并

$.extend( [deep ], target, object1 [, objectN ] )

警告: 不支持第一个参数传递 false 。

参数	描述
deep	可选。 Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
target	Object类型目标对象，其他对象的成员属性将被附加到该对象上。
object1	可选。 Object类型第一个被合并的对象。
objectN	可选。 Object类型第N个被合并的对象。

浅拷贝

浅拷贝即默认情况下该方法的第一个参数deep为false的情况下，该方法会将原对象的数据拷贝到目标对象，若有相同的属性则会覆盖掉，简单数据类型会重新赋值，复杂数据类型会将地址赋值给目标对象，因此，浅拷贝在进行复杂数据的更改时，会将原对象的数据也一并更改。

<script>
        // 1、目标对象为空
        // let targetObj = {}
        // let obj = {
        //     name: \'david\',
        //     age: 18
        // }
        // console.log(targetObj.name);
        // $.extend(targetObj, obj);
        // console.log(targetObj.name);

        // 2、目标对象不为空
        // let targetObj = {
        //     sex: \'men\',
        // }
        // let obj = {
        //     name: \'david\',
        //     age: 18,
        //     hobby: {
        //         love: \'you\',
        //     }
        // }
        // $.extend(targetObj, obj);
        // console.log(targetObj);

        // 3、目标对象不为空且相互冲突
        let targetObj = {
            name: \'david\',
            sex: \'men\',
            hobby: {
                game: \'double\',
                sport: \'jump\'
            }
        }
        let obj = {
            name: \'marry\',
            sex: \'women\',
            hobby: {
                lover: \'david\',
                hate: \'shit\'
            }
        }
        $.extend(targetObj, obj);
        // console.log(targetObj);
        // console.log(obj);

        // 4、修改复杂数据
        targetObj.hobby.lover = \'jhon\';
        console.log(targetObj);
        console.log(obj);
</script>

深拷贝

与浅拷贝不同，深拷贝是将所有数据复制一份到目标对象，因此即使修改复杂数据也对源对象没有影响。除此之外，深拷贝会考虑到复杂对象，在进行复杂对象拷贝时也会对比属性值，若复杂数据对象名相同但是属性值不同则会将复杂数据的属性值添加到目标对象中，而不会完全覆盖。

<script>
        let targetObj = {
            name: \'david\',
            sex: \'men\',
            hobby: {
                love: \'you\',
                hate: \'you\',
                lover: {
                    hi: \'jhon\',
                }
            }
        }
        let obj = {
            name: \'marry\',
            sex: \'women\',
            hobby: {
                love: \'me\',
                game: \'double\',
                sport: \'jump\',
                lover: {
                    hello: \'jhon\'
                }
            }
        }
        $.extend(true, targetObj, obj);
        console.log(targetObj);
        console.log(obj);
</script>

扩展：事件大全

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 html 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件

以上是关于jQuery事件的主要内容，如果未能解决你的问题，请参考以下文章

原生js如何绑定a连接点击事件？

jQuery应用代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）