Question

我有一些html元素，每个元素都有onclick属性。并且每个onclick属性的值都不同。我想获得点击的价值。

<div class="test" onclick="something1">Lorem ipsum</div>
<div class="test" onclick="something3">Lorem ipsum</div>
<div class="test" onclick="something2">Lorem ipsum</div>

window.addEventListener('click', function(e) {
   var test = document.querySelector(`.test[onclick="${e}"]`);
   console.log(test) 
})

在这里，我只想获取被点击的div的onclick值。

Answer 1

为什么不将事件绑定到所需的元素。

create_blob(file, selected_div, function(blob_string, divSelector) {
   $( "."+divSelector).find( "img" ).attr('src', blob_string);
   $( "."+divSelector).find( "input" ).val(blob_string);
});

Array.from(document.querySelectorAll('.test')).forEach(e => {
  // Add a data-attribute to store the current onclickvalue.
  e.dataset.onclickvalue = e.getAttribute('onclick'); // gets the attribute value.
  e.onclick = ""; // this is to avoid an event call.
  
  e.addEventListener('click', function() {
    console.log(this.dataset.onclickvalue);
  })
});

Answer 2

onclick="something*"是错误的事件属性。正确的语法是：

onclick="something2();"

通常，on-event attribute的值具有函数或语句-但是AFAIK数据类型和原始值绝不是事件属性的值（但从技术上讲，任何东西都可以是具有值的属性，但是不标准，只是丑陋而已）。此外，通常不鼓励使用事件属性，而鼓励使用.addEventListener()（既不鼓励也不鼓励使用事件属性）：

事件属性： <div class="test" ~~onclick="callback();"~~ >TEST</div>


事件属性： document.querySelector(".test").onclick = callback;


事件侦听器： document.querySelector(".test").addEventListener("click", callback);

尽管完全有效，但使用div作为用户交互的可点击元素并不是一个好的选择。交互式标签，例如<button>，<input>-甚至<a>都是更好的选择，因为它们具有可促进用户交互的内置行为和UI逻辑。另外，按钮和链接在语义上甚至更好。

假设我们将继续<div>s，尽管之前已经讨论过，
我们已确定应删除onclick属性，因为：
A.不鼓励使用活动属性，并且
B.无论如何，它们在语法上都是错误的。
<div>s没有方便的value属性，例如<button>或<input>标签。幸运的是，任何标签都可以带有data-* attribute。每个<div>都被分配一个具有唯一值的data-value属性（可以分配任何字符串值）。可以使用.dataset属性访问该值：
```
 var value = document.querySelector(".click").dataset.value; // get value
 document.querySelector(".click").dataset.value = '3'; // set value
```
事件侦听器绑定到注册到click事件的文档对象。因此，如果用户单击页面上的任意位置，事件侦听器将调用回调函数（例如function clickHandler()）。回调函数将使用event.target（例如<div class="click">）属性来确定要具体单击的内容，而忽略所有其他标记。此过程是称为 Event Delegation 的编程模式的一部分。

详细信息在演示中被评论

/*
Bind document to the click event
callback is function clickHandler()
*/
document.addEventListener('click', clickHandler);

// Always have callback functions pass the Event Object
function clickHandler(event) {
  // Reference the clicked tag
  var clicked = event.target;

  /*
  if the clicked tag has the className of '.click'...
  ...get the value of data-value and
  log it to console
  */
  if (clicked.className === 'click') {
    var value = clicked.dataset.value;
    console.log(value);
  }
}

<div class='click' data-value='1'>CLICK 1</div>
<div class='click' data-value='2'>CLICK 2</div>
<div class='click' data-value='3'>CLICK 3</div>
<div class='click' data-value='4'>CLICK 4</div>

Answer 3

让它变得简单有趣，我只编写了一个基本的ActionOfType<T>方法。希望对您有帮助。谢谢

您必须在onclick属性中提供方法名称，例如onclick。不只是字符串

something()

function something(e) {
  console.log(e.innerText);
}

Answer 4

function getvalue(x)
{
console.log(x);
}

<div class="test" onclick="getvalue(1)">Lorem ipsum</div>
<div class="test" onclick="getvalue(2)">Lorem ipsum</div>
<div class="test" onclick="getvalue(3)">Lorem ipsum</div>

尝试此代码。

如何获得点击查询的值？

4 个答案: