如果我使用 jQuery，JavaScript 事件是否有效？答案

【问题标题】：Are JavaScript events working if i am using jQuery?如果我使用 jQuery，JavaScript 事件是否有效？
【发布时间】：2011-10-04 23:10:11
【问题描述】：

我是使用 jQuery 创建应用程序的新手，但我对 Javascript 非常熟悉。好吧，我想做的是使用 Javascript getElementById 在 html5 画布中绘制图像。我的代码是：

包括jQuery和JQuery mobile：

    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="lib/jquery-1.6.1.js"></script>  
    <script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script>

有问题的代码：

     <div data-role="content">
      <!--//TO DO canvas drawing-->
      <canvas id="draw_area" width="295px" height = "390px"></canvas>
      ...

      <script type="text/javascript">
      var canvas = getElementById("draw_area");
      var context = canvas.getContext('2d');
      var map = new Image();

      map.src = "./imgs/home_screen1.png";
      map.onload = function (){
          context.drawImage (map, 0, 0);
      };
 </script>

我还注意到我无法使用

<body onload = "aFunction();">

不是任何其他 Javascript 事件，例如“onclick”。

我做错了吗？

【问题讨论】：

aFunction() 是什么？你用的是什么浏览器？
那么，究竟，“问题”是什么？ IE。你预计会发生什么，实际会发生什么？您收到任何错误消息吗？
@RobG：问题是有无效的脚本阻止后续脚本的执行。错误应该是 Uncaught ReferenceError: getElementById is not defined 在控制台中。
该脚本中的错误不一定会阻止其他脚本在其他脚本元素中运行或主体的 onload 处理程序运行。也许 OP 的 load 函数依赖于失败代码的结果，谁知道呢？
@RobG：抱歉，Rob，你是对的。 getElementById 问题将阻止 该块中 的其余脚本运行，但它本身并不能解释为什么在加载时不调用 aFunction()。

标签： javascript jquery html5-canvas dom-events

【解决方案1】：

应该是：

var canvas = document.getElementById("draw_area");

您的脚本在加载后立即运行getElementById 行，这将失败（由于缺少document.）并阻止页面其余部分上的脚本执行。

Here's a quick demo 向您展示脚本错误将如何阻止后续行执行。

一旦修复，正如@swalk 所说，您应该封装该脚本，使其在document.ready 上运行以保持整洁。

【讨论】：

@RobG: getElementById() 是document 对象上的一个函数，在没有document. 的情况下使用它将不起作用，并且会阻止后续脚本的执行。如果 OP 检查他们的错误控制台，他们将看到类似于 Uncaught ReferenceError: getElementById is not defined 的内容。 +1？ ;)
这将使您的 javascript 重新开始工作。此外，从技术上讲，OP 不需要将其代码包装在 document.ready 调用中，因为它正在处理的元素已被加载。但这样做是正确的 :)
@Blair McMillan：你说得对，“需要”这个词太强了。我已经更新了我的答案。
@Town — 我读到“缺少文档”的意思是 DOM 不可用，而不是标识符 document 丢失。分数已调整。
@Town：非常感谢，这确实是我的问题。我不知道我需要使用document.

【解决方案2】：

我怀疑这是因为您没有使用 jQuery 的 dom 就绪功能。任何操作/访问 DOM 的 JavaScript 都应该在 DOM 准备好之后完成。即使这不是问题，当人们不熟悉 JavaScript 或 jQuery 时，这也是一个常见的问题。

大多数 jQuery 代码通常在这个准备好的函数中找到：http://api.jquery.com/ready/。

例如，您的代码应该是：

<script type="text/javascript">
$(document).ready(function() {
  var canvas = getElementById("draw_area");
  var context = canvas.getContext('2d');
  var map = new Image();

  map.src = "./imgs/home_screen1.png";
  map.onload = function (){
    context.drawImage (map, 0, 0);
  };
});
</script>

【讨论】：

ready() 与否，var canvas = getElementById("draw_area"); 将不起作用（除非 OP 出于某种原因定义了自己的 getElementById 实现！）。
<body onload= afunction(); 的问题仍然存在。 @James，@RobG 我正在研究 phonegap，为 iphone 创建一个应用程序。 afunction() 可以是触发警报的不同 js 文件中的任何函数。如何在 js 文件中使用document.ready？抱歉这个问题听起来很傻......