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 •不依赖分辨率 •支持事件处理器 •最适合带有大型渲染区域的应用程序(比如谷歌地图) •复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) •不适合游戏应用 做出的网页在
svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标
svg自定义地图,自己的jpg格式图片,转换为svg,可在上面画图,触发点击事件,只支持android studio
比较乱短的一个文档,说明了SVG的鼠标事件及通过ViewBox控制SVG放大缩小的资料,很久以前整理。
主要介绍了vue动态渲染svg、添加点击事件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
鼠标点击,鼠标移走,可以更换图元,都是些简单实用的小例子,有助新手学习.
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
SVG排版公众号文章『灵活控制click事件与touchstart事件执行动画』
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程
svg鼠标滚轮缩放,鼠标拖动svg。拖动div添加svg元素,并添加元素的左右键单击事件
SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。... 元素可以绑定事件,包括触摸事件 完全支持不透明蒙版 元素组 动态渐变 填充模式 完整的文档记录
svg练习
SVG学习教程.doc SVG学习教程 svg 学习 教程
svg转png, svg文件渲染, 使用plutosvg库
C语言总结.svg
SVG提供了3种类型的图形对象:矢量图形(vectorgraphicshape例如:由直线和曲线组成的路径)、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作,特征集包括嵌套变换...
svg教程书籍
svg转css,css转svg,svg与css互相转换并压缩
可将dxf文件转换为svg文件; 可将svg文件转换为png文件。 压缩包为源码文件