JavaScript中的事件侦听器不是jQuery

我想把这个jQuery行转换成vanilla，但是我怎么做呢？我查看了jQuery源代码，但我感到困惑。在纯Javascript中有没有简单的方法可以做到这一点？

您可以将click listener绑定到任何元素，如下所示：

$('ul.mylist').on('click', 'li', function(){})

项目1
项目2
项目3
项目4

函数click_handler（）{
警报（“您单击了列表”）；
}
var list=document.getElementById（“mylist”）；
list.onclick=单击\u处理程序；

---

这里是

这里的一些功能依赖于浏览器，但基本上是这样的

<ul id="mylist">
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
<li> item 4</li>
</ul>

<script type="text/javascript">
function click_handler(){
    alert('you clicked a list');
}
var list=document.getElementById("mylist");
list.onclick=click_handler;

</script>

//使用'mylist'类选择所有UL元素
var uls=document.queryselectoral（'ul.mylist'）；
//迭代集合，并绑定'click'处理程序
对于（变量i=0；i

---

您可以通过使用

节点.matchesSelector（“.my.selector”）

使选择器测试更广泛，尽管该方法在某些浏览器中是使用特定于浏览器的属性标志实现的，因此您需要首先在

元素.prototype

上以正确的名称公开它。

是，尽管是否仍会考虑它“很简单“这是一个意见问题。而且，您想要支持的浏览器越多，代码就变得复杂得多。@Shaunak似乎与downvote按钮上的描述相匹配<代码>此问题未显示任何研究工作；它不清楚或没有什么用处，特别是第一部分。我没有投反对票，但很可能是因为OP没有努力或试图解决它。我只是好奇。不必是这个具体的例子。但我想知道如何将事件侦听器附加到某个父元素，并侦听其子元素上的事件。

// select all UL elements with the `mylist` class
var uls = document.querySelectorAll('ul.mylist');

// Iterate the collection, and bind the `click` handler
for (var i = 0; i < uls.length; i++)
    uls[i].addEventListener('click', handler, false);

// The `click` handler iterates starting with `event.target` through its
//   ancestors until the bound element is found. Each element matching the
//   "LI" nodeName will run your code.
function handler(event) {
    var node = event.target;
    do {
        if (node.nodeName === "LI") {
            // RUN YOUR CODE HERE
        }
    } while (node !== this && (node = node.parentNode));
}