addEventListener的第三个参数

W3C DOM裡用来新增触发事件的函数叫AddEventListener，不过我一直不知道这个函数的第三个参数是要做什麼用的，总是随便设，也没发现差异再 哪，前两天看ppk on javascript终於看到说明了，至於很久以前就有的DOM的标準文件，我其实根本没去找过这个参数的资讯。

这个参数叫做useCapture，是一个boolean值，就是true or false，如果送出true的话就是瀏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是 false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数，我想，看图会比较清楚。

像这张图所显示的，我的范例有两层div元素，而且都设定有click事件，一般来说，如果我在内层蓝色的元素上click不只会触发蓝色元素的 click事件，还会同时触发红色元素的click事件，而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是 false，那就会使用bubbling，他是从内而外的流程，所以会先执行蓝色元素的click事件再执行红色元素的click事件，如果是true， 那就是capture，和bubbling相反是由外而内，会先执行红色元素的click事件才执行蓝色元素的click事件。附上两个范 例，capture和bubbling，两个档案只有差在此一参数不同，可以发现事件的发生顺序不一样了。

那如果不同层的元素使用的useCapture不同呢？就是会先从最外层元素往目标元素寻找设定为capture的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling的事件。

 

 原文地址 http://blog.othree.net/log/2007/02/06/third-argument-of-addeventlistener/