JS中的事件冒泡
阿新 • • 發佈：2018-11-12
js中的事件冒泡指的是：多個元素巢狀的時候，它們就會有層次關係，當這些元素註冊了相同的事件時，如果其中一層的元素觸發了這個事件，可能導致其它層的元素也觸發這個事件，這樣一來就會造成混亂。這個情況就是事件冒泡。為了避免這種混亂的發生，我們要想辦法阻止事件冒泡的發生。
看一個事件冒泡的例子：
上面是三個相互巢狀的div，樣式程式碼這裡省略了，js程式碼中，分別為這三個div註冊了onclick點選事件，但是由於它們是相互巢狀的，因此在點選最外面的div的時候，使得三個div全部觸發了點選事件，控制檯打印出了三者的id，這就是事件冒泡的結果。
當然我們不想要這種結果，於是有了下面的阻止冒泡的方法：
阻止事件冒泡的方法就是分別為每個事件傳入一個引數e，然後在事件程式碼中加入一句e.stopPropagation();就是這麼簡單。
但是這種方法也有缺憾，就是它能夠相容chrome和firefox以及IE9以上的瀏覽器，但是不能相容IE8及以下的瀏覽器。
IE8及以下的瀏覽器阻止事件冒泡的語句為window.event.cancelBubble=true;這種方法chrome也支援，但是firefox不支援。