概观: 在这篇文章中，我们将讨论关于JavaScript中的浏览器事件. 因为他们执行大多数任务Java脚本的事件是非常重要的. 另外重要的一点是浏览器的兼容性. 作为Java脚本嵌入在HTML文件, Java脚本的执行是依赖于浏览器. Java脚本也足够成熟来处理浏览器事件.
介绍:
浏览器事件是从浏览器到应用程序的情况下执行的动作的信号. 这些事件是下列类型的
- DOM事件: 这些由DOM元素例如启动. 点击元素时被触发click事件或当鼠标指针在元素上盘旋鼠标悬停事件被触发. 这些事件与文档连接的Java脚本代码.
- 窗口事件: 这些都是当调整浏览器窗口启动.
什么是事件?
一个事件可以被定义为一个操作/工作发送一个信号以Java脚本. 现在，Java脚本响应某些事件执行. 但该事件应注册发送信号到相应的Java脚本组件. 以下是一些事件.
窗口事件: 当调整浏览器窗口中启动这些事件.
DOM事件: 这些都是当一个DOM元素执行某些操作启动.
其他事件: 这些事件被考虑所有其它类型的事件的除了上述两个.
事件处理程序: 我们必须明白，有Java和Java脚本之间有很大的区别. 在java, 多线程是可能的，但Java脚本事件是单线程. 因此，事件处理程序是顺序执行. 为了澄清, 让我们假设一个用户执行了两个事件, 鼠标悬停，然后鼠标移动. 因此，鼠标悬停事件将首先执行. 一旦第一个事件完成, mousemove事件会得到执行.
如果一个脚本必须针对事件执行的操作, 它应该有关联到它的函数. 这些功能被称为事件处理程序. 通常，这些函数的命名格式 - 上 EVENT_NAME例如. 的onclick等. 在Java脚本事件处理程序是单线程的顺序执行. 因此，如果两个事件发生在同一时间, 他们的处理程序将相继执行一条. 有很多种方法，使事件处理程序分配. These are.
使用HTML标签: 事件处理程序可以直接使用上事件属性相关联的标记.
Listing 1: Event handler using html tag
[Code]
<输入ID = “B1” 值= “点我” 的onclick = “警报('谢谢! 我点击. ‘); ” 类型= “钮” />
[/Code]
当执行该代码, 我们看到了一个按钮，一个标签 – '点我'. 如果用户点击这个按钮提示窗口，一条消息 – Thanks! 我点击. 我们还可以调用事件处理函数. 考虑下面的代码
Listing 2: 使用功能的事件处理程序
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <HTML> | |||||||||||||||
| <头> | |||||||||||||||
| <脚本类型=”文/ JavaScript的”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| 为(VAR I = 1; 我 <= 3; 我 ) { | |||||||||||||||
| 警报( “兔子 “+1 ” 的帽子!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </脚本> | |||||||||||||||
| </头> | |||||||||||||||
| <体> | |||||||||||||||
| <INPUT TYPE = “钮” 的onclick = “count_rabbits()” 值= “兔子伯爵!”/> | |||||||||||||||
| </体> | |||||||||||||||
| </HTML>[/Code]到绑定事件的另一方法是使用this.innerHTML哪里此指的是当前元素. 下面的代码说明了这一点Listing 3: 使用this.innerHTML事件处理
[Code] <按钮的onclick = “警报 ( this.innerHTML )”> 点击这里给我看我 </钮> [/Code] 使用DOM对象属性: 在这里，分配使用属性做 – 的OnEvent. 在这种情况下，我们需要首先获取元素，然后处理程序分配给属性的OnEvent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: 使用DOM对象属性事件处理 [Code] <输入ID = “我的身份” 类型= “钮” 值= “按我”/> <脚本> document.getElementById( ‘ 我的身份 ‘ ).的onclick =功能() { 警报('谢谢') } </脚本> [/Code] 这里以下两件事，必须以使用此应注意 – · It is a property, 不是一个属性，它的名字是一个OnEvent这是大小写敏感的，应该是小写. · The handler should be a function not a String. 当浏览器中发现的HTML标记的属性的OnEvent, 它使用其内容创建了一个函数，并将其分配给该属性. 所以下面两个代码不相同 Listing 5: 仅使用HTML事件处理程序 [Code] <INPUT TYPE = “钮” 的onclick = “警报( '点击!’ )” 值= “按键”/> [/Code] Listing 6: 使用HTML事件处理 & JS. [Code] <INPUT TYPE = “钮” ID = “钮” 值= “按键”/> <脚本> document.getElementById(“按钮”).的onclick =功能() { 警报('点击!’) } </脚本> [/Code] JavaScript的覆盖处理程序中设置标记. 下面的代码片段取代了标记处理程序用一个新的 Listing 7: 覆盖的处理程序集. <INPUT TYPE =”钮” 的onclick =”警报('之前')” value=”按我”/> <脚本> document.getElementsByTagName(“输入”)[0].的onclick =功能() { 警报('后') } </脚本> [/Code] 使用特殊方法: 在一个复杂的JavaScript应用程序, 其中，不同的接口方式处理公共事件自定义方法用于分配处理器. 微软提供了一个解决方案，只有IE浏览器版本低于工程 9 并与歌剧. 处理程序被分配和分离为下 Listing 8: 安装和卸下处理器 element.attachEvent( “上” + 事件, 处理器) [/Code] 删除处理程序 – [Code] element.detachEvent( “上” + 事件, 处理器) [/Code] 使用附加事件, 我们可以分配多个处理程序，以相同的元素. 下面的代码片段显示了这个 Listing 9: 分配多个处理程序，以一个元素. [Code] <输入ID = “myElement” 类型= “钮” 值= “按我” /> <脚本> VAR myElement =的document.getElementById( “myElement” ) 行事=功能() { 警报( '谢谢!’ ) } 是行业2 =功能() { 警报( '再次感谢!’ ) } myElement.attachEvent( “点击时”, 处理器) myElement.attachEvent( “点击时”, handler2) </脚本> [/Code] 附加的事件没有通过参数'这个'. 由于按照W3C标准以下处理程序分配工作在今天几乎都采用所有的浏览器. 附加处理程序 Listing 10: 安装和卸下处理器按照W3C标准 element.addEventListener ( 事件, 处理器, 相 ) [/Code] 元件. removeEventListener ( 事件, 处理器, 相 ) [/Code]
事件相关行动: 我们应采取以下四个动作的照顾，同时处理事件相关的动作 · 注册事件处理程序: 这可以通过设置的元素的OnEvent属性例如进行. 的onclick或onkeypress事件等. 这适用于整个浏览器，但有我们可以附加只有一个事件处理元素的限制. 所附事件可以在使用detachEvent或removeEventListener类似的方式去除. · 获取事件对象: 浏览器的大部分传递事件对象作为参数传递给处理程序. 当用户点击鼠标他产生了以下三个事件. o MOUSEDOWN: 指示鼠标被按下. o 鼠标松开: 指示鼠标被释放. o Click: 指示鼠标点击. 如果这种情况发生在继承, 这表明双击发生. · Extract information from the object – 第三步是从物体的提取动作有关的信息，并启动动作. · Inform about the completion of the event – 这是最后一步. 一旦该事件被成功拍卖事件的结束标记. Summary: 在结束讨论，我们可以记住以下几点 · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM事件和窗口事件. · Event handlers are functions associated to events. · Event handlers are assigned in the following way o Using HTML tag o Using DOM object property o Using special methods |
||||
READ MORE JAVA SCRIPT ARTICLES
Java脚本设计模式
CSS3 & JavaScript
Java Script and CSS3 properties
