jquery绑定事件的方法 jquery绑定mouseover事件 收藏 0

jQuery事件绑定的最佳实践

如果你经常使用jQuery，那么你也许很熟悉事件绑定。这是很基本的东西，但是深入一点，你就能够找到机会让你事件驱动的代码变得不太零碎，并且更容易管理。

更好的选择器策略

让我们从基础的例子开始。下面的HTML代码表示的是可以开合的导航菜单。

<button class=\”nav-menu-toggle\”>Toggle Nav Menu</button>

<nav>

<ul>

<li><a href=\”/\”>West Philadelphia</a></li>

<li><a href=\”/cab\”>Cab Whistling</a></li>

<li><a href=\”/throne\”>Throne Sitting</a></li>

</ul>

</nav>

下面这个是点击按钮之后控制导航菜单开合的javascript代码

$(\’.nav-menu-toggle\’).on(\’click\’,function(){

$(\’nav\’).toggle();

});

这可能是最常用的实现方式。它能够使用，但是比较脆。javascript代码依赖了按钮的类名nav-menu-toggle。很可能在未来其他开发者或者健忘的你在重构代码的时候会删除或者重命名这个类名。

问题的核心是我们同时在表现和交互中使用了CSS的类名。这违反了关注点分离的原则，让维护更容易出错。

让我们用一个不同的方法来实现

<button data-hook=\”nav-menu-toggle\”>Toggle Nav Menu</button>

<nav data-hook=\”nav-menu\”>

<ul>

<li><a href=\”/\”>West Philadelphia</a></li>

<li><a href=\”/cab\”>Cab Whistling</a></li>

<li><a href=\”/throne\”>Throne Sitting</a></li>

</ul>

</nav>

这次我们使用这个data属性（data-hook）来选择元素。任何对CSS类的改变将不会影响到javascript，让我们能够实现关注点分离以及更加稳定的代码。

下面我们用data-hook属性来选择对应的元素：

$(\'[data-hook=\”nav-menu-toggle\”]\’).on(\’click\’,function(){

$(\'[data-hook=\”nav-menu\”]\’).toggle();

});

需要注意的是，我也使用data-hook作为nav元素的选择器。你不一定需要，但是我喜欢这里面包含的思想：任何使用你看到data-hook，你会知道这个元素在javascript中引用到啦。

一些语法

我必须承认data-hook选择器并不是很漂亮。让我们通过扩展jQuery实现一个自定义的函数：

$.extend({

hook:function(hookName){

var selector;

if(!hookName || hookName === \’*\’){

// select all data-hooks

selector=\'[data-hook]\’

}else{

// select specific data-hook

selector=\'[data-hook*=\”\’+hookName+\’\”]\’;

}

return $(selector);

}

});

上面准备完毕，我们来重写一下javascript。

$.hook(\’nav-menu-toggle\’).on(\’\’,function(){

$.hook(\’nav-menu\’).toggle();

});

更好的是，我们甚至可以把一系列以空格分开的hook名字放在一个元素上。

<button data-hook=\”nav-menu-toggle video-pause click-track\”>Toggle Nav Menu</button>

我们可以找到里面的任意个hook名字：

$.hook(\’click-track\’); // returns the button as expected

我们也能够找到页面上所有的hook元素

// both are equivalent

$.hook();

$.hook(\’*\’);

防止函数表达式

到目前为止，我们在事件处理中使用的都是匿名函数。让我们重写一下，使用声明的函数来代替它。

function toggleNavMenu(){

$.hook(\’nav-menu\’).toggle();

}

$.hook(\’nav-menu-toggle\’).on(\’click\’,toggleNavMenu);

这让事件绑定的代码更加易读。这个toggleNavMenu函数名表达了意图，是代码自我注释的好例子。

我们同时也获得了可复用的能力，因为其他地方可能需要使用toggleNavMenu函数。

最后，这对于自动化测试来说是意见大喜事，因为声明的函数的单元测试要比匿名函数单元测试容易的多。

同时使用多个事件

jQuery提供了一个简单方便的语法来处理多事件的问题。比如，你可以为一系列空格隔开的事件列表绑定同一个事件处理函数。

$.hook(\’nav-menu-toggle\’).on(\’click keydown mouseenter\’,trackAction);

如果你需要为不同的事件绑定不同的处理函数，你可以使用对象表达方式：

$.hook(\’nav-menu-toggle\’).on({

\’click\’:trackClick,

\’keydown\’:tranckKeyDown,

\’mouseenter\’:trackMouseEnter

});

反过来，你可以同时取消多个事件的绑定：

// unbinds keydown and mouseenter

$.hook(\’nav-menu-toggle\’).off(\’keydown mouseenter\’);

// nuclear options:unbinds everything

$.hook(\’nav-menu-toggle\’).off();

你可以想象到的是，不小心的取消事件绑定可能会导致严重的我们不想要的副作用。继续看我们可以通过哪些技巧来减轻这个问题。

小心的取消事件绑定

一般情况下我们不会在一个元素的同一事件类型绑定多个事件处理函数。让我们再看一下之前的那个按钮：

