动态HTML教程--关于Event对象(转载)
2005-03-16 15:58
696 查看
关于Event对象 在你完全掌握dHTML前,你需要了解event对象。两种4.0浏览器都包含event对象。它在事件创立时产生,如点击一个可点击的对象,移动鼠标,或聚焦到一个窗体元素上。Event对象被创建然后传递给处理事件的函数。 下面是event对象属性的描述,以及Netscape和IE处理它们的方式: 描述 Microsoft 属性 Netscape 属性 代表事件类型的字符串 type type 代表最初发送给对象事件的字符串 srcElement target 光标横坐标 x x 光标纵坐标 y y 相对于页面的横坐标 clientX pageX 相对于页面的纵坐标 clientY pageY 相对于屏幕的横坐标 screenX screenX 相对于屏幕的纵坐标 screenY screenY 键代码 keyCode which Netscape返回键的代码,IE 返回true或false altKey ctrlKey shiftKey modifiers 4.0浏览器增加了一些新事件: onDblClick 鼠标双击 onKeyDown 键被按下 onKeyPress 键被按下然后被释放 onKeyUp 键被释放 onMouseDown 鼠标被按下 onMouseMove 鼠标移动 onMouseUp 鼠标被释放 onResize 窗口被调整大小 4.0浏览器也增加了处理事件的新方法,虽然它们(Netscape和IE)的方式不同。Netscape用的是“时间捕捉”,IE用的是“事件气泡”。 事件处理对Netscape处理如mouseMove或keyPress等事件是必须的,它并不隐含指向一个标记或元素。你应该告诉客户注意这些事件,并告诉它用什么函数来处理它们。下面例子用window对象的captureEvents方法来描述正在捕捉的事件:window.captureEvents(Event.MOUSEMOVE); 注意到在不用on作为名称一部分的情况下特定事件是如何被指向的。你只是告诉Netscape注意所有发生在窗口中的事件并捕捉它们。然后你需要告诉Netscape用这些被捕捉的时间做些什么。注意on又出现了。 window.onMouseMove = handlerFunction; function handerFunction(yourEvent) { alert(yourEvent.screenX); } 这段代码是一个演示事件过程的烦人的例子。每次你移动鼠标,一个对话框会跳出来告诉你它的横坐标位置。以这种方式处理的事件传递一个指针到event对象。从这儿你可以获取必要的信息。一旦你厌倦了捕捉事件,你可以象这样释放它们:window.releaseEvents(Event.MOUSEMOVE);于是这种类型的事件不再被捕捉。 IE用不同的方法处理事件,叫做“事件气泡”。在这种方法中,如果你有这样一个结构: <body onclick="bloorf()"> <p onclick="baz()"> <em onclick="bar()"> <strong onclick="foo()">Click on me</strong> </em> </p> </body> 如果你点击strong标记内的文本,它接收到一个onClick事件,然后发送onclick事件给<em>标记,处理它然后发送到<p>标记,等等,然后直到窗口。这样每个元素以自己的方式处理点击。但是如果你想停止气泡上传,可以取消气泡。 <script> function foo() { doSomeThing(); this.event.cancelBubble = true; } </script> 所以如果你不想让某个事件传递到所有它包含的标记,可以象上面那样阻止它。 你可以看到,因为两种浏览器存在相似的事件,每一步都需要大量的条件化工作,而且没有简单的方式把它们映射到一个句法中。 |
相关文章推荐
- Asp.net动态生成html页面[转载]
- 关于sp_executesql与exec执行动态sql的区别--转载RascallySnake
- 关于信噪比SNR【转载】1.http://well3216.blog.sohu.com/96624202.html
- [unity基础教程]关于Unity3D中Resources动态加载NGUI图片的方法!
- HTML中关于动态创建的标签无法绑定js事件的解决方法
- (转载)动态规划:从新手到专家(关于动态规划算法最精彩的中文描述,没有之一)
- 关于动态加载的html片段获取其中元素
- ie6.0中关于动态改变html中select标签中option的处理方法
- 关于 js 动态生成html 绑定事件失效的问题
- HTML Dog 初级教程中关于 forms 的翻译
- 【HTML】HTML 教程---(系列教程转载)
- jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭) 【转载】(http://www.cnblogs.com/lijia7436/archive/2010/03/31/1701193.html)
- 关于HTML 5 canvas 的基础教程
- 动态创建HTML表格[转载自MSDN]
- GHOST使用教程——转载自小路工作室http://www.wzlu.com/article/1/2007/200705065097.html
- HTML中级教程 - 1.关于“Span”和“Div”的使用
- <转载>Bootstrap 入门教程 http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 系列
- HTML入门教程 - 9.关于图片(Images)
- ASP.NET动态生成html页面 (转载)
- [转载]关于内存管理,写一个简单易懂的教程