使用 onclick 函数创建 div（纯 Javascript）答案

【问题标题】：Create div with on click-function(plain Java Script)使用 onclick 函数创建 div（纯 Javascript）
【发布时间】：2017-04-13 19:54:41
【问题描述】：

我用 js 创建了一个 div (var div = document.createElement("div");)。现在我想在创建 div 后插入一个 onclick 函数。出于某种原因，当我单击游戏区时会触发 onclick 功能。

var create_divs = function(check_if_right_div){
                  var random_class = Math.floor((Math.random() * 5) + 1);
                  var id = div_id += 1;
                  var random_position = 0 + 100*Math.floor(Math.random()*6);
                  var div = document.createElement("div");

                  div_id_selection.push('div' + id);


                  div.className = 'class'+random_class;
                  div.id = 'div' + id;
                  div.style.left = random_position;
                  div.addEventListener("click",check_if_right_div(div));//the function is triggered when I click the playfield, which is a big div that contains the other divs


                  document.getElementById('play_field').appendChild(div);
                  
                  
                  var check_if_right_div = function(div_to_check){
                                           var div_class =div_to_check.className;
                                             console.log(div_class);

                  };

【问题讨论】：

你认为check_if_right_div(div) 是做什么的？
你能提供你的标记吗？

标签： javascript

【解决方案1】：

你需要这样做

div.onclick = function(){ 
   check_if_right_div(div); 
};

当您执行此 check_if_right_div(div) 时，它是函数执行，这意味着通过使此 div.addEventListener("click",check_if_right_div(div));你执行函数 check_if_right_div(div)

【讨论】：

【解决方案2】：

您提供的代码不完整。但是，EventTarget.addEventListener 是向元素添加侦听器的现代首选方法。

备注

为什么要使用 addEventListener？

addEventListener 是注册事件监听器的方式在 W3C DOM 中指定。它的好处如下：

它允许为一个事件添加多个处理程序。这对于 DHTML 库或 Mozilla 扩展特别有用，
需要与其他库/扩展程序良好配合。

当侦听器被激活（捕获与冒泡）时，您可以更精细地控制阶段。

它适用于任何 DOM 元素，而不仅仅是 HTML 元素。

const playField = document.getElementById('play_field');
const div = document.createElement('div');
div.id = 'myDiv';
div.className = 'myClass';
const onClickHandler = event => console.log(event.target.className);
div.addEventListener('click', onClickHandler, false);
playField.appendChild(div);

.myClass {
  width: 100px;
  height: 100px;
  background-color: red;
}

&lt;div id="play_field" /&gt;

【讨论】：