完整word版iH5初级教程掌握H5的事件机制

iH5初级教程：掌握H5的事件机制

简介：

iH5的事件工具有很多的用处，而事件工具是很多中交互或互动的网页中必备的工具，当然这h5页面也不例外，这也就是平常我们在制作网页交互逻辑的工具。工具：

1.微信H5页面的制作素材，包括图片，音乐，文案

2.可以到iH5官网上选择自己喜欢的作品来获取灵感。

步骤：

1.先来看看事件的概念，h5页面有很多的元素，包括图片、视频、音频等，那么需要它有一些动态的效果，这就需要有时间的概念和交互的关系。所谓交互逻辑就是这些素材间的互动关系，例如点击视频开始播放、文字撞击使图片被撞走，这些都是由事件触发的。

2.开始使用事件。首先在舞台下添加图片，选中对象树中的矩形图片

，点击工具栏事件工具，添加事件，这样事件作为这个矩形图的子对象，3.左边我们可以看见事件1的三个选框。

4.触发条件可以自由选择，实际上就是这个对象有一个什么样的操作的时候或者有一个什么动作的时候事件会被触发，建议PC端选择点击，手机端选择手指按下。在这里我们选择点击是最简单的。

5.目标对象的选择指的是事件触发的对象，可以通过选框选择舞台、矩形或者是圆，在对象多的时候可以使用“从舞台或对象选择”，点击它可以直接在右侧对象树的舞台上面点击选择对象，在这里我们选择

圆。．

6.选择了圆以后会有很多的动作可以选择，这里我们选择让它交替显示，这样的话就可以在点击矩形的时候让圆不断地显示和隐藏。

每个对象下都可以兼有多个触发条件，其中哪一个触发条件符合触发事件，目7.

标对象的动作就会开始。更多的零代码的交互设计可以登陆iH5的官网进行学习。

知识点：

1、事件：事件对象是iH5编辑器中制作互动效果的重要工具，它用来设定对象与对象之间的相互控制关系，比如，当一个图片对象被点击的时候，一个视频对象会开始播放。添加一个事件的过程包括：选中预添加事件的父对象,该对象即

为触发对象，如果该对象可以设置触发条件，工具栏的事件组件会点亮，点击事件工具图标即可添加。由于事件对象也是一类功能性的对象，它不能在舞台上被显示，因此你必须通过对象树来选中它，进而通过属性面板来对它进行进一步编辑。

2、请注意，添加事件对象的位置非常重要，即你选择哪一个对象来作为新添加事件的父对象，因为在iH5编辑器中，一个事件的父对象会被自动设定为这个事件的触发对象，即这个触发对象满足某一个触发条件时，这个事件的执行。换一句话说，在任一个对象下添加的事件即以这个对象为触发事件。要预览一个事件的效果，你需要预览案例来进入案例播放状态。

3、在一个对象下，可以添加多个事件对象，即一个对象可以作为多个事件的触发对象，事件由下往上发生，即排在最下面的事件先发生。比如，点击一个图片对象时，会触发一个视频对象开始播放，同时触发一个网页对象在滑出屏幕。