JavaScript handle Event
最近接触
web
事件比较多,于此记录下部分JavaScript
对Webdom
的姿势以及需要注意事宜。
事件命名
尽量以 handle
, init
等表示处理动词 开头,中间以 处理对象 衔接,最后由处理事件类型结尾。如下:
1 | type HandleEvent = (evt: Event) => void; |
事件注册的方式
我们来对比几种事件注册的方式:
Html
中:
1 | <button type="button" onclick="handleTargetClick">点击我试试</button> |
JavaScript
中:
1 | type target = Element | Document; |
第一种是我比较喜欢的绑定方式,它显性绑定了处理事件的执行方法到 target
上, 我们很容易理解。
方式二可以说是隐式绑定,相对于第一种方式,你得自己找出你要绑定的 target
。
需要注意的是,如果你调用了两次的话,第二次会把第一次覆盖掉。
方式三区别于方式二的主要地方在于:
- 可以绑定多个事件处理,既绑定了多个不同的事件方法会并存。
- 绑定了相同的事件处理后,自动选择靠后的那一个 (不对匿名函数作用)
- 指定了事件触发的阶段(捕获 or 冒泡)
强烈建议使用这种绑定方式
强烈建议不要使用匿名函数绑定
我们可以绑定多个事件处理,如下:
1 | const handelTargetClickAgain: HandleEvent = (evt: Event) => { |
如果你运行了这段代码,你会惊讶的发现,在控制台打印的第一条 string
竟然是 handle click again
,而不是 you just clicked!
。WTF,你可能会跳起来大喊: “What hell was that? Are you kidding me?”。
这就涉及到第三个参数了,第三个参数规定是一个 boolean
,默认 false
。如果你指定它为 true
,事件处理将在 捕获 阶段触发,反之则在 冒泡 阶段触发。而这个捕获和冒泡怎么理解呢?事件的触发,先捕获,在冒泡。也就是说,捕获在前,冒泡在后。
上面代码中,由于我们在绑定 handelTargetClickAgain
指定了捕获阶段,所以它会先触发。
事件阻止冒泡
我们发现这些一连串的事件处理放在了一起,他们之间的业务关系些许复杂,会有特殊情况发生。 (你永远不知道你的甲方会提出什么需求 ),比如:某些特殊的情况就不要 handelTargetClickAgain
了。
这个时候就需要用到 阻止冒泡 stopPropagation
| preventDefault
了,我们可以把上述代码稍加修改。
1 | const handleTargetClick: HandleEvent = (evt: Event) => { |
如此,对事件处理更上一层楼。
enjoy and happy coding!