JavaScript handle Event

最近接触 web 事件比较多，于此记录下部分 JavaScript 对 Webdom 的姿势以及需要注意事宜。

事件命名

尽量以 handle , init 等表示处理动词 开头，中间以 处理对象 衔接，最后由处理事件类型结尾。如下：

type HandleEvent = (evt: Event) => void;
const handleTargetClick: HandleEvent = (evt: Event) => {
    console.info('you just clicked!');
}

事件注册的方式

我们来对比几种事件注册的方式：

Html 中:

1	<button type="button" onclick="handleTargetClick">点击我试试</button>

JavaScript 中：

1
2
3

type target = Element | Document;
target.onclick = handleTargetClick;
target.addEventListener('click', handleTargetClick, false);

第一种是我比较喜欢的绑定方式，它显性绑定了处理事件的执行方法到 target 上，我们很容易理解。

方式二可以说是隐式绑定，相对于第一种方式，你得自己找出你要绑定的 target。

需要注意的是，如果你调用了两次的话，第二次会把第一次覆盖掉。

方式三区别于方式二的主要地方在于：

可以绑定多个事件处理，既绑定了多个不同的事件方法会并存。
绑定了相同的事件处理后，自动选择靠后的那一个 (不对匿名函数作用)
指定了事件触发的阶段(捕获 or 冒泡)

强烈建议使用这种绑定方式

强烈建议不要使用匿名函数绑定

我们可以绑定多个事件处理，如下：

const handelTargetClickAgain: HandleEvent = (evt: Event) => {
    console.info('handle click again');
}

target.addEventListener('click', handleTargetClick, false);
target.addEventListener('click', handelTargetClickAgain, true);

如果你运行了这段代码，你会惊讶的发现，在控制台打印的第一条 string 竟然是 handle click again，而不是 you just clicked!。WTF，你可能会跳起来大喊: “What hell was that? Are you kidding me?”。

这就涉及到第三个参数了，第三个参数规定是一个 boolean，默认 false。如果你指定它为 true，事件处理将在捕获阶段触发，反之则在冒泡阶段触发。而这个捕获和冒泡怎么理解呢？事件的触发，先捕获，在冒泡。也就是说，捕获在前，冒泡在后。
上面代码中，由于我们在绑定 handelTargetClickAgain 指定了捕获阶段，所以它会先触发。

事件阻止冒泡

我们发现这些一连串的事件处理放在了一起，他们之间的业务关系些许复杂，会有特殊情况发生。 (你永远不知道你的甲方会提出什么需求 )，比如：某些特殊的情况就不要 handelTargetClickAgain 了。

这个时候就需要用到 阻止冒泡 stopPropagation | preventDefault 了，我们可以把上述代码稍加修改。

const handleTargetClick: HandleEvent = (evt: Event) => {
    console.info('you just clicked!');
}
const handelTargetClickAgain: HandleEvent = (evt: Event) => {
    console.info('handle click again');
    // 模拟特殊情况
    if (Math.random() > 0.5) {
        evt.stopPropagation(); // 阻止时间想上冒泡，即不会触发 handleTargetClick
        // evt.preventDefault(); // 阻止时间的默认动作
    }
}

target.addEventListener('click', handleTargetClick, false);
target.addEventListener('click', handelTargetClickAgain, true);

如此，对事件处理更上一层楼。

enjoy and happy coding!