最近在复习JS的一些内容，感觉前面自己学得都很乱，以此打算开始写博客来好好梳理一下自己的知识体系...内容不定，在自己学得还算理解的情况下【本人菜鸡无疑】，我就会到这里记录下来。
大家都知道，在JS中要完成一个页面交互效果需要三步，获取事件待绑定元素，添加事件监听、绑定事件处理函数，触发事件；我之前一直对于JS的绑定事件学得模模糊糊，可以用什么函数就随意用了，尤其是学到JQuery之后，.onclick 和 .click 和 .on这些什么的就越来越乱，所以就下定决心了从源头开始研究，以下我就从三部分来说一下绑定事件相关的知识点：
①DOM中的事件处理函数绑定方式：总结：DOM原生的事件处理函数一般使用的有两种，添加事件监听elem.addEventListener(三个参数) 、事件处理函数elem.onclick()... 其中addEventListener()可以给同一个元素多次绑定，onclick此类的事件处理函数则只能绑定一次，多次绑定会覆盖；
②JQuery中的事件处理函数的绑定：总结: $().on(四个参数) 、$().click()当面对需要给父元素动态添加子元素这种情况时，click这类的处理函数就不适用了，新添加的元素将不会有事件，需要使用on；
③事件冒泡、事件捕获机制【事件委托是什么？】：总结: addEventListener()的第三个参数useCapture【默认为false】，此值为false时，默认事件冒泡；此值为true时，为事件捕获，在$().on()中默认事件冒泡；事件委托就是利用了事件冒泡，将需要子元素触发的事件函数绑定在父元素上【即委托给父元素】，之后通过冒泡先触发子元素，免去了遍历，优化了效率。
以下先开始说第一部分的内容：DOM中两种处理函数绑定方式有什么区别
我们先来看一下底层结构：
从上面可以看到,onclick此类的事件处理函数为待绑定元素的属性,而addEventListener并不是属性，因此我们可以给同一个元素绑定多个事件监听，却不能绑定多个事件处理函数；我们可以通过以下的代码进行验证：
此外我们也可以看到，在添加事件监听中，事件名也与事件处理函数的函数名不一致了，这点也需要注意；另外其实在addEventListener()这个函数中可以写三个参数，分别为event、function、useCapture，这个第三个参数，在第三点内容中会讲到；
以下开始说第二部分的内容：JQuery中的事件处理函数绑定...
一般来说JQuery会用两种方式绑定事件处理函数，第一种即$().click()及其他类似处理函数 ，第二种就是$().on()了，$().on()/.off()也是JQuery推荐的事件处理函数；我们可以先看一下$().on()的用法，$parents.on('事件名','selector',function)，他是将事件绑定在父元素上的，当给父元素动态添加子元素时，click这类函数并不能给新的子元素绑定事件，我们可以通过上面的代码来验证，可以看到动态添加子元素之后，只打印了一次2，而没有打印1，即事件并没有绑定上，所以使用on给父元素绑定事件，之后通过冒泡新的子元素也会有对应的方法；那么问题又来了，前面也提到了冒泡，这里又说到了冒泡，到底冒泡是什么呢？
以下开始第三部分的内容：事件冒泡，事件捕获以及事件委托
我们先来看一下事件冒泡，前面我们提到了 addEventListener有三个参数，那么到底这第三个参数是怎么用得呢？我们可以看一下实例。
第一张图，我们没有给父元素的addEventListener第三个参数赋值，所以它是默认值，为false，点击子元素，输出了child，parent，即由内至外，此为冒泡；
第二张图，我们给父元素的addEventListener的第三个参数改为true，点击子元素，输出了parent，child，即由外至内，此为捕获；
即addEventListener的第三个参数的意思为是否执行冒泡事件，默认就是执行的，利用冒泡事件可以在实际项目中起到妙用，事件委托就是利用了事件冒泡，事件委托的专业名词解释即为 利用事件冒泡处理动态元素事件绑定的方法；
需要注意的是在$().on()中，$parents.on('事件名','selector',function) 如果不写子选择器'selector'，那么就是没有事件委托的。
最后给大家提的是有些情况下，是不需要触发事件冒泡的，这个时候就可以在子元素上加上一条JQuery的 e.stopPropagation()，这样就可以阻止元素默认的冒泡行为了；
感谢阅读！