Chinaunix首页 | 论坛 | 博客
  • 博客访问: 29302404
  • 博文数量: 2065
  • 博客积分: 10377
  • 博客等级: 上将
  • 技术积分: 21525
  • 用 户 组: 普通用户
  • 注册时间: 2008-11-04 17:50
文章分类

全部博文(2065)

文章存档

2012年(2)

2011年(19)

2010年(1160)

2009年(969)

2008年(153)

分类: 系统运维

2009-03-19 15:38:58

1.SVG鼠标事件响应的四种写法
SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)。
SVG鼠标事件实现方式的例子效果是:单击一个红色的矩形后,它的填充颜色会变成蓝色
实现代码(SMIL方式):

  "">





一点就会变成blue的了!表示的是改变了属性为fill的状态值了。由red变成blue了!修改的是一个属性值!
实现代码(Attributes方式): 通过写了一段脚本处理一下的!

  "">


u

实现代码(JavaScript+SMIL方式) 采用了JS来操作DOM的方式类似的!

  "">



:}createElementNS 这种命令是需要引入命令空间的要不然它怎么知道去哪找呀?所以要引入
"" 这个命名空间进来的!

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

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):鼠标从一个元素移开。

3 KeyEvents(键盘事件)

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

4   SVGEvents(SVG文档事件)

 

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

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):当一个节点(例如文本元素)内的字符数据被改变时,生成该通知事件。





阅读(1886) | 评论(0) | 转发(0) |
0

上一篇:XML学习

下一篇:SVG DOM常用属性和方法介绍

给主人留下些什么吧!~~