js 查看元素已绑定事件
以 element Tooltip 文字提示为例:
在控制台中执行:
getEventListeners(document.getElementsByClassName("el-tooltip")[0])
猜测是 mouseenter 或者 mouseover 触发的事件导致的文字展示,发现绑定的事件中有 mouseenter
找到调用的 mouseenter 目标函数,点击查看:
把 js 代码拷贝到格式化工具中,格式化后,查找方法 handleShowPopper:
(我用的是在线格式化工具:http://tool.chinaz.com/Tools/jsformat.aspx ,格式化后把代码拷贝到本地记事本中)
发现这个方法只是修改了参数 showPopper
再看元素 vue 中相关的方法:
document.getElementsByClassName("el-tooltip")[0].__vue__
发现有个参数 showPopper
修改参数值:
document.getElementsByClassName("el-tooltip")[0].__vue__.showPopper=true
document.getElementsByClassName("el-tooltip")[0].__vue__.showPopper=false
可见控制 showPopper 的值就可以控制tooltip的展示。
其实直接看文档,给元素绑定 value 值也是可以实现的。对于没有文档,想要查找元素被绑定的事件以及具体的方法,或者要通过控制台控制元素,就要通过上面的方法啦。