官方文档

关键词

事件像素鼠标小括号组件逗号点击事件项目源码

文字记录

好的，下边我们来介绍一下事件处理。那我们这里边的事件处理和我们在网页开发里边HTML里边的 Javascript 事件处理其实是非常类似，比如说当你点击一个节点的时候，也是会触发mousedown、mouseup 等事件，然后键盘事件也是叫 keyup 、keydown 如果你是触摸屏，也就是在手机上运行的话，那触摸事件叫 touchstart、touchend 等等。那么具体的这个用法我们会在课程里边用到的时候才会对它进行说明。
image.png
现在我们就来看一个简单的鼠标点击事件的处理。 我们把这个 pigscript 的这个脚本打开来，这里边我们添加了一些事件处理。
image.png
可以在模拟器里边来运行，看一下我们现在的演示效果，这个节点当你点击它的时候，当你点击它的时候，发现有一个动作发生了，这个节点向左移动了 200 个像素，那么这个鼠标点击事件是怎么样来实现的呢？那这个就是我们这节课的代码了，我们可以直接的在这个 VSCode 里边打开pigscript的这个脚本文件。
image.png
image.png

  • 添加了哪些呢？
  • 首先在这个初始化的时候，也就是在 onload方法里边，我们添加了这么一段 **this.node on **
  • 然后事件的名字 mousedown 就是鼠标点击事件
  • 然后是哪个处理方法呢？ this.move left 按照这个方法来处理。
  • 最后加上 this

最开始的时候，你可以直接把我这个代码给抄过去，然后在理解之后我们再逐个手写一下，你看在这里边

  • this 就表示当前组件对象
  • 然后 this.node 就是当前组件所对应那个节点，就是当前这个节点，
  • on 也就是当这个事件发生的时候，会触发会调用这个处理方法，
  • 我们把这个方法的名字给传进来， this.moveLeft ，那注意，这里边你不要加小括号，如果加的话那就错了。这里边传递的是方法的名字，并不是说要调用它
  • 最后一个this把它给加上来，总之就这么样来写一下。

然后我们来观察一下这个处理方法 moveLeft是怎么样来写的，在下边我们添加了一个自己的方法，然后在这里边我们是想让这个节点向左移动，那么就调用 this.node.x 也就是它的 X 坐标，减等于200，也就是水平方向向左移动了 200 个像素，大概就这么样来写的。
image.png
那最后我们在执行的时候就看到了我们刚才那个效果，好的我们再执行看一下我们的效果。首先得到了一个节点，小猪，当我们点击它的时候会运行，当点击它的时候触发这个事件。然后运行 moveLeft 的这个方法。然后 moveLeft 的方法里边将这个节点的坐标左移了 200 像素，大概就是这么样一个意思。

好的，现在我们再来从头演示一下
首先添加了一个方法叫 moveLeft 按照他这个写法我们就照葫芦画瓢，这是方法名，括号，然后大括号
image.png
在这里边 this.node 就是当前节点，然后再.X ，就它的 X 坐标，然后减等于，也就是减少 200 个像素
image.png
然后下边在onLoad的方法里边初始化一下，this.node.on 也就是当一个事件触发的时候，什么事件 mousedown 这个事件，好的

然后第二个就是回调方法的名字this.moveLeft，第三个参数就是 this，这样就可以了
image.png
那么你 在写的时候再强调一下，**this.moveLeft**不能加小括号。然后这个末尾，当你定义一个方法的时候，方法的末尾是不需要加逗号，也不需要加分号的
image.png
因为这是 TypeScript 他就是这么样来写的，我们照葫芦画瓢把它写出来就可以了，这是事件的处理，如果是其他事件的话也是一个样子的，在这里边改成其他事件的名字就可以了。

好的，我们这节课就演示这么多，大家照着来写一下，那么所要需要注意的地方刚才已经说了，这个小括号的问题你不要加上，如果还有其他问题的话，可以到我们提供的群里边来讨论一下。好的，我们这节课就讲这么多，谢谢。