javascript – Stellen Sie eine Frage dazu in JS.

Question

Warum wird das Onclick-Ereignis an dieser Stelle nicht ausgelöst? Wenn Sie das DOM-Objekt des aktuell angeklickten Li in jquery abrufen können, kann es dann nicht auf diese Weise in JS verwendet werden?

$(document).ready(function(){
    $("ul li").click(function(){
        console.log($(this));//打印出当前被点击的li的jquery对象
        console.log(this);//打印出当前被点击的li的dom对象
    });
});

window.onload = function(){
    var lis = document.getElementsByTagName("li");
    lis.onclick = function(){
        console.log("111");
        console.log(this);
    }
}

Änderung:

window.onload = function(){
    var lis = document.getElementsByTagName("li");
    Array.from(lis).forEach(function(el) {
        console.log("111");
        console.log(this);
    })
}

<p>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</p>

Vielen Dank an alle, ich habe zuvor jquery verwendet, aber jetzt schaue ich mir js noch einmal an und habe viele Probleme festgestellt. So einen dummen Fehler werde ich in Zukunft nicht noch einmal machen, ich bin sehr beeindruckt ^_^.

Answer 1

能把 你有点击触发这个事件么？ 我在 segmentFault 可以用。

---

不过你代码有点小问题 getElementsByTagName 返回的是一个类数组对象

应该遍历他 然后把给每个元素的 onclick 赋值

Answer 2

不是 this 的原因。

onclick 是 DOM 的事件。但是此时的 lis 根本就不是 dom，而是 DOM 的集合。

jQuery 之所以可以处理，是因为 $("ul li") 返回的是 jQuery 对象，当在其上面调用 click 函数时，jQuery 会隐式的使用循环。

虽然 lis 很像数组，但是却不是数组。因此可以使用 Array.from 函数把它变成真正的数组。

window.onload = function(){
    var lis = document.getElementsByTagName("li");
    Array.from(lis).forEach(function(el) {
        console.log("111");
        console.log(this);
    })
}

Answer 3

lis = document.getElementsByTagName("li")得到的是一个数组。
你应该如何绑定事件呢？

Answer 4

试试不要用.onclick()写点击事件;用addEventListener('click',function(){console.log(this)});添加点击事件看看能不能触发,我怀疑是因为你拿到lis是一个数组 onclick是不是因为这个原因不行了

Answer 5

第二段代码写的不对, lis 是一个数组,不是 dom 对象,所以设置 onclick 没用
改成这样

window.onload = function(){
    var lis = document.getElementsByTagName("li");
    Array.from(lis).forEach((li) => {
        li.onclick = function(){
            console.log("111");
            console.log(this);
        }
    })
}

Answer 6

直接用getElementsByClassName这个方法吧，把getElementsByTagName封装了一下可以作为dom操作

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
        oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i < arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

Answer 7

如上图，你的lis打印出来是一个对象数组，按照你的思路你应该遍历lis去为每个li对象绑定onclick