{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-db1908e8fbd0bd339da6a67b133a65f6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>除了 <a href=\"./defaultBehavior\">内置交互行为 Behavior</a> 和 <a href=\"./mode\">交互模式 Mode</a> 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次：</p>\n<ul>\n<li>画布、图形层次的事件，<code class=\"language-text\">mousedown</code>， <code class=\"language-text\">mouseup</code>，<code class=\"language-text\">click</code>，<code class=\"language-text\">mouseenter</code>，<code class=\"language-text\">mouseleave</code> 等；</li>\n<li>节点/边 上的事件，<code class=\"language-text\">node:mousedown</code>， <code class=\"language-text\">edge:click</code> 等，以 <code class=\"language-text\">type:eventName</code> 为事件名称；</li>\n<li>\n<p>时机事件：</p>\n<ul>\n<li>节点/边增删改时的事件, 例如：<code class=\"language-text\">beforeadditem</code> ， <code class=\"language-text\">afteradditem</code> 等；</li>\n<li>节点/边状态改变时的事件，例如：<code class=\"language-text\">beforerefreshitem</code>，<code class=\"language-text\">afterrefreshitem</code>。</li>\n<li>布局时机，例如：<code class=\"language-text\">beforelayout</code>，<code class=\"language-text\">afterlayout</code>。</li>\n</ul>\n</li>\n</ul>\n<p>如果要了解G6支持的所有事件，请参考<a href=\"https://www.yuque.com/antv/g6/event-api\" target=\"_self\" rel=\"nofollow\">Event文档</a>。</p>\n<p>G6 上所有的事件都需要在graph上监听。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> type <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span><span class=\"token function\">getType</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}