onchange 属性：从 this 调用函数时的上下文到底是什么？答案

【问题标题】：onchange attribute: what exactly is the context when calling a function from this?onchange 属性：从 this 调用函数时的上下文到底是什么？
【发布时间】：2016-02-17 03:07:50
【问题描述】：

所以我正在尝试制作一个简单的待办事项列表，其中我为我创建的每个列表项设置了复选框。每次我更改与某个任务关联的复选框时，我都想调用一个具有 if else 语句的函数。 if else 语句将告诉我该框是选中还是未选中，并根据该逻辑执行代码。问题是，我不知道如何访问我所指的特定复选框，因为每个任务都是通过 javascript 创建的并且没有唯一的 id。

话虽如此，我的问题是：

如何引用我正在更改的特定复选框？我应该使用“this”关键字吗？如果是这样，在这种特定情况下，“this”到底指的是什么？

这是我的js代码：

$("#add").button();
$("#remove").button();

  //Constructor for ToDo Object
  function ToDo(name){
    this.name = name;
  }

  ToDo.prototype.addItem = function(string){

    var list = document.querySelector("#list");
    var listItem = document.createElement("div");
    var listItemPar = document.createElement("p");
    var listItemText = document.createTextNode(string);
    var checkBox = document.createElement("input")
    checkBox.setAttribute('type','checkbox');
    checkBox.className = "checkBoxes"
    checkBox.setAttribute("onchange","checkedBoxes()")
    var removeButton = document.createElement("button")
    removeButton.className = "removeButtons"
    list.appendChild(listItem);
    listItem.appendChild(listItemPar);
    listItemPar.appendChild(listItemText);
    listItem.appendChild(checkBox);
    listItem.appendChild(removeButton);
    $("button.removeButtons").button();
    $(".removeButtons").hide();
    document.querySelector("#input").value = "";
  };

  ToDo.prototype.removeItem = function(){
    console.log("remove item");
  }


document.querySelector("#remove").addEventListener("click",function(){
  item = new ToDo();
  item.removeItem();
  window.alert("hi");
})

document.querySelector("#add").addEventListener("click",function(){
  var item = new ToDo();
  item.addItem(document.querySelector("input").value);
})


function checkedBoxes(){
  //function I am referring to
}

所以在代码中，我指的是checkBox.setAttribute("onchange","checkedBoxes()")，函数在底部。 HTML 真的不是很重要，因为我几乎所有东西都是通过 javascript 创建的，但是如果你需要查看它来帮助我知道。

提前致谢

【问题讨论】：

标签： javascript checkbox this onchange setattribute

【解决方案1】：

要回答您的问题，您必须在此处传递this 关键字checkBox.setAttribute("onchange", "checkedBoxes(this)")

this 指的是当前元素。

Here is a working example

script.js

$(document).ready(function() {

    //Constructor for ToDo Object
    function ToDo(name) {
        this.name = name || "";
    }

    ToDo.prototype.addItem = function(string) {
        var list = document.querySelector("#list");
        var listItem = document.createElement("li");
        var listItemPar = document.createElement("p");
        var listItemText = document.createTextNode(string);
        var checkBox = document.createElement("input")
        checkBox.setAttribute('type', 'checkbox');
        checkBox.className = "checkBoxes"
        checkBox.setAttribute("onchange", "checkedBoxes(this)")
        var removeButton = document.createElement("button")
        removeButton.setAttribute('type', 'button');
        removeButton.className = "removeButtons"
        list.appendChild(listItem);
        listItem.appendChild(listItemPar);
        listItemPar.appendChild(listItemText);
        listItem.appendChild(checkBox);
        listItem.appendChild(removeButton);
        $(".removeButtons").hide();
        document.querySelector("input").value = "";
    };

    ToDo.prototype.removeItem = function() {
        console.log("remove item");
    }
    $("#remove").click(function(e) {
        var item = new ToDo();
        item.removeItem();
        window.alert("hi");
    });

    $("#adder").click(function(e) {
        console.log("add clicked");
        var item = new ToDo("dd");
        item.addItem(document.querySelector("input").value);
    });

    $("#list").css("border", "3px solid red");


});

function checkedBoxes(thisCheckbox) {
    //function I am referring to
    console.log(thisCheckbox);
}

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@*" />
    <script src="script.js"></script>
  </head>

  <body class="container">
    <input type="text" name="userinput" />
    <button type="button" id="adder">Add</button>
    <button type="button" id="remove">Remove</button>
    <hr />
    <ul id="list" data-hello="world"></ul>
  </body>

</html>

【讨论】：

惊人的细节，感谢您帮助我理解上下文！