Javascript相当于$ .on

作为一个（ 不幸的是 ）学习jQuery不是原始 javascript我现在正在花时间用原始javascript替换我的所有代码。 不，这不是必需的，但这对我来说是一种更容易学习的方式。 我面临的一个问题是使用原始javascript转换我的所有$(document).on 。 我的网站是一个“单页面应用程序”，我的大部分实际HTML都在不同的文件中，这些文件是通过Ajax请求调用的。 所以，我的问题是，我如何查找从动态加载的内容中触发的event ？ 我假设我必须向他们添加一个onclick事件，但是jQuery如何在不需要onclick event情况下完成它？

Answer 1

本机API中的绑定处理程序是使用addEventListener() 。

要模拟jQuery的事件委托，您可以相当轻松地创建一个使用.matches()方法来测试您提供的选择器的系统。

 function delegate(el, evt, sel, handler) { el.addEventListener(evt, function(event) { var t = event.target; while (t && t !== this) { if (t.matches(sel)) { handler.call(t, event); } t = t.parentNode; } }); } 

可能有一些调整，但基本上它是一个函数，它接受元素绑定，如document ，事件类型，选择器和处理程序。

它从e.target开始并遍历父e.target ，直到它到达绑定元素。 每次，它检查当前元素是否与选择器匹配，如果是，则调用处理程序。

所以你会这样称呼它：

 delegate(document, "click", ".some_elem", function(event) { this.style.border = "2px dashed orange"; }); 

---

这是一个现场演示，它还添加了动态元素，以显示新元素也被拾取。

 function delegate(el, evt, sel, handler) { el.addEventListener(evt, function(event) { var t = event.target; while (t && t !== this) { if (t.matches(sel)) { handler.call(t, event); } t = t.parentNode; } }); } delegate(document, "click", ".some_elem", function(event) { this.parentNode.appendChild(this.cloneNode(true)); this.style.border = "2px dashed orange"; }); 

 
 
  CLICK ME  
  

Answer 2

这是一个相当于 on()的javascript

jQuery的

 $(document).on('click', '#my-id', callback); function callback(){ ...handler code here } 

使用Javascript

 document.addEventListener('click', function(event) { if (event.target.id == 'my-id') { callback(); } }); function callback(){ ...handler code here } 

使用这种方法，想法是使用event.target 。 当然，随着选择器的改变，你的代码必须更多地参与其中