jQuery常见事件的监听方式

在 Web 页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，监听事件的常见方式有以下三种，本人将通过实例来具体介绍。

实例1：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！

注：在实例1中，事件的监听代码是放在 HTML 标签中，这种方式看起来比较直观，但是这是一种不大提倡的事件监听方式。首先，将视图代码（HTML）与交互代码（Javascript）相结合，意味着每当需要更新功能时，都必须编辑 HTML，这将给代码后期的维护带来很烦。其次，它不具备可扩展性。如果我们要将这个单击功能附加到许多按钮上，那么不仅要用一堆重复的代码来增加页面量，而且还会破坏可维护性。

实例2：单击页面\”Hello\”按钮，弹出提示框显示Hello world！

使用jQuery监听事件有很多种方法，如实例3所示。

实例3：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！

注：下面具体分析实例3中用到的 jQuery 事件监听方法。（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。感兴趣的读者可以查看官方帮助文档。

jQuery基础回顾——事件冒泡、移除事件、模拟事件

  • 什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同事<body>元素上也绑定了click事件，当单击内部<span>元素，即触发<span>元素的click事件，会输出3条记录，这就是由事件冒泡引起的。

示例代码

示例效果

在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的<body>，并且每一个元素都会按照特定的顺序响应click事件。

  • 事件冒泡引发的问题

事件冒泡可能会引起意料之外的效果，上例中，本来只想触发<span>元素的click事件，然而<div>和<body>元素的click事件也同时被触发了，因此，有必要对事件的作用范围进行限制，当单击<span>时，只触发该元素的click事件，当单击<div>时，只触发<div>元素的click事件。

想要阻止事件冒泡，只需要在对应事件的响应函数里返回 false（ return false;） 即可。

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件，假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。

当单击按钮后，会出现下图所示的效果

示意动画

1、移除按钮元素上以前注册的事件

首先在网页上添加一个移除事件的按钮。

然后为按钮绑定一个事件，jQuery代码如下：

下面来看看off()方法的语法结构：

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如\”click\”, \”keydown.myPlugin\”, 或者 \”.myPlugin\”.

selector:一个最初传递到.on()事件处理程序附加的选择器。

fn:事件处理程序函数以前附加事件上，或特殊值false.

具体说明如下：

1) 如果没有参数，则删除所有绑定的事件。

2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件。

3) 如果把在绑定时传递的处理函数作为第2/3个参数，则只有这个特定的事件处理函数会被删除。

2、移除<button>元素的其中一个事件

首先需要为这些匿名处理函数指定一个变量，例如下面的jQuery代码：

然后就可以单独删除某一个事件了，jQuery代码如下：

另外，对于只需要触发一次，随后就立即要解除绑定的情况，jQuery提供了一种简写法——one()方法，one()方法可以为元素绑定处理函数，当处理函数出发一次后立即被删除。其语法结构同on()方法类似，使用方法也相同。

  • 常用模拟

以上的例子都是用户必须通过单击按钮才能触发click事件，但是有时，需要通过模拟用户操作来达到单击的效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击。

在jQuery中，可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件：

这样，当页面加载完毕后，就会立刻输出想要的效果，也可以直接用简化写法click()，来达到同样的效果。

  • 触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件，此时传入的参数名为自定义事件的名。

  • 传递数据

trigger(type,[data])方法有两个参数，第1个参数是要触发事件的类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以通过传递一个参数给回调函数来区分这次事件是代码触发还是用户触发的：

示意

  • 执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。

以上代码不仅会触发<input>元素绑定的focus事件，也会使该元素本身得到焦点（这是浏览器的默认操作）。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。

该方法只会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，而不会得到焦点。

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一节：

下一节：

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\’);

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

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

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科