1

私はこの休日に JS を使用して DOM を操作する方法を学びたいと思っています。次のような簡単なことから始めます。

var sliderControler = document.getElementsByClassName("slider-controler");
var slideAtual = 0;

for(i = 0; i < sliderControler.length;i++) {
  sliderControler[i].click(function(){
    console.log("I love to screw my brain with js");
  })
}

このイベントを関連付けることができないのはなぜですか? 私はノードリストを持っていますか？

次に、document.getElementsByClassName が nodeList を返し、jQuery $(".slider-controler") がオブジェクトを返します。

jQueryから返されたオブジェクトとノードリストの違いは何ですか

4

4 に答える 4

3

現在、 ( )HTMLElement内の各 に対してクリック イベントを発生させています。NodeListsliderControler

の各要素はNodeListですHTMLElement。クリック ハンドラーを NodeList の要素にバインドするには、ハンドラーをプロパティに使用addEventListenerまたは割り当てます。onclick

for(i = 0; i < sliderControler.length;i++) {
  sliderControler[i].addEventListener('click', function(){
    console.log("I love js");
  });
}

jQuery を使用している場合は、ループを使用してクリック ハンドラーをバインドする必要はありません。

$('.sliderControler').click(function() {
    console.log("I love js");
});
于 2013-11-07T04:13:41.650 に答える
1

Element のクリックイベントは次のように処理できます。addEventListener

sliderControler[i].addEventListener('click', function() {
    console.log("I love to mess my brain with js");
});

jQueryを使用すると、次のようにして、クラスを持つすべての要素のクリックイベントを処理できます.slider-controler

$('.slider-controler').on('click', function () {
    console.log("I love to mess my brain with js");
});
于 2013-11-07T04:12:31.563 に答える
0

jQuery セレクターによって返されるオブジェクトは、jQuery でラップされた要素のコレクションです。DOM 要素で直接利用できるメソッドはまったく異なります。

最初に、インターフェースに関する MDN ドキュメントをお勧めしElementます: https://developer.mozilla.org/en-US/docs/Web/API/element

バインド イベントの場合、通常、次の 2 つのオプションがあります。

  1. 対応するon*属性を使用します。

    sliderController[i].onclick = function() {
  /* ... */
}

    ただし、特定のイベントに複数のハンドラーをバインドできなくなるため、通常は推奨されません。

  2. 使用addEventListener:

    sliderController[i].addEventListener("click", function() {
  /* ... */
});

addEventListener と on* に関する MDN のメモを確認することをお勧めします。

于 2013-11-07T04:15:19.200 に答える
0

jQuery から返される値は真の NodeList ではなく、特別な jQuery オブジェクトです。jQuery の click() メソッドは、上記のコードのように関数をイベント ハンドラーとして受け入れますが、ネイティブの Element オブジェクトは受け入れません。

試してみてください SliderController.click(function... を SliderController.onclick = function... に変更します

于 2013-11-07T04:13:50.760 に答える