jQuery on() 方法详解（二）

最新推荐文章于 2023-05-20 01:04:43 发布

仲因

最新推荐文章于 2023-05-20 01:04:43 发布

阅读量2k

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_24597661/article/details/67638023

版权

JQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

接上篇jQuery on() 方法详解（一）

The event handler and its environment（事件处理程序和它的环境）

handler参数必须是一个函数（或false值，见下文），除非你传递一个对象给events参数。您可以提供一个匿名处理函数给.on()调用，就像上面例子中的用法，或者可以声明一个函数，然后再将该函数名作为参数：

function notify() { alert("clicked"); }
$("button").on("click", notify);

当浏览器触发一个事件或其他JavaScript调用的jQuery的.trigger()方法，jQuery传递一个event object给这个处理程序，它可以用来分析和改变事件的状态。这个对象是由浏览器提供一个数据的标注化子集;您需要浏览器自己的未经修改的原始 event 对象，您可以使用event.originalEvent得到。例如， event.type 包含事件的名称（例如， “resize” ）和event.target表示事件除非的最深元素（最内层）。

默认情况下，大多数事件的冒泡从最初的 event target（目标元素）开始的，直到document 元素。每个元素都沿着DOM层级这条路，jQuery会调用任何匹配的已被绑定的事件处理程序。一个处理程序可以调用的event.stopPropagation()防止事件向上冒泡文档树（从而防止这些元素的处理程序运行）。任何绑定到当前元素上的其他处理程序都将运行，为了防止这种情况，可以调用event.stopImmediatePropagation()。（绑定在元素上的事件被调用的顺序和它们被绑定的顺序时一样的。）
类似地，一个处理程序可以调用的event.preventDefault()取消浏览器默认操作行为;例如，一个链接上有一个默认的click事件。并非是所有的浏览器事件的默认操作，并非所有的默认操作可以被取消。

当jQuery的调用处理程序时，this关键字指向的是当前正在执行事件的元素。对于直接事件而言，this 代表绑定事件的元素。对于代理事件而言，this 则代表了与 selector 相匹配的元素。(注意，如果事件是从后代元素冒泡上来的话，那么 this 就有可能不等于 event.target。)若要使用 jQuery 的相关方法，可以根据当前元素创建一个 jQuery 对象，即使用 $(this)。

Passing data to the handler（将数据传递到处理程序）

如果data参数给.on()并且不是null 或者 undefined，那么每次触发事件时，event.data都传递给处理程序。data参数可以是任何类型，但如果是字符串类型时，那么selector参数必须提供，或明确地传递null，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对），所以可以作为属性传递多个值。

function greet(event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);

除了可以向 .on() 方法传入 data 参数外，还可以向 .trigger() 或 .triggerHandler() 中传入该参数。

Event performance（事件性能）

在大多数情况下，一个事件如click很少发生，性能表现并不显注。但是，高频率事件比如mousemove 或者 scroll可以每秒触发几十个次，在这种情况下明智地使用事件变得更加重要。可以按如下的办法提高事件的性能：减少事件处理函数中的工作量；对于在事件处理函数中要用到的信息做好缓存而不是再重新计算一次；或使用setTimeout限制的页面更新的实际次数。

许多委派的事件处理程序绑定到 document 树的顶层附近，可以降低性能。每次发生事件时，jQuery 需要比较从 event target（目标元素）开始到文档顶部的路径中每一个元素上所有该类型的事件。为了获得更好的性能，在绑定代理事件时，绑定的元素最好尽可能的靠近目标元素。避免在大型文档中，过多的在 document 或 document.body 上添加代理事件。

jQuery可以非常迅速处理tag#id.class形式的简单选择器，当它们是用来过滤委派事件。所以”#myForm”, “a.external”, 和 “button” 都是快速选择器。若代理事件的选择器使用了过于复杂的形式，特别是使用了分层选择器的情况，虽然说这样做会大大的降低性能，但是对于大多数应用而言，它的速度依然是足够快的。通过为寻找更合适的元素绑定事件的方法，就可以很简单的避免使用分层选择器的情况。例如，使用 $("#commentForm").on("click", ".addNew", addComment)而不是$ (“body”).on(“click”, “#commentForm .addNew”, addComment)。

Additional notes（其他注意事项）

W3C指定明确指定focus 和 blur事件没有冒泡，但是jQuery定义的跨浏览器的focusin 和 focusout事件，并且可以冒泡。当focus 和 blur绑定委派的事件处理程序时，jQuery分析名称，并提供将他们分别交付给focusin 和 focusout。为了保持一致性和清晰度，使用冒泡事件类型的名称。

在所有的浏览器，load ，scroll, 和 error 事件(例如, 在一个元素上)不会冒泡。在Internet Explorer 8和更低，paste 和 reset事件不会冒泡，这样的事件是不支持委派使用，但若事件处理函数是直接绑定在产生事件的元素上的话，是可以使用这些事件的。

window对象上的error 事件使用非标准的参数和返回值约定，所以jQuery 不支持该事件。作为替代，直接用window.onerror属性分配一个处理函数。

例子:

Example:当点击段落时，显示该段落中的文本：

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

Example:向事件处理函数中传入数据，并且在事件处理函数中通过名字来获取传入的数据：

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

Example:取消表单的提交动作，并且通过返回 false 的方法来防止事件冒泡：

$("form").on("submit", false)

Example:通过使用 .preventDefault()，仅取消默认的动作。

$("form").on("submit", function(event) {
  event.preventDefault();
});

Example: 通过使用 .stopPropagation()，防止提交事件的冒泡行为，但是并不禁止提交行为。

$("form").on("submit", function(event) {
  event.stopPropagation();
});

Example:添加并触发自定义事件（非浏览器事件）。

<!DOCTYPE html>
<html>
<head>
  <style>
p { color:red; }
span { color:blue; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$("p").on("myCustomEvent", function(e, myName, myValue){
  $(this).text(myName + ", hi there!");
  $("span").stop().css("opacity", 1)
    .text("myName = " + myName)
    .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  $("p").trigger("myCustomEvent", [ "John" ]);
});
</script>

</body>
</html>

Example: 使用对象同时添加多个事件处理函数。

<!DOCTYPE html>
<html>
<head>
  <style>
.test { color: #000; padding: .5em; border: 1px solid #444; }
.active { color: #900;}
.inside { background-color: aqua; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div class="test">test div</div>
<script>$("div.test").on({
  click: function(){
    $(this).toggleClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});</script>

</body>
</html>

仲因

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery on() 方法详解（二）

接上篇jQuery on() 方法详解（一）The event handler and its environment（事件处理程序和它的环境）handler参数必须是一个函数（或false值，见下文），除非你传递一个对象给events参数。您可以提供一个匿名处理函数给.on()调用，就像上面例子中的用法，或者可以声明一个函数，然后再将该函数名作为参数：function notify() {
复制链接

扫一扫