javascript - 在按钮的onclick监听器中获取父 View 的数据

Question

我有一个 HTML 文件。

<div id="parent">
  <h1 id="name">giri</h1>
  <button id="btn">Send The Name</button>
</div>

我在按钮单击脚本中有一个 onclick 监听器。

<script type="text/javascript">

window.addEventListener('click',function(e)
        {
            e = e || window.event;
            var target = e.target || e.srcElement;
            console.log("ENTERED NAME=="+?????????); 
            console.log("value of the element clicked== "+target.innerHTML);

            console.log(target);//<-- this is the element that was clicked
        }, false);
</script>

如何在点击监听器中获取输入的名称？

Answer 1

你可以使用这样的东西:

window.onload = function () {
  document.querySelector("#btn").onclick = function () {
    console.log(this.parentNode.querySelector("#name").innerHTML);
  };
};

<div id="parent">
  <h1 id="name">giri</h1>
  <button id="btn">Send The Name</button>
</div>

如果您有多个需要上下文数据的实例，则上述代码非常有意义。让我举一个例子。

window.onload = function() {
  var btns = document.querySelectorAll(".btn");
  for (var i = 0; i < btns.length; i++) {
    (function(i) {
      btns[i].onclick = function() {
        console.log(this.parentNode.querySelector(".name").innerHTML);
      };
    })(i);
  }
};

<div class="parent">
  <h1 class="name">giri</h1>
  <button class="btn">Send The Name</button>
</div>
<div class="parent">
  <h1 class="name">praveen</h1>
  <button class="btn">Send The Name</button>
</div>
<div class="parent">
  <h1 class="name">kumar</h1>
  <button class="btn">Send The Name</button>
</div>