checkbox notes

偷窥MouseEvent的时候，就把栗子抄了过来

1.

1
2
3
4
5
6
7
8
9
10
11
<p><label id="label"><input type="checkbox" id="checkbox"> Checked</label>

<script>
	var evt = new MouseEvent("click", {
		bubbles: true,
		cancelable: true,
		view: window
	});
	var cb = document.getElementById("checkbox");
	cb.dispatchEvent(evt);  
</script>

这里调用了一次 cb.dispatchEvent(evt); 就可以选中复选框。可是我又疯狂的调用 cb.dispatchEvent(evt); 没有什么效果。

然后我只能把 evt 再赋值一次，然后 dispatch 就好了。每次dispatch之前，evt要是全新的。这样才能选中、取消。

不知为何，每次需要刷新 evt？ 和 evt.timeStamp 有关系吗？对这里的自定义事件不是很清楚。

2.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<p><label id="label"><input type="checkbox" id="checkbox"> Checked</label>

<script>
    label.addEventListener('click', function (e) {
        if(e.target===this) {
            console.log('label target');
        } else {
            console.log('label capture')
        }
    }, true);

    label.addEventListener('click', function (e) {
        if(e.target===this) {
            console.log('label target');
        } else {
            console.log('label bubble');
        }
    }, false);


    window.addEventListener('click', (e) => {        
        console.log('window capture');        
    }, true);

    window.addEventListener('click', (e) => {        
        console.log('window bubble');       
    }, false);
</script>

点击 checkbox，没什么大惊小怪的。
点击 label，可以看出：处理完了label上的事件，会再触发一次 checkbox 的 click事件。

  1. 做点笔记
    1
    <body style="height:1000cm; width:250cm;">
1
2
<!doctype html>
<body style="height:1000cm; width:250cm;">
1
2
<!doctype htmlxxoo>
<body style="height:1000cm; width:250cm;">

这几种情况下，document.documentElement.clientHeight 值是不一样的, document.documentElement.clientWidth 却是一样的。我只是想拿到 viewport 的值。我自己的感觉不知道说啥了。这都啥和啥啊？

备忘：
screen.width 在 FF 和 Chrome 指的就不一样；缩放一下页面，就看出来了。

不要提物理像素点了。 操作系统的 分辨率 也是一层抽象，应用程序就当是 OS 给你提供的 物理像素数据 吧。 还有css单位啥的。将这些东西都放在不同的坐标空间中，关系一目了然。莫再被 devicePixelRatio 等概念糊弄了。莫再提，莫再讲。