Question

在JavaScript中，addEventListener（）方法的用法如下：

object.addEventListener("click", myScript);

在Scala.js中：我有一个画布，我想只听画布上的点击，而不是整个文档。在Scala.js.dom库中，addEventListener定义为：

 def addEventListener(`type`: String, listener: js.Function1[Event, _], useCapture: Boolean = ???): Unit = ???

我不确定＆＃34; useCapture＆＃34;是指。但我试过了：

dom.document.getElementById("canvas").addEventListener("click", {
(e:dom.MouseEvent) => { /*do something*/ }
}, false)

我收到的错误消息：

found   : org.scalajs.dom.MouseEvent => Unit
required: scala.scalajs.js.Function1[org.scalajs.dom.Event, _]

有人可以解释一下＆＃34; useCapture＆＃34;是指，以及如何在Scala.js中正确使用addEventListener？

Answer 1

您收到的错误消息是完全正常的类型错误：addEventListener需要js.Function1[dom.Event, _]，但您要给它js.Function1[dom.MouseEvent, _]。由于第一个参数处于逆变位置，因此不会进行类型检查。

有两种解决方案：要么让你的功能采用dom.Event，然后再投射到dom.MouseEvent，就像这样：

canvas.addEventListener("click", { (e0: dom.Event) =>
  val e = e0.asInstanceOf[dom.MouseEvent]
  ...
}, false)

或者您使用onclick更准确地输入：

canvas.onclick = { (e: dom.MouseEvent) =>
  ...
}

Answer 2

事件捕获是EventListener在其上注册的过程事件目标的祖先可以拦截给定类型的事件在它们被事件的目标接收之前。 Capture的运作方式树的顶部，一般是文件，向下，使它成为与起泡相对称，如下所述。连锁，链条从树顶到事件目标的EventTargets是在最初发送事件之前确定。如果修改在事件处理期间发生在树上，事件流将继续基于树的初始状态..

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-basic

window.addEventListener("click", function(){console.log('something1')}, false);
window.addEventListener("click", function(){console.log('something2')}, true);

订单将是

2（首先定义，使用capture = true）

1（使用capture = true定义第二个）

Ref 2

关于第二个参考的注意事项：订单无法保证！

捕获阶段

在由目标节点处理事件之前，一个目标祖先可以处理事件的过程。

REF 3

Scala.js：使用addEventListener向对象添加事件

2 个答案: