Question

我正在尝试在没有jQuery的情况下在我的网站上实现点击事件。

我想定位多个选择器。

在jQuery中，这可以通过简单的逗号分隔项目来完成，如下所示。

jQuery(document).on('click', '#test1, #test2', function (event) {
    alert($(this).text());
});

如何在普通的javascript中轻松完成？

我已经尝试了下面的工作，但似乎应该有一个更简单的方法，特别是如果我想要点击以上发出警报？我想针对多个特定的选择器，而不是所有的div，例如

var test1 = document.getElementById('test1');
var test2 = document.getElementById('test2');

if (test1.addEventListener || test2.addEventListener) {
    test1.addEventListener('click', function(event) {
        alert(this.innerHTML);
    });
    test2.addEventListener('click', function(event) {
        alert(this.innerHTML);
    });

    /* this only works when you click on test2
    (test1,test2).addEventListener('click', function(event) {
        alert(this.innerHTML);
    });
    */
    /* this only works when you click on test2
    (test1.addEventListener),(test2.addEventListener)('click', function(event) {
        alert(this.innerHTML);
    });        
    */
}

＆＃13;

    var test1 = document.getElementById('test1');
    var test2 = document.getElementById('test2');
    if (test1.addEventListener || test2.addEventListener) {
        test1.addEventListener('click', function(event) {
            alert(this.innerHTML);
        });
        test2.addEventListener('click', function(event) {
            alert(this.innerHTML);
        });
    }

＆＃13;

<div id="test1">test1</div>
<div id="test2">test2</div>

＆＃13;

有没有办法用逗号分隔选择器，或者在运行代码之前设置所有selctors，就像使用jQuery一样？

Answer 1

这基本上是等同于减去所有浏览器检查的代码：

＆＃13;

document.body.addEventListener("click", function(e) {  //bind event to the document
   var targ = e.target;  //get what was clicked on
   var id = targ.id;  //grab the id
   if (["test1","test2"].indexOf(id)!==-1){ //see if it is one of the ids
       alert(targ.textContent);    //show the text
   }
}, false);

＆＃13;

<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

＆＃13;

Answer 2

您可以使用 querySelectorAll ：

var elements = document.querySelectorAll('#test1, #test2');
for (var i=0, iLen=elements.length; i<iLen; i++) {
  // add listeners to elements[i];
}

或者，如果您想将宿主对象与本机方法混合（不是一个好主意，但......）：

[].forEach.call(document.querySelectorAll('#test1, #test2'), function(el) {
  // attach listener to el
});

但事件委托可能比将同一个侦听器附加到多个元素更好。

Answer 3

将处理程序绑定到父级并使用事件委派。 http://javascript.info/tutorial/event-delegation

Answer 4

构建一个选择器数组，然后迭代它添加事件侦听器。还可以将警报或任何您想要的操作放入功能中。的 DEMO

var selectors = new Array("test1", "test2"); for(var i=0; i < selectors.length; i++) { var temp = document.getElementById(selectors[i]); temp.addEventListener('click', function() { clickaction(this.innerHTML); }); } function clickaction(content) { alert(content); }

Answer 5

如有必要，使用indexOf polyfill进行事件委派。

＆＃13;

var arrIDsToWatch = ["test1", "test2", "test5"];

// indexOf Polyfill from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Compatibility
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement, fromIndex) {
    var k;
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    var O = Object(this);
    var len = O.length >>> 0;
    if (len === 0) {
      return -1;
    }
    var n = +fromIndex || 0;
    if (Math.abs(n) === Infinity) {
      n = 0;
    }

    if (n >= len) {
      return -1;
    }
    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

    while (k < len) {
      if (k in O && O[k] === searchElement) {
        return k;
      }
      k++;
    }
    return -1;
  };
}


document.getElementById('parent').onclick = function(e) {
  e = e || event
  var target = e.target || e.srcElement
  var targetID = target.id;
  if (arrIDsToWatch.indexOf(targetID) > -1) {
    alert(target.innerHTML);
  }
}

＆＃13;

<div id="parent">
  <div id="test1">test1</div>
  <div id="test2">test2</div>
  <div id="test3">test3</div>
  <div id="test4">test4</div>
  <div id="test5">test5</div>
</div>

＆＃13;

仅在JS中定位多个选择器

5 个答案: