Vanilla JavaScript instead of jQuery - ready, on, click and

Question

I in jQuery：

$(document).ready(function() {
$(document).on('click', "[id$='someId']", function () {
console.log($(this).val());
})
})

我怎样才能用纯JavaScript编写它？

$(document(.ready(function((

我应该在纯JavaScript中使用"ready"吗？

$(文档(.on

如何使用"开"？我必须添加动态元素，所以在jQuery中我必须使用"on"。

我想按照 ES6 写这个。

Answer 1

使用addEventListener而不是on：

document.addEventListener('DOMContentLoaded', function () {
document.body.addEventListener('click', function (e) {
if (e.target.matches("[id$='someId']")) {
console.log(e.target.value);
}
});
});

事件委托使它稍微复杂一些，但它应该可以解决问题。

Answer 2

$(document(.ready(function((

// DOMContentLoaded
// @see https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', function (event) {
console.log('DOM fully loaded and parsed');
});

$(文档(.on

document.addEventListener("click", function(event) {
var target = event.target;
if (target.id === 'a') {
// do something.
} else if (target.id === 'b') {
// do something.
}
});