Question

有这些需求的项目。（10分）单击按钮时，会将相应的点添加到总分中。（10分）您不得对上面提供的HTML代码进行任何更改。换句话说，您需要编写不引人注目的JavaScript代码，在JavaScript中而不是在HTML中附加事件处理程序。（10分）window.onload事件处理程序应该是一个匿名函数。（10分）您应该使用相同的事件处理程序来处理网页上所有四个按钮上发生的onclick事件。换句话说，您需要使用this关键字来避免代码冗余。

我想如果有人能告诉我一种我可以使用的方式＆＃34;这个＆＃34;在我的两个函数中，它不像现在在第一个函数中那样具有重复性，就像我注释掉的那样。或者是一种简化代码的方法，以便它像现在一样工作。

    <script>
window.onload = pageLoad();
function pageLoad() {
    //this.onclick = okClick;
    document.getElementById("6pt").onclick = okClick;
    document.getElementById("3pt").onclick = okClick;
    document.getElementById("2pt").onclick = okClick;
    document.getElementById("1pt").onclick = okClick;
}
function okClick() {
    var num1 = document.getElementById("score").value;
    num1 = parseInt(num1);
    var num2 = num1 + parseInt(this.id[0]);
    document.getElementById("score").value = num2;

}
</script>
    <body>
    <div>
        <input id="score" type="text" value="0" />
    </div>
    <div>
        <button id="6pt">6 points (touchdown)</button>
        <button id="3pt">3 points (field goal)</button>
        <button id="2pt">2 points (safety/2-point conversion)</button>
        <button id="1pt">1 point (extra point)</button>
    </div>
</body>

Answer 1

为什么不给所有这些元素一个类，然后使用

var myLinks = document.querySelectorAll('.myClass');
for(var i=0;i<myLinks.length;i++)
    myLinks[i].onclick = okClick;

在okClick中，点击的元素将通过this（以及event.target）提供。

Answer 2

您可以使用bind函数为您的函数提供给定的上下文：

var context = window;
context.something = 5;

var myFunc = function () {

    console.log(this.something); //5

}.bind(context);

Answer 3

如果您只想将相同的okClick()附加到每个按钮，那么您应该尝试使用比ID更通用的选择器。每个元素只能有一个ID，所以，就像你已经注意到的那样，你必须单独插入每个元素。

相反，请尝试使用更通用的选择器，例如document.getElementsByClassName("className");，这会更加通用：

<body>
    <div>
        <input id="score" type="text" value="0" />
    </div>
    <div>
        <button id="6pt" class="score-button">6 points (touchdown)</button>
        <button id="3pt" class="score-button">3 points (field goal)</button>
        <button id="2pt" class="score-button">2 points (safety/2-point conversion)</button>
        <button id="1pt" class="score-button">1 point (extra point)</button>
    </div>

<script>
    (function(){
         // Same as yours
         function okClick() { ... }

         var buttons = document.getElementsByClassName("score-button");
         for(var i = 0, len = buttons.length; i < len; i++)
         {
             buttons[i].onClick = okClick;
         }
    }).call(this);
</script>
</body>

在jQuery或更多现代javascript实现中有更好的选择器，这将节省你必须使用类选择器，你必须阅读它 - 或者看到Sidd的答案，正是这样做（它更干净）。

Answer 4

在目标对象的上下文中调用事件处理程序，如onclick，因此您可以在任何事件处理函数中安全地使用this。这也适用于jQuery附加事件。

以上内容适用于'okClick'功能。您询问了“我的两个函数”，因此如果您指的是pageLoad，则该函数不会在对象的上下文中执行，因此您无法使用this。但你为什么需要呢？它对你没有多大帮助。

有没有办法使用this.onClick事件，仍然可以在它调用的函数中使用“this”？

4 个答案: