click & form & iframe & target

by redky

HTML

<form action="https://www.google.com/" target="">
    <input type="text" />
    <input type="submit" id="button" value="submit" />
</form>
<div class="result"></div>

CSS

/*
    存在 Target 属性时, 就会在新窗口打开.
*/


/*
    以下, 事件绑定到同一元素时:
    事件 0 中, 函数绑定在捕获阶段.
    使用 e.stopImmediatePropagation() 会停止运行其它绑定函数.

    事件 1 中, 虽然存在 location.href = 'xxxx';
    但是如果不阻止默认行为, 那么跳转无效.

    事件 1.1 中, 在冒泡阶段执行 e.stopImmediatePropagation() 
    会停止所有函数执行 - 函数包括 true/false 阶段.

    事件 2/2.1 写法相同.
    导致 2.1 会覆盖 2 事件.
    结果, 只 alert('event 2.1');

    事件 3 存在时, 因为阻止 default 行为.
    那么执行 location.href = 'xxxx'; 有效

    事件 3/4/4.1 都会执行.
    说明标准事件写法 element.addEventListener 不会产品覆盖.

    事件 4.1/4.2/4.3 函数虽然绑定在捕获阶段.
    但是由于后绑定, 还会在冒泡阶段执行函数.
    原因: 基于同一元素
*/

JavaScript

var $ = function (s) {
    return document.querySelector(s);
};

var button = $('#button');

// 事件 0
button.addEventListener( 'click', function(e) {
  // e.stopImmediatePropagation();
}, true );

// 事件 1
button.addEventListener('click', function () {
    alert('addEventListener');
    location.href = 'http://haha.sogou.com';
    alert('log');
}, false);

// 事件 1.1
button.addEventListener( 'click', function(e) {
    e.stopImmediatePropagation();
}, false );

// 事件 2
button.onclick = function (e) {
    alert('event 2.0');
};

// 事件 2.1
button.onclick = function (e) {
    alert('event 2.1');
};

// 事件 3
button.addEventListener('click', function (e) {
    // e.preventDefault();
}, false);

// 事件 4
button.addEventListener( 'click', function(e) {
    alert( 'event 4.0' );
}, true );

// 事件 4.1
button.addEventListener( 'click', function(e) {
    alert( 'event 4.1' );
    e.stopImmediatePropagation();
}, true );

// 事件 4.2
button.addEventListener( 'click', function(e) {
    alert( 'event 4.2' );
}, true );

// 事件 4.3
button.addEventListener( 'click', function(e) {
    alert( 'event 4.3' );
    e.stopImmediatePropagation();
}, true);

document.addEventListener( 'click', function(e) {
    e.stopImmediatePropagation();
}, true );

// button.click();