在现代JavaScript中，事件是一个非常重要的概念。事件处理程序可以帮助我们捕捉特定类型的事件，诸如鼠标单击，鼠标移动等等。然而，处理事件的一个重要问题是“事件冒泡”，事件冒泡是指当一个元素触发了某个事件时，其祖先元素上将会依次触发该事件。这种机制有时候会导致我们的网页出现意想不到的问题，比如一个按钮点击后，整个页面都发生了一些意外的变化。为了解决这个问题，我们可以使用JavaScript提供的“cancelBubble”方法。

事件冒泡机制的本质是由于在JavaScript中有一个事件流的概念，事件流是指用户与网页交互时，浏览器将生成一个事件流来描述事件的所有阶段，包括捕获阶段和冒泡阶段。在一个事件流中，当一个元素触发某个事件时，这个事件将被传递到其祖先元素，直到整个文档层次结构的最高级元素。这个机制可以方便地为我们提供事件处理程序，但是也可能会导致事件处理程序的冲突或者无法预料的行为。

使用“cancelBubble”可以避免这种问题。cancelBubble是一个事件对象的属性，它可以用来阻止事件在DOM层次中进一步传播，从而避免冒泡行为的发生。当我们使用事件处理程序来处理某个事件时，我们可以在处理方法中使用该属性来阻止事件冒泡。下面是使用cancelbubble来阻止事件冒泡的一些常见场景：

场景一：停止冒泡

事件冒泡的一个问题是，如果不加以处理，可能会导致重复触发事件，进而导致页面出现不需要的效果。如果我们在一个元素上绑定了事件处理程序，在其祖先元素上也绑定了同样的事件处理程序，当我们点击元素时，事件将会在祖先元素和当前元素之间来回传递，即产生了一次事件冒泡，这往往会导致事件被触发多次，从而产生不想要的结果。为了解决这个问题，我们可以使用cancelbubble来防止事件冒泡。

下面是一个例子，在这个例子中，当我们点击按钮时，按钮事件的冒泡便会被停止，从而确保只有按钮事件被触发。

```html