`
need_faith
  • 浏览: 82243 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【转载】SVG事件类型总结

    博客分类:
  • SVG
阅读更多

SVG事件类型总结
    SVG事件的类型总结,文章对SVG可用的一些事件类型按照事件的类别进行了分类:UIEvents(用户界面事件)、MouseEvents(鼠标事件)、KeyEvents(键盘事件)、SVGEvents(SVG文档事件)、SMILEvents(SMIL动画事件)、MutationEvents(DOM 树变化事件)。 来源:SVG中国(ChinaSVG.COM)
  下面是SVG中可用的一些事件类型,按照事件的类别进行分类。

1 UIEvents(用户界面事件)

focusin(onfocusin):一个元素获得焦点(例如,一段文本被选中)
focusout(onfocusout):一个元素失去焦点(例如,一段文本放弃被选中)
activate(onactivate):一个元素通过被单击而激活,或者单击了“enter”键或“shift+enter”键。


2 MouseEvents(鼠标事件)


  click(onclick):一个指针设备(例如,鼠标)在一个元素上进行单击,“mousedown”和“mouseup”事件会伴随发生在同样的位置。如果多次在同一个位置双击,那么evt.detail 属性的值会变成2;单击的话是1,所以可以据此判断是双击还是单击。

mousedown(onmousedown):鼠标在一个元素上按下。
mouseup(onmouseup):鼠标在一个元素上被释放,也就是按键弹起。
mouseover(onmouseover):鼠标在一个元素上悬停。
mousemove(onmousemove):鼠标移动经过一个元素。
mouseout(onmouseout):鼠标从一个元素移开。

  注意:当鼠标在一个元素上单击的时候,三个事件的发生顺序为onmousedown、onmouseup、onclick。

3 KeyEvents(键盘事件)

  

 

  KeyEvents(键盘事件),至今仍不是SVG标准的一部分,但是很多SVG解析器都支持)
keydown(onkeydown):按下一个键。
keyup(onkeyup):释放一个键。
keypress(onkeypress):按下并释放一个键。

 

 
4   SVGEvents(SVG文档事件)


SVGLoad(onload):当客户端完全解析了SVG文档或者其中的元素,或者所需的外部资源已经准备好的时候会触发此事件,此时已经准备开始渲染SVG图像。
SVGUnload(onunload):当SVG文档从浏览器窗口或者某个框架中被删除后会触发此事件,此事件只能应用在<SVG>元素上。
SVGAbort(onabort):当正在载入的文档或者元素被中止时会触发此事件。
SVGError(onerror):当载入一个元素或者当执行脚本发生错误时,都会触发此事件。
SVGResize(onresize):当嵌入有SVG文档的浏览器窗口或者框架的尺寸发生改变时会触发此事件,此事件也只能应用在“<SVG>”元素上。
SVGScroll(onscroll):当用户拖动窗口的滚动条或者浏览文档视图时,或当通过脚本改变了“currentTranslate”属性值时,都会触发此事件,此事件也只能应用在<SVG>元素上。
SVGZoom(onzoom ):当用户缩放SVG文档视图时,或当通过脚本改变了“currentScale”属性值时,都会触发此事件,此事件也只能应用在<SVG>元素上。

 
5 SMILEvents(SMIL动画事件)


beginEvent(onbegin):当动画开始时触发此事件,此事件对动画元素有效。
endEvent(onend):当动画结束时触发此事件,此事件对动画元素有效。
repeatEvent(onrepeat):当动画重复播放时触发此事件,此事件对动画元素有效。

 

6 MutationEvents(DOM 树变化事件)

DOMSubtreeModified(none):常规事件,通告一个元素或一个文档所有的变化。
DOMNodeInserted(none):当一个新节点被插入到给定的父节点时的通知事件。
DOMNodeRemoved(none):当一个节点从父节点中删除时的通知事件。
DOMNodeRemovedFromDocument(none):当一个节点从文档中删除的时,无论这种删除是节点直接被删除,还是它的祖先节点被删除导致它跟着被删除,都会生成该通知事件。
DOMNodeInsertedIntoDocument(none):当一个节点被插入到文档中,无论是直接插入还是随着祖先节点的插入而插入,都会生成该通知事件。
DOMAttrModified(none):当一个给定节点的属性被修改时生成该通知事件。
DOMCharacterDataModified(none):当一个节点(例如文本元素)内的字符数据被改变时,生成该通知事件。

 

 

摘自:http://riso.iteye.com/blog/392378

注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。

分享到:
评论

相关推荐

    关于svg事件及缩放

    ### SVG事件及缩放控制详解 #### 一、SVG鼠标事件概述 SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,用于描述二维图形。SVG支持丰富的交互功能,其中鼠标事件是用户与SVG元素进行交互的一种常见...

    svg小例子(主要是鼠标事件)

    在本压缩包文件中,我们看到的是关于SVG元素与鼠标事件的一些简单实例,这对于初学者来说是很好的学习资源。 首先,我们要理解SVG中的基本元素。SVG包含多种图形元素,例如`&lt;rect&gt;`(矩形)、`&lt;circle&gt;`(圆形)、`...

    vue动态渲染svg、添加点击事件的实现

    当我们在Vue项目中需要动态渲染SVG以及为SVG图形添加交互功能时,如点击事件,我们需要了解如何结合这两个技术。接下来,我们将详细介绍Vue动态渲染SVG以及为SVG添加点击事件的实现过程。 ### Vue动态渲染SVG 在...

    html5 svg 中元素点击事件添加方法

    最近在用svg的点击事件做...SVG •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序(比如谷歌地图) •复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) •不适合游戏应用 做出的网页在

    svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标

    SVG事件包括`click`、`mouseover`、`mouseout`等,与JavaScript中的事件处理程序相结合,可以实现丰富的用户交互。 至于SVG坐标系统,它是一个二维笛卡尔坐标系,其中(0,0)通常位于SVG容器的左上角。你可以通过指定...

    SVG自定义地图 自定义点点击触发事件

    SVG(Scalable Vector ...通过将jpg图片转换为SVG,我们可以轻松地添加自定义元素和事件监听,使得地图应用更加生动和功能丰富。在Android Studio中,结合SVG库和自定义View,我们可以实现这种高级功能,提升用户体验。

    svg移动+缩放+拖动添加+事件

    四、SVG事件 SVG元素可以绑定各种事件监听器,如`click`、`mouseover`等。在描述中提到的左右键单击事件处理,可以这样实现: ```javascript rect.addEventListener('click', (event) =&gt; { if (event.button === 0...

    winfrom 显示指定svg

    如果你想要在WinForm窗体上显示SVG(可缩放矢量图形)文件,这需要利用特定的库或组件,因为.NET Framework本身并不直接支持SVG格式。以下是一个详细的步骤指南,说明如何在WinForm中实现SVG显示。 1. **引入SVG库*...

    全国各省市SVG地图 全国各省市SVG地图

    全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...

    SVG.rar_svg_svg 源代码_svg c++

    总结来说,SVG是一种强大的矢量图像格式,通过学习和实践SVG源代码,可以掌握创建和处理矢量图形的技巧,并结合C++实现丰富的图形界面。提供的SVG示例和C++集成是提升这方面技能的重要途径,对于开发者和设计师而言...

    SVG Demo.rar

    SVG(Scalable Vector ...总结,SVG Demo.rar中的内容可能是展示如何在网页上创建SVG图形、响应鼠标事件以及创建可点击热点的实例。学习和理解这些示例可以帮助开发者更好地利用SVG进行图形设计和交互式应用的开发。

    svg 动画管道效果

    总结起来,这个项目展示了如何利用SVG、jQuery和自定义的JavaScript库来创建交互式的、数据驱动的动画效果,特别是对于显示温度计和管道这样的视觉元素。同时,这也提醒我们在开发过程中要考虑浏览器的兼容性问题,...

    H5 SVG边框特效

    SVG(Scalable Vector ...总结来说,H5中的SVG边框特效结合了SVG的强大功能和CSS的灵活性,为网页设计带来了无限可能。通过熟练掌握SVG边框的创建、动画和滤镜应用,开发者能够创造出富有创意和视觉冲击力的Web界面。

    C#代码 SVG 编辑

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许开发者创建可缩放的、清晰的图形,无论放大多少倍都不会失真。在C#编程中,SVG编辑是一个重要的领域,尤其对于开发图形用户界面(GUI)或者进行...

    svg与js交互

    4. 处理SVG事件 SVG元素可以接收和处理各种事件,如鼠标点击(`onclick`)、鼠标悬停(`onmouseover`)、加载完成(`onload`)等。通过事件对象(例如`evt`),可以访问触发事件的元素以及其他相关信息。例如,可以...

    SVG与html的交互(svg的js与html的js互调用).pdf

    最后,让我们来总结一下 SVG 和 HTML 之间的交互方式。 SVG 文件可以嵌入到 HTML 文件中,通过这种方式,我们可以在 HTML 文件中使用 SVG 文件的功能。我们可以使用 JavaScript 语言来编写代码,实现 SVG 和 HTML ...

    SVG_SVG仿真_svg_psim_

    SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、软件开发和图形用户界面中。它能够无损地缩放图像,保持清晰度,而不像位图那样会失真。SVG图像由一系列几何形状(如线条、...

    vue3-ts 编辑svg 合并svg

    在Vue3和TypeScript的开发环境中,SVG的编辑与合并是一项常见的需求,特别是在构建图形界面或者图标库时。本文将详细讲解如何在这样的背景下处理SVG文件,并探讨如何使用Vue3和TypeScript进行相关操作。 首先,Vue3...

    SVG.js SVG.js

    SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。... 元素可以绑定事件,包括触摸事件 完全支持不透明蒙版 元素组 动态渐变 填充模式 完整的文档记录

    svg 画流程图

    总之,SVG画流程图是一个涉及图形绘制、事件处理和数据持久化等多个方面的综合任务。通过理解SVG的基本元素和属性,结合JavaScript的事件系统和DOM操作,我们可以创建出具有拖拽、修改和保存功能的交互式流程图。在...

Global site tag (gtag.js) - Google Analytics