event.stopPropagation 和event.preventDefault 作用

事件执行流

Event capturing(事件捕获)

When you use event capturing

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

元素1先触发，元素2其次

Event bubbling（事件冒泡）

When you use event bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

元素2先触发，元素1其

Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.

                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

**冒泡：**子元素点击会弹出警告框 父元素点击会打印日志 如果点击子元素区域（这个区域自然也会触发父元素的点击事件） 时 父的功能也执行就是扩散， 向上冒泡， 不冒泡就是父的功能不执行

浏览器赋予元素的默认行为：比如：

<a href='https://stackoverflow.com' click='return false'> //点击后打开新链接的行为

区别

event.preventDefault()

• 阻止浏览器赋予元素的默认行为
• 不阻止事件的冒泡

event.stopPropagation()

• 不阻止浏览器赋予元素的默认行为 

• 阻止事件的冒泡；

• return false

• 不同情况效果不同

内嵌的js:

• 阻止浏览器赋予元素的默认行为

• 不阻止事件的冒泡；

JQuery:

$('a').click(function(event) {    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });

• 阻止浏览器赋予元素的默认行为

• 阻止事件的冒泡；

DOM event handler:

 function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

• 啥也没干， 什么也没阻止。