SVG学习（五）

谜亚星2026-01-09 13:43

在svg.js中，给元素绑定事件，也和html中一样，"元素.事件名"就行，而且也支持click，mouseover等多种事件，例如

javascript 复制代码

element.click(function() {
  this.fill({ color: '#f06' })
})

其中的this就指向当前元素。不过要注意，svg本身是不支持scroll滚动的。

如果想移除事件，就将事件设置为null就行

csharp 复制代码

element.click(null)

对于触发事件，svg.js有两种方式，fire和dispatch，两者都可以传递第二个参数来传参，区别在于返回值。fire的返回值是当前元素，dispatch是事件event对象

监听事件和html中一样，使用on方法

less 复制代码

var click = function() {
  this.fill({ color: '#f06' })
}
element.on('click', click)
element.fire('click')
element.dispatch('click')

可以同时监听多个事件

csharp 复制代码

element.on(['click', 'mouseover'], handler)
element.on('click mouseover', handler)

也可以改变函数中this的指向

dart 复制代码

element.on('click', click, window)

事件体函数中也有event事件对象

取消绑定事件同样简单：

arduino 复制代码

element.off('click', click)

或者取消绑定特定类型的事件监听器：

vbnet 复制代码

element.off('click')

或者多个事件类型：

vbnet 复制代码

element.off(['click', 'mouseover'])
element.off('click mouseover')

甚至可以取消绑定所有事件的监听器：

scss 复制代码

element.off()

有了上面这些，就可以自定义事件使用了

javascript 复制代码

element.on('myevent', function() {
  alert('ta-da!')
})
function whenSomethingHappens() {
  element.fire('myevent')
}

除此之外，svg.js也可以在其他元素上绑定事件

dart 复制代码

SVG.on(window, 'click', click)
SVG.off(window, 'click', click)