js/jQuery绑定将来生成的事件

jQuery3.2.1
事件监听，添加版本1.7+

on( events [, selector ] [, data ], handler(eventObject) )

大多数浏览器事件冒泡, 或者 传播，都是由内到外的，从在文档最深处的元素( 事件目标 event target)开始， 一路传递到body和document元素。（注：事件冒泡简单的说就是，在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。）在Internet Explorer 8和更低，一些事件，如change 和 submit本身不泡沫，但 jQuery 为了跨浏览器一致性， jQuery 在这些事件上模拟了冒泡行为。

如果省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的

当提供selector参数时，事件处理程序是指为委派 事件（注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。

事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用.on()的时候，他们必须在页面文档中已经存在。为了确保目前的元素可以被选择的（注：即，存在），最好是在 document 的 ready 事件中进行事件绑定。如果新的HTML被注入页面时，新的HTML放置到页面后，事件会绑定到匹配选择器（selector参数）的元素。或者，使用委派事件绑定事件处理程序，如下所述。

委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件(也就是给新添加的文档绑定事件，不然绑定的事件不起作用)。 在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。 例如，这个已经存在的元素可以是 Model-View-Controller（模型 - 视图 - 控制器）模式中 View（视图） 的一个容器元素，或document。如果想监视所有文档中的冒泡事件的话。在加载任何其它 HTML 之前，document 元素在 head 中就是有效的，所以您可以安全的在 head 中进行事件绑定，而不需要等待文档加载完。

除了可以给未创建的后代元素绑定事件外（即上面提到的优势），代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小

HTML

点击生成按钮

js/jQuery

$('.num1').click(function(){
		$('.newbtn').html("点击");
});
$('.outerclick').on('click','.innerclick',function(event){
	event.stopPropagation();  // 防止冒泡到外层的点击事件，如果外部有点击事件
	alert("内部的绑定事件");
});

//js
document.getElementById('newparent').addEventListener("click",function(event){
		var event = event || window.event;
			event.stopPropagation();
		var target = event.target || event.srcElement;
			alert(target.tagName);
		if(target.tagName === "BUTTON"){
				alert(target.className);//target.classList 根据这些值判断来写处理的事件即可
				alert("未来事件绑定");
		}					
	})