javascript - Tanya soalan tentang perkara ini dalam JS.

Question

Mengapa acara onclick tidak dicetuskan di tempat ini? Jika anda boleh mendapatkan objek DOM li yang sedang diklik dalam jquery, tidakkah ia boleh digunakan dalam JS seperti ini?

$(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);
    }
}

Pengubahsuaian:

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>

Terima kasih semua, saya menggunakan jquery sebelum ini, tetapi sekarang saya melihat js semula dan mendapati banyak masalah. Saya tidak akan membuat kesilapan bodoh seperti ini lagi pada masa akan datang, saya sangat kagum ^_^.

Answer 1

Bolehkah anda mengklik untuk mencetuskan acara ini? Saya boleh menggunakan segmentFault.

---

Tetapi terdapat sedikit masalah dengan kod anda getElementsByTagName mengembalikan objek seperti tatasusunan

Anda harus melintasinya dan kemudian tetapkan nilai onclick pada setiap elemen

Answer 2

bukan sebab this.

onclick 是 DOM 的事件。但是此时的 lis Ia bukan dom sama sekali, tetapi koleksi DOM.

jQuery boleh mengendalikannya kerana $("ul li") mengembalikan objek jQuery Apabila fungsi klik dipanggil padanya, jQuery secara tersirat akan menggunakan gelung.

Walaupun fungsi lis 很像数组，但是却不是数组。因此可以使用 Array.from mengubahnya menjadi tatasusunan sebenar.

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") mendapat tatasusunan.
Bagaimana anda harus mengikat acara?

Answer 4

Cuba jangan gunakan .onclick() untuk menulis acara klik; gunakan addEventListener('click', function(){console.log(this)}); adalah kerana anda mendapat lis Adakah onclick tatasusunan tidak berfungsi atas sebab ini?

Answer 5

Sekeping kod kedua ditulis dengan salah lis ialah tatasusunan, bukan objek dom, jadi tetapan onclick tidak berguna
Tukar kepada ini

.

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

Answer 6

Gunakan getElementsByClassName这个方法吧，把getElementsByTagName untuk membungkusnya terus dan ia boleh digunakan sebagai operasi 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

Seperti yang ditunjukkan dalam gambar di atas, lis anda dicetak sebagai susunan objek Menurut idea anda, anda harus melintasi lis untuk mengikat onclick pada setiap objek li