{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-db1908e8fbd0bd339da6a67b133a65f6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"除了 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":4,"offset":4},"indent":[]}},{"type":"link","title":null,"url":"./defaultBehavior","children":[{"type":"text","value":"内置交互行为 Behavior","position":{"start":{"line":2,"column":5,"offset":5},"end":{"line":2,"column":20,"offset":20},"indent":[]}}],"position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":40,"offset":40},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":2,"column":40,"offset":40},"end":{"line":2,"column":43,"offset":43},"indent":[]}},{"type":"link","title":null,"url":"./mode","children":[{"type":"text","value":"交互模式 Mode","position":{"start":{"line":2,"column":44,"offset":44},"end":{"line":2,"column":53,"offset":53},"indent":[]}}],"position":{"start":{"line":2,"column":43,"offset":43},"end":{"line":2,"column":62,"offset":62},"indent":[]}},{"type":"text","value":" 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次：","position":{"start":{"line":2,"column":62,"offset":62},"end":{"line":2,"column":136,"offset":136},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":136,"offset":136},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"画布、图形层次的事件，","position":{"start":{"line":4,"column":3,"offset":140},"end":{"line":4,"column":14,"offset":151},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">mousedown</code>","position":{"start":{"line":4,"column":14,"offset":151},"end":{"line":4,"column":25,"offset":162},"indent":[]}},{"type":"text","value":"， ","position":{"start":{"line":4,"column":25,"offset":162},"end":{"line":4,"column":27,"offset":164},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">mouseup</code>","position":{"start":{"line":4,"column":27,"offset":164},"end":{"line":4,"column":36,"offset":173},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":4,"column":36,"offset":173},"end":{"line":4,"column":37,"offset":174},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">click</code>","position":{"start":{"line":4,"column":37,"offset":174},"end":{"line":4,"column":44,"offset":181},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":4,"column":44,"offset":181},"end":{"line":4,"column":45,"offset":182},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">mouseenter</code>","position":{"start":{"line":4,"column":45,"offset":182},"end":{"line":4,"column":57,"offset":194},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":4,"column":57,"offset":194},"end":{"line":4,"column":58,"offset":195},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">mouseleave</code>","position":{"start":{"line":4,"column":58,"offset":195},"end":{"line":4,"column":70,"offset":207},"indent":[]}},{"type":"text","value":" 等；","position":{"start":{"line":4,"column":70,"offset":207},"end":{"line":4,"column":73,"offset":210},"indent":[]}}],"position":{"start":{"line":4,"column":3,"offset":140},"end":{"line":4,"column":73,"offset":210},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":138},"end":{"line":4,"column":73,"offset":210},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"节点/边 上的事件，","position":{"start":{"line":5,"column":3,"offset":213},"end":{"line":5,"column":13,"offset":223},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">node:mousedown</code>","position":{"start":{"line":5,"column":13,"offset":223},"end":{"line":5,"column":29,"offset":239},"indent":[]}},{"type":"text","value":"， ","position":{"start":{"line":5,"column":29,"offset":239},"end":{"line":5,"column":31,"offset":241},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edge:click</code>","position":{"start":{"line":5,"column":31,"offset":241},"end":{"line":5,"column":43,"offset":253},"indent":[]}},{"type":"text","value":" 等，以 ","position":{"start":{"line":5,"column":43,"offset":253},"end":{"line":5,"column":48,"offset":258},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">type:eventName</code>","position":{"start":{"line":5,"column":48,"offset":258},"end":{"line":5,"column":64,"offset":274},"indent":[]}},{"type":"text","value":" 为事件名称；","position":{"start":{"line":5,"column":64,"offset":274},"end":{"line":5,"column":71,"offset":281},"indent":[]}}],"position":{"start":{"line":5,"column":3,"offset":213},"end":{"line":5,"column":71,"offset":281},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":211},"end":{"line":5,"column":71,"offset":281},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"时机事件：","position":{"start":{"line":6,"column":3,"offset":284},"end":{"line":6,"column":8,"offset":289},"indent":[]}}],"position":{"start":{"line":6,"column":3,"offset":284},"end":{"line":6,"column":8,"offset":289},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"节点/边增删改时的事件, 例如：","position":{"start":{"line":7,"column":5,"offset":294},"end":{"line":7,"column":21,"offset":310},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">beforeadditem</code>","position":{"start":{"line":7,"column":21,"offset":310},"end":{"line":7,"column":36,"offset":325},"indent":[]}},{"type":"text","value":" ， ","position":{"start":{"line":7,"column":36,"offset":325},"end":{"line":7,"column":39,"offset":328},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">afteradditem</code>","position":{"start":{"line":7,"column":39,"offset":328},"end":{"line":7,"column":53,"offset":342},"indent":[]}},{"type":"text","value":" 等；","position":{"start":{"line":7,"column":53,"offset":342},"end":{"line":7,"column":56,"offset":345},"indent":[]}}],"position":{"start":{"line":7,"column":5,"offset":294},"end":{"line":7,"column":56,"offset":345},"indent":[]}}],"position":{"start":{"line":7,"column":3,"offset":292},"end":{"line":7,"column":56,"offset":345},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"节点/边状态改变时的事件，例如：","position":{"start":{"line":8,"column":5,"offset":350},"end":{"line":8,"column":21,"offset":366},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">beforerefreshitem</code>","position":{"start":{"line":8,"column":21,"offset":366},"end":{"line":8,"column":40,"offset":385},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":8,"column":40,"offset":385},"end":{"line":8,"column":41,"offset":386},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">afterrefreshitem</code>","position":{"start":{"line":8,"column":41,"offset":386},"end":{"line":8,"column":59,"offset":404},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":8,"column":59,"offset":404},"end":{"line":8,"column":60,"offset":405},"indent":[]}}],"position":{"start":{"line":8,"column":5,"offset":350},"end":{"line":8,"column":60,"offset":405},"indent":[]}}],"position":{"start":{"line":8,"column":3,"offset":348},"end":{"line":8,"column":60,"offset":405},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"布局时机，例如：","position":{"start":{"line":9,"column":5,"offset":410},"end":{"line":9,"column":13,"offset":418},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">beforelayout</code>","position":{"start":{"line":9,"column":13,"offset":418},"end":{"line":9,"column":27,"offset":432},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":9,"column":27,"offset":432},"end":{"line":9,"column":28,"offset":433},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">afterlayout</code>","position":{"start":{"line":9,"column":28,"offset":433},"end":{"line":9,"column":41,"offset":446},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":9,"column":41,"offset":446},"end":{"line":9,"column":42,"offset":447},"indent":[]}}],"position":{"start":{"line":9,"column":5,"offset":410},"end":{"line":9,"column":42,"offset":447},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":408},"end":{"line":9,"column":42,"offset":447},"indent":[]}}],"position":{"start":{"line":7,"column":3,"offset":292},"end":{"line":9,"column":42,"offset":447},"indent":[3,3]}}],"position":{"start":{"line":6,"column":1,"offset":282},"end":{"line":9,"column":42,"offset":447},"indent":[1,1,1]}}],"position":{"start":{"line":4,"column":1,"offset":138},"end":{"line":9,"column":42,"offset":447},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果要了解G6支持的所有事件，请参考","position":{"start":{"line":11,"column":1,"offset":449},"end":{"line":11,"column":19,"offset":467},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/event-api","children":[{"type":"text","value":"Event文档","position":{"start":{"line":11,"column":20,"offset":468},"end":{"line":11,"column":27,"offset":475},"indent":[]}}],"position":{"start":{"line":11,"column":19,"offset":467},"end":{"line":11,"column":69,"offset":517},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":11,"column":69,"offset":517},"end":{"line":11,"column":70,"offset":518},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":449},"end":{"line":11,"column":70,"offset":518},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"G6 上所有的事件都需要在graph上监听。","position":{"start":{"line":13,"column":1,"offset":520},"end":{"line":13,"column":23,"offset":542},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":520},"end":{"line":13,"column":23,"offset":542},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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>","position":{"start":{"line":14,"column":1,"offset":543},"end":{"line":27,"column":4,"offset":778},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":28,"column":1,"offset":779}}}}