javascript - 为什么 jquery 中的 event.target 不起作用

Question

以下是我尝试放置的代码。它非常简单，但 event.target 不会触发，而其他正常的事件处理程序可以工作。

$(function($){
  
  var container = $('#container');
  
  function init() {
    container.on('click', open)
  }
  
  function open() {
  
    if(event.target === container) {
      alert ("hi");
    }  
  }
  
      init();

})(jQuery);

body, html {
  padding:0;
  margin:0;
}

#container {
  height: 500px;
  width:800px;
  margin:0 auto;
  background-color:#444;
}

h1{
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id = "container">
  <h1>Testing</h1>
</div>

第一个问题是，TypeError: $(...)。不是函数

第二个问题是，虽然在google chrome中可以运行，但是还是会出现上面的错误。

第三个错误是，虽然该函数在浏览器中运行，但当我放置 event.target === 容器命令时它不起作用。但是，如果我只是 console.log event.target，它会返回容器的 div id。但是，当我添加 event.target 的检查时，它停止工作。

我卡住了，谁能帮我解释一下为什么会出现这个问题

谢谢

Answer 1

1. 这两个值在 javascript 中都没有引用相同的对象引用。

$('#container') 是一个 jQuery 对象，要获取 HTML DOM 对象，您需要检索 Jquery 对象中的第零个元素。而 event.Target 返回 HTML DOM 元素。您要做的是比较不同的对象，因此该条件永远不会通过。

$('#container')是一个ID选择器，可以返回多个匹配的元素(HTML中多个元素相同ID)，所以需要获取第0个返回的元素Jquery 对象。 Jquery 对象是 HTML 元素的包装器，包括附加的属性和方法。

1. 从 $(function($){ 中删除 $，它基本上是一个 IIFE 模式。

因此，您需要按如下所述修改您的代码。

(function($){
  
  var container = $('#container');
  
  function init() {
    container.on('click', open)
  }
  
  function open() {
    if(event.target === container[0]) {
      alert ("hi");
    }  
  }
  
      init();

})(jQuery);

body, html {
  padding:0;
  margin:0;
}

#container {
  height: 500px;
  width:800px;
  margin:0 auto;
  background-color:#444;
}

h1{
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id = "container">
  <h1>Testing</h1>
</div>