事件监听

开发工具与关键技术:VS 事件监听
作者:沈金凤
年级:18级(4)班
撰写日期:2019年5月20日

在很多时候我们都需要用到事件的监听,例如方法layim.on(event,callback)用于LayIM事件监听,接受两个参数,第一个参数是event即事件名,第二个参数callback即事件回调。和 ready事件的事件名称是ready用于监听LayuIM初始化就绪,由于主面板的渲染,需建立在init接口请求完毕的基础上,而一些操作必须等到主面板渲染完毕后才能操作,所以这个时候就可以放入ready事件的回调体中来执行,其回调接受一个object类型的参数,携带一些基础配置信息、我的用户信息、好友/群列表信息、本地数据库信息等等:
注意:以下情况不会触发ready事件,即代码无需写在ready里面,简约模式(即brief:true时)不会触发该事件,init直接赋值mine、friend的情况下(只有设置了url才会执行ready事件)。如图
在这里插入图片描述

在线状态切换的监听,事件名:online,看到主面板你的呢称后的icon么,没错就是它,当前支持“在线”、“隐身”两种状态切换,分别以online和hide的string类型的值传递回调参数,如下:
在这里插入图片描述

此时,你可以通过Ajax将这个状态值记录到数据库中了。
还有语法:table.on(‘event(flter)’,callback),event为内置事件名,filter为容器lay-filter设定的值,table模块在Layui事件机制注册了专属事件,如果你使用layui.onevent()自定义模块事件,请勿占用table名,默认情况下,事件所监听的是全部的table容器,但如果你只想监听某一个容器,使用事件过滤器即可,假设原始容器为:

那么这所事件监听写法如下:
在这里插入图片描述

有时候我们在做项目时也会用到监听事件,不过一般都是用到行的单击或双击监听来实现行的点击事件,监听行单击事件使用的是:row,而双击则是rowDouble:如下:
在这里插入图片描述

就如上图所示先监听事件然后获取点击行数据,标注选中样式,单击要选中的 单选框单击选中或取消复选框,这样行的监听事件就简单的完成了,结果如下:
在这里插入图片描述

上图就是每当你选中每一行它都会用到监听事件来实现你所需要的结果。
监听复选框选择:点击复选框时触发,回调函数返回一个object参数,所需要的内容如下:
在这里插入图片描述

监听更换背景皮肤事件名:setSkin当点击更换背景皮肤是触发,返回特定的图片文件名和是src路径,代码如下:
在这里插入图片描述

还有很多不同类型的监听事件,例如:监听发送的信息、监听修改签名、监听接受的信息、监听查看群员、监听聊天窗口的切换、监听头工具栏事件、监听行工具事件、监听排序切换等等。