细说 jQuery 事件篇（一） - 代码执行时机

dunizb 发布于2019-08-19 14:51 / 2709人阅读

摘要：在元素一篇介绍过，可以使用来使得代码在加载完毕后自动执行代码，接下来具体介绍下这个机制。这样看上去貌似没什么问题，但是如果有两个函数需要指定时就会遇到麻烦，因为属性只能保存对一个函数的引用，如果我们写成以下形式最后代码执行后的效果是会覆盖。

在元素一篇介绍过，jQuery 可以使用 $(document).ready() 来使得代码在 DOM 加载完毕后自动执行代码，接下来具体介绍下这个机制。

  $document.ready() 可以简写为 $()，为了书写更直观，本文暂不采用简写方式。

比较 window.onload

我们可以使用原生 Javascript 中的 window.load 方法实现 $document.ready() 的效果，但两者还是有不小的差异。
对于 window.load 是指整个文档对象已经完完全全地加载到页面中来，而 jQuery 的 $document.ready() 方法则是指 DOM 完全就绪，两者的差异可以用一个例子来说明：

假设当前页面具有大量的图像文件，对于 window.load 方法，必须等到所有关联的图像文件都已经下载完毕后才生效，而 $document.ready() 则在 HTML 下载完毕并已经解析为 DOM 树时便已经生效。

这样看上去貌似 jQuery 的方法要优于原生 Javascript 的处理方法，实际上也的确如此，但对于有些情况下，则必须使用 load 方法才会生效，例如上例中的图像，当我们在代码中需要对图像的长宽属性进行处理时，则需要使用 load 方法来实现，这两种方法应该根据实际需求配合使用。

单页面执行多个脚本

在传统的 Javascript 代码中，我们经常看到将一个函数指定给 DOM 元素的对应属性，例如如下代码：

function myClick() {
  //do some stuff here.
}

也可以写成这种形式：

document.querySelector("button").onclick = myClick;

这里写成 myClick 而不是 myClick()，因为前者指的是对函数引用，后者指的是函数执行，前者因为是引用，所以可以再将来被再次调用，而后者则是指页面加载时立即调用执行，不能再被调用。

这样看上去貌似没什么问题，但是如果有两个函数需要指定时就会遇到麻烦，因为 onclick 属性只能保存对一个函数的引用，如果我们写成以下形式：

document.querySelector("button").onclick = myClick1;
document.querySelector("button").onclick = myClick2;

最后代码执行后的效果是 myClick2 会覆盖 myClick1。
而如果我们使用 jQuery 的机制，则能很好地解决这个问题，每次调用 $doucment.ready() 时都会向内部的行为队列添加一个新的函数，当页面加载完毕后，所有的函数都会按顺序执行。

$(document).ready(function() {
  $("button").click(function() {
    //do myClick1 stuff here.
  });
  $("button").click(function() {
    //do myClick2 stuff here.
  });
});

然而实际上现版本的 Javascript 已经引入 addEventListener 方法来解决这个问题：

document.querySelector("button").addEventListener("click", myClick1, false);
document.querySelector("button").addEventListener("click", myClick2, false);

但是考虑到兼容性，jQuery 可以让我们更加轻松地应对这个问题。

解决命名冲突

很多时候，我们需要使用的库不仅仅只有 jQuery，而由于很多库都会采用 $ 来作为标识符，因此就需要一种解决命名冲突的机制。
为了解决这个常见的问题，jQuery 提供了一个 noConflict() 方法，使用该方法后，可以将 $ 的控制权过度给其他的库来使用。假设我们有个 myLibrary 的库，该库也使用 $ 来作为标识符，那么使用方法为：

此时再写 jQuery 方法时就必须采用以下的形式：

jQuery(document).ready(function($) {
  //do stuff here.
});

或者使用简写方式：

jQuery(function($) {
  //do stuff here.
});

这个其实很好理解，即我们将 jQuery 对象本身作为参数传递给回调函数，并且在内部命名为 $，这样在回调函数内部可以自由书写正常的 jQuery 代码。

参考

http://book.douban.com/subject/24669823/

混合云超融合服务器代码只执行一次推荐一篇利用th js事件执行过程点击事件执行php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78144.html

细说 jQuery 事件篇（三） - 事件传播

摘要：是如何决定由哪个元素来处理事件的，以及又是如何优化处理这个问题的，这些都涉及到了事件传播。事件冒泡的弊端事件冒泡可能会导致意料之外的行为，例如在响应事件时，依旧是上例，当为最外层的添加一个事件。使用方法可以避免事件传播导致的问题。 Javascript 是如何决定由哪个元素来处理事件的，以及 jQuery 又是如何优化处理这个问题的，这些都涉及到了事件传播。事件传播策略当页面内...

Cc_2011 2019-08-19 14:51 评论0 收藏0
细说 jQuery Ajax操作篇（一） - 数据加载

摘要：同样将其绑定在按钮点击事件上查看结果为这里需要注意，如果文档内的格式错误，虽然不会报错，但是将无法执行回调函数。 Ajax 通俗来讲即不需要刷新页面即可从服务器或客户端上加载数据，当然这些数据的格式是多种多样的。加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段，并插入到指定位置，假设当前页面为： load showImg(http://segmen...

paulli3 2019-08-21 12:21 评论0 收藏0
细说 jQuery 事件篇（四） - 改变事件过程

摘要：事件对象是一种结构，它会在元素获得处理事件的机会时传递给调用的事件处理程序。事件对象的属性指的是事件目标，它将保存发生事件的目标元素。所以，接下来我们就要想办法改变事件过程来阻止这个行为。在《细说 jQuery 事件篇（三） - 事件传播》中提到了事件冒泡可能造成的弊端，当时举了 mouseout 的例子，对于 mouseout 这个特殊情况，我们可以用 hover 方法来解决，...

nifhlheimr 2019-08-19 14:53 评论0 收藏0
细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
细说 jQuery 事件篇（五） - 事件的移除和重绑定

摘要：一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。事件重绑定我们添加一个按钮，当点击按钮后，所有的事件的处理程序又被重新绑定回来。如果我们需要移除已经注册的事件处理程序，使某些处理程序失效。一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。移除处理程序假设有个 div 和 button，当我们点击...

boredream 2019-08-19 14:53 评论0 收藏0