<button data-hook=\”nav-menu-toggle video-pause click-track\”>Toggle Nav Menu</button>

不同的代码区域可能会在同一个元素的同一事件绑定不同的事件处理函数：

// somewhere in the nav code

$.hook(\’nav-menu-toggle\’).on(\’click\’,toggleNavMenu);

// somewhere in the video playback code

$.hook(\’video-pause\’).on(\’click\’,pauseCarltonDanceVideo);

// somewhere in the analytics code

$.hook(\’click-track\’).on(\’click\’,trackClick);

尽管我们使用了不同的选择器，但是这个元素现在有三个事件处理函数啦。假如我们的分析代码不在关心这个按钮：

// no good

$.hook(\’click-track\’).off(\’click\’);

糟糕的是，上面的代码实际上回删除所有的点击事件处理函数，不仅仅是trackClick。我们应该实用更加有辨别力的方式来指定我们需要删除的事件处理函数：

$.hook(\’click-track\’).off(\’click\’,trackClick);

另一种方式是使用命名空间。任何事件都有资格使用一个命名空间来实现绑定和取消绑定，这样你就可以更好的控制事件绑定和取消绑定。

// binds a click event in the \”analytics\” namespace

$.hook(\’click-track\’).on(\’click.analytics\’, trackClick);

// unbinds only click events in the \”analytics\” namespace

$.hook(\’click-track\’).off(\’click.analytics\’);

你也可以使用多个命名空间：

// binds a click event in both the \”analytics\” and \”usability\” namespaces

$.hook(\’click-track\’).on(\’click.analytics.usability\’,trackClick);

// unbinds any events in either the \”analytics\” OR \”usability\” namespaces

$.hook(\’click-track\’).off(\’.usability .analytics\’);

// unbinds any events in both the \”analytics\” AND \”usability\” namespaces

$.hook(\’click-track\’).off(\’.usability.analytics\’);

需要注意的是，命名空间的顺序是没有关系的，因为命名空间不是层级式的。

如果你有一个复杂的功能需要多个元素绑定多个事件，那么使用命名空间是一种简单的把一种简单的把他们组织起来然后快速清除的方式：

// free all elements on the page of any \”analytics\” event handling

$(\’*\’).off(\’.analytics\’);

命名空间在写插件的时候尤其有用，因为这样你就能保证只会取消自己命名空间范围内的事件处理函数的绑定。

jQuery trigger() 方法用法详解

jQuery 的 trigger() 方法用于在指定的元素上触发事件。这个方法非常有用，当你需要模拟用户交互或在特定条件下自动触发事件时。以下是 trigger() 方法的详细用法：

• selector: 选择器，用于选择要触发事件的元素。
• eventType: 字符串，表示要触发的事件类型（例如 \”click\”, \”submit\”, \”mouseover\” 等）。

在这个例子中，当页面加载完成后，trigger(\”click\”) 会立即触发按钮的点击事件，弹出一个警告框。

在这个例子中，当页面加载完成后，trigger(\”myCustomEvent\”) 会立即触发 div 元素的自定义事件，弹出一个警告框。

你还可以向事件处理程序传递额外的参数。这些参数将作为事件对象的附加属性传递给事件处理程序。

在这个例子中，当页面加载完成后，trigger() 方法不仅触发了 customEventWithParams 事件，还传递了两个参数 param1 和 param2，并在事件处理程序中接收到这些参数。

• trigger() 方法用于在指定元素上触发事件。
• 可以触发内置事件（如 click, submit）或自定义事件。
• 可以通过传递额外的参数来扩展事件对象。
• 常用于模拟用户交互或在特定条件下自动触发事件。

jQuery知识一览

jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。jQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。jQuery的主旨是write less, do more。

• html元素的选取
• 操作html元素
• css操作
• html事件处理
• 实现js动画效果
• 能够链式调用
• 容易扩展插件
• 封装了ajax

引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。

在官网的：https://jquery.com/download/ 链接下可以下载到完整的代码，放到项目文件的js文件夹下。

在网站：https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。

• 1.x 版本兼容老版本的IE，文件比较大
• 2.x 版本文件比较小，支持IE8+
• 3.x 版本引入部分新API，提供多个分包的版本，支持IE9+

开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。

从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：

从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。

继续跟踪源码 new jQuery.fn.init( selector, context)，这个函数中调用了makeArray，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿makeArray作为演示。

查看makeArray函数：

所以这个返回实例对象，是一个伪数组。

从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。

所以在引入jQuery的项目中：

通常形式为：$(param)

• param为函数：dom加载完成后，执行该回调函数
• param为选择器字符串：查找与该选择器匹配的所有标签，并封装成jQuery对象
• param为dom对象：将该dom对象封装成jQuery对象
• param为标签字符串：创建标签对象并封装成jQuery对象

• jQuery函数返回的是一个伪数组（Object对象），可以使用length和下标。

通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。

直接修改css属性（如果其dom标签存在这个css属性）

清空某标签下的所有dom：

给某标签下添加dom标签：

移除、添加class：

获取dom标签上的属性：

设置标签的属性：

点击：

hover：

监听事件：

post请求：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com