<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>free sea &#187; 交互设计</title>
	<atom:link href="http://www.tofreesea.com/tag/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tofreesea.com</link>
	<description>插画 创意 生活</description>
	<lastBuildDate>Mon, 16 Jan 2012 08:26:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>交互体验 前端 js事件列表</title>
		<link>http://www.tofreesea.com/2009/07/%e4%ba%a4%e4%ba%92-%e4%bd%93%e9%aa%8c-%e7%bd%91%e9%a1%b5/</link>
		<comments>http://www.tofreesea.com/2009/07/%e4%ba%a4%e4%ba%92-%e4%bd%93%e9%aa%8c-%e7%bd%91%e9%a1%b5/#comments</comments>
		<pubDate>Tue, 28 Jul 2009 04:30:56 +0000</pubDate>
		<dc:creator>freesea</dc:creator>
				<category><![CDATA[三分钟]]></category>
		<category><![CDATA[交互设计]]></category>

		<guid isPermaLink="false">http://www.tofreesea.com/?p=360</guid>
		<description><![CDATA[单说web 的用户体验，非flash的话；
单从交互动作上来看的话：
网页上最通常的交互是点击链接：直接加标记即可，js里是onclick
如果想改善有更好的用户体验的话：增加鼠标接触的动作，onmouseover/onmouseout，这样可以有一些几个好处：预览链接内容/改变信息显示方式等等；
如果想再好一些好的用户体验呢？有一些鼠标拖拽，例如blog管理状态时更改功能模块的排列位置等，网上搜javascript 拖拽，实例很容易找；
还有一些更敏感的交互方式：鼠标左键按下，持续的时间不同的话，也会出现不同的反应。
javascript事件列表解说事件浏览器支持解说一般事件onclickIE3、N2 鼠标点击时触发此事件ondblclickIE4、N4 鼠标双击时触发此事件onmousedownIE4、N4 按下鼠标时触发此事件onmouseupIE4、N4 鼠标按下后松开鼠标时触发此事件onmouseoverIE3、N2当鼠标移动到某对象范围的上方时触发此事件onmousemoveIE4、N4 鼠标移动时触发此事件onmouseoutIE4、N3当鼠标离开某对象范围时触发此事件onkeypressIE4、N4 当键盘上的某个键被按下并且释放时触发此事件.onkeydownIE4、N4 当键盘上某个按键被按下时触发此事件onkeyupIE4、N4 当键盘上某个按键被按放开时触发此事件页面相关事件onabortIE4、N3 图片在下载时被用户中断onbeforeunloadIE4、N 当前页面的内容将要被改变时触发此事件onerrorIE4、N3 出现错误时触发此事件onloadIE3、N2 页面内容完成时触发此事件onmoveIE、N4 浏览器的窗口被移动时触发此事件onresizeIE4、N4 当浏览器的窗口大小被改变时触发此事件onscrollIE4、N 浏览器的滚动条位置发生变化时触发此事件onstopIE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断onunloadIE3、N2 当前页面将被改变时触发此事件表单相关事件onblurIE3、N2 当前元素失去焦点时触发此事件onchangeIE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件onfocusIE3 、N2当某个元素获得焦点时触发此事件onresetIE4 、N3 当表单中RESET的属性被激发时触发此事件onsubmitIE3 、N2 一个表单被递交时触发此事件滚动字幕事件onbounceIE4、N在Marquee内的内容移动至Marquee显示范围之外时触发此事件onfinishIE4、N当Marquee元素完成需要显示的内容后触发此事件onstartIE4、 N当Marquee元素开始显示内容时触发此事件编辑事件onbeforecopyIE5、N当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件onbeforecutIE5、 N当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件onbeforeeditfocusIE5、N当前元素将要进入编辑状态onbeforepasteIE5、 N内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件onbeforeupdateIE5、 N当浏览者粘贴系统剪贴板中的内容时通知目标对象oncontextmenuIE5、N当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件oncopyIE5、N当页面当前的被选择内容被复制后触发此事件oncutIE5、N 当页面当前的被选择内容被剪切时触发此事件ondragIE5、N 当某个对象被拖动时触发此事件 [活动事件]ondragdropIE、N4一个外部对象被鼠标拖进当前窗口或者帧ondragendIE5、N当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了ondragenterIE5、N当对象被鼠标拖动的对象进入其容器范围内时触发此事件ondragleaveIE5、N 当对象被鼠标拖动的对象离开其容器范围内时触发此事件ondragoverIE5、N当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragstartIE4、N当某对象将被拖动时触发此事件ondropIE5、N在一个拖动过程中，释放鼠标键时触发此事件onlosecaptureIE5、N当元素失去鼠标移动所形成的选择焦点时触发此事件onpasteIE5、N当内容被粘贴时触发此事件onselect IE4、N当文本内容被选择时的事件onselectstartIE4、N当文本内容选择将开始发生时触发的事件数据绑定onafterupdateIE4、N当数据完成由数据源到对象的传送时触发此事件oncellchangeIE5、N当数据来源发生变化时ondataavailableIE4、N当数据接收完成时触发事件ondatasetchangedIE4、N数据在数据源发生变化时触发的事件ondatasetcompleteIE4、N当来子数据源的全部有效数据读取完毕时触发此事
onerrorupdateIE4、N当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onrowenterIE5、N当前数据源的数据发生变化并且有新的有效数据时触发的事件onrowexitIE5、N当前数据源的数据将要发生变化时触发的事件onrowsdeleteIE5、N当前数据记录将被删除时触发此事件onrowsinsertedIE5、N当前数据源将要插入新数据记录时触发此事件外部事件onafterprintIE5、N当文档被打印后触发此事件onbeforeprintIE5、N当文档即将打印时触发此事件onfilterchangeIE4、N当某个对象的滤镜效果发生变化时触发的事件onhelpIE4、N当浏览者按下F1或者浏览器的帮助选择时触发此事件onpropertychangeIE5、N当对象的属性之一发生变化时触发此事件onreadystatechangeIE4、N当对象的初始化属性值发生变化时触发此事件
上面表格“javascript事件列表解说”援引自作者Blog：http://blog.csdn.net/iuhxq/



No related posts.


No related posts.]]></description>
			<content:encoded><![CDATA[<p>单说web 的用户体验，非flash的话；<br />
单从交互动作上来看的话：<br />
网页上最通常的交互是点击链接：直接加<a></a>标记即可，js里是onclick<br />
如果想改善有更好的用户体验的话：增加鼠标接触的动作，onmouseover/onmouseout，这样可以有一些几个好处：预览链接内容/改变信息显示方式等等；<br />
如果想再好一些好的用户体验呢？有一些鼠标拖拽，例如blog管理状态时更改功能模块的排列位置等，网上搜javascript 拖拽，实例很容易找；<br />
还有一些更敏感的交互方式：鼠标左键按下，持续的时间不同的话，也会出现不同的反应。</p>
<div><TABLE cellSpacing=0  cellPadding=2 align=center  border=1 width=560><TR><TD align=middle colSpan=4 >javascript事件列表解说</TD></TR><TR><TD align=middle colSpan=2>事件</TD><TD align=middlewidth=85>浏览器支持</TD><TD align=middle>解说</TD></TR><TR><TD width=12 rowSpan=10>一般事件</TD><TD width=131>onclick</TD><TD width=85>IE3、N2 </TD><TD>鼠标点击时触发此事件</TD></TR><TR><TD width=131>ondblclick</TD><TD width=85>IE4、N4 </TD><TD>鼠标双击时触发此事件</TD></TR><TR><TD width=131>onmousedown</TD><TD width=85>IE4、N4 </TD><TD>按下鼠标时触发此事件</TD></TR><TR><TD width=131>onmouseup</TD><TD width=85>IE4、N4 </TD><TD>鼠标按下后松开鼠标时触发此事件</TD></TR><TR><TD width=131>onmouseover</TD><TD width=85>IE3、N2</TD><TD>当鼠标移动到某对象范围的上方时触发此事件</TD></TR><TR><TD width=131>onmousemove</TD><TD width=85>IE4、N4 </TD><TD>鼠标移动时触发此事件</TD></TR><TR><TD width=131>onmouseout</TD><TD width=85>IE4、N3</TD><TD>当鼠标离开某对象范围时触发此事件</TD></TR><TR><TD width=131>onkeypress</TD><TD width=85>IE4、N4 </TD><TD>当键盘上的某个键被按下并且释放时触发此事件.</TD></TR><TR><TD width=131>onkeydown</TD><TD width=85>IE4、N4 </TD><TD>当键盘上某个按键被按下时触发此事件</TD></TR><TR><TD width=131>onkeyup</TD><TD width=85>IE4、N4 </TD><TD>当键盘上某个按键被按放开时触发此事件</TD></TR><TR><TD width=12 rowSpan=9>页面相关事件</TD><TD width=131>onabort</TD><TD width=85>IE4、N3 </TD><TD>图片在下载时被用户中断</TD></TR><TR><TD width=131>onbeforeunload</TD><TD width=85>IE4、N </TD><TD>当前页面的内容将要被改变时触发此事件</TD></TR><TR><TD width=131>onerror</TD><TD width=85>IE4、N3 </TD><TD>出现错误时触发此事件</TD></TR><TR><TD width=131>onload</TD><TD width=85>IE3、N2 </TD><TD>页面内容完成时触发此事件</TD></TR><TR><TD width=131>onmove</TD><TD width=85>IE、N4 </TD><TD>浏览器的窗口被移动时触发此事件</TD></TR><TR><TD width=131>onresize</TD><TD width=85>IE4、N4 </TD><TD>当浏览器的窗口大小被改变时触发此事件</TD></TR><TR><TD width=131>onscroll</TD><TD width=85>IE4、N </TD><TD>浏览器的滚动条位置发生变化时触发此事件</TD></TR><TR><TD width=131>onstop</TD><TD width=85>IE5、N </TD><TD>浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断</TD></TR><TR><TD width=131>onunload</TD><TD width=85>IE3、N2 </TD><TD>当前页面将被改变时触发此事件</TD></TR><TR><TD width=12 rowSpan=5>表单相关事件</TD><TD width=131>onblur</TD><TD width=85>IE3、N2 </TD><TD>当前元素失去焦点时触发此事件</TD></TR><TR><TD width=131>onchange</TD><TD width=85>IE3、N2 </TD><TD>当前元素失去焦点并且元素的内容发生改变而触发此事件</TD></TR><TR><TD width=131>onfocus</TD><TD width=85>IE3 、N2</TD><TD>当某个元素获得焦点时触发此事件</TD></TR><TR><TD width=131>onreset</TD><TD width=85>IE4 、N3 </TD><TD>当表单中RESET的属性被激发时触发此事件</TD></TR><TR><TD width=131>onsubmit</TD><TD width=85>IE3 、N2 </TD><TD>一个表单被递交时触发此事件</TD></TR><TR><TD width=12 rowSpan=3>滚动字幕事件</TD><TD vAlign=top align=left width=131>onbounce</TD><TD vAlign=top width=85>IE4、N</TD><TD>在Marquee内的内容移动至Marquee显示范围之外时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onfinish</TD><TD vAlign=top width=85>IE4、N</TD><TD>当Marquee元素完成需要显示的内容后触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onstart</TD><TD vAlign=top width=85>IE4、 N</TD><TD>当Marquee元素开始显示内容时触发此事件</TD></TR><TR><TD width=12 rowSpan=20>编辑事件</TD><TD vAlign=top align=left width=131>onbeforecopy</TD><TD vAlign=top width=85>IE5、N</TD><TD>当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onbeforecut</TD><TD vAlign=top width=85>IE5、 N</TD><TD>当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onbeforeeditfocus</TD><TD vAlign=top width=85>IE5、N</TD><TD>当前元素将要进入编辑状态</TD></TR><TR><TD vAlign=top align=left width=131>onbeforepaste</TD><TD vAlign=top width=85>IE5、 N</TD><TD>内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onbeforeupdate</TD><TD vAlign=top width=85>IE5、 N</TD><TD>当浏览者粘贴系统剪贴板中的内容时通知目标对象</TD></TR><TR><TD vAlign=top align=left width=131>oncontextmenu</TD><TD vAlign=top width=85>IE5、N</TD><TD>当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件</TD></TR><TR><TD vAlign=top align=left width=131>oncopy</TD><TD vAlign=top width=85>IE5、N</TD><TD>当页面当前的被选择内容被复制后触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>oncut</TD><TD vAlign=top width=85>IE5、N </TD><TD>当页面当前的被选择内容被剪切时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>ondrag</TD><TD vAlign=top width=85>IE5、N </TD><TD>当某个对象被拖动时触发此事件 [活动事件]</TD></TR><TR><TD vAlign=top align=left width=131>ondragdrop</TD><TD vAlign=top width=85>IE、N4</TD><TD>一个外部对象被鼠标拖进当前窗口或者帧</TD></TR><TR><TD vAlign=top align=left width=131>ondragend</TD><TD vAlign=top width=85>IE5、N</TD><TD>当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了</TD></TR><TR><TD vAlign=top align=left width=131>ondragenter</TD><TD vAlign=top width=85>IE5、N</TD><TD>当对象被鼠标拖动的对象进入其容器范围内时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>ondragleave</TD><TD vAlign=top width=85>IE5、N </TD><TD>当对象被鼠标拖动的对象离开其容器范围内时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>ondragover</TD><TD vAlign=top width=85>IE5、N</TD><TD>当某被拖动的对象在另一对象容器范围内拖动时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>ondragstart</TD><TD vAlign=top width=85>IE4、N</TD><TD>当某对象将被拖动时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>ondrop</TD><TD vAlign=top width=85>IE5、N</TD><TD>在一个拖动过程中，释放鼠标键时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onlosecapture</TD><TD vAlign=top width=85>IE5、N</TD><TD>当元素失去鼠标移动所形成的选择焦点时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onpaste</TD><TD vAlign=top width=85>IE5、N</TD><TD>当内容被粘贴时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onselect </TD><TD vAlign=top width=85>IE4、N</TD><TD>当文本内容被选择时的事件</TD></TR><TR><TD vAlign=top align=left width=131>onselectstart</TD><TD vAlign=top width=85>IE4、N</TD><TD>当文本内容选择将开始发生时触发的事件</TD></TR><TR><TD width=12 rowSpan=10>数据绑定</TD><TD vAlign=top align=left width=131>onafterupdate</TD><TD vAlign=top width=85>IE4、N</TD><TD>当数据完成由数据源到对象的传送时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>oncellchange</TD><TD vAlign=top width=85>IE5、N</TD><TD>当数据来源发生变化时</TD></TR><TR><TD vAlign=top align=left width=131>ondataavailable</TD><TD vAlign=top width=85>IE4、N</TD><TD>当数据接收完成时触发事件</TD></TR><TR><TD vAlign=top align=left width=131>ondatasetchanged</TD><TD vAlign=top width=85>IE4、N</TD><TD>数据在数据源发生变化时触发的事件</TD></TR><TR><TD width=131>ondatasetcomplete</TD><TD vAlign=top width=85>IE4、N</TD><TD>当来子数据源的全部有效数据读取完毕时触发此事</TD></TR><TR></p>
<p><TD vAlign=top align=left width=131>onerrorupdate</TD><TD vAlign=top width=85>IE4、N</TD><TD>当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件</TD></TR><TR><TD vAlign=top align=left width=131>onrowenter</TD><TD vAlign=top width=85>IE5、N</TD><TD>当前数据源的数据发生变化并且有新的有效数据时触发的事件</TD></TR><TR><TD vAlign=top align=left width=131>onrowexit</TD><TD vAlign=top width=85>IE5、N</TD><TD>当前数据源的数据将要发生变化时触发的事件</TD></TR><TR><TD vAlign=top align=left width=131>onrowsdelete</TD><TD vAlign=top width=85>IE5、N</TD><TD>当前数据记录将被删除时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onrowsinserted</TD><TD vAlign=top width=85>IE5、N</TD><TD>当前数据源将要插入新数据记录时触发此事件</TD></TR><TR><TD width=12 rowSpan=6>外部事件</TD><TD vAlign=top align=left width=131>onafterprint</TD><TD vAlign=top width=85>IE5、N</TD><TD>当文档被打印后触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onbeforeprint</TD><TD vAlign=top width=85>IE5、N</TD><TD>当文档即将打印时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onfilterchange</TD><TD vAlign=top width=85>IE4、N</TD><TD>当某个对象的滤镜效果发生变化时触发的事件</TD></TR><TR><TD vAlign=top align=left width=131>onhelp</TD><TD vAlign=top width=85>IE4、N</TD><TD>当浏览者按下F1或者浏览器的帮助选择时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onpropertychange</TD><TD vAlign=top width=85>IE5、N</TD><TD>当对象的属性之一发生变化时触发此事件</TD></TR><TR><TD vAlign=top align=left width=131>onreadystatechange</TD><TD vAlign=top width=85>IE4、N</TD><TD>当对象的初始化属性值发生变化时触发此事件</TD></TR></TABLE></div>
<p>上面表格“javascript事件列表解说”援引自作者Blog：<a href="http://blog.csdn.net/iuhxq/">http://blog.csdn.net/iuhxq/</a></p>
<div style="clear:both;"></div>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://www.tofreesea.com/2009/07/%e4%ba%a4%e4%ba%92-%e4%bd%93%e9%aa%8c-%e7%bd%91%e9%a1%b5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

