掌握这三点,就能快速掌握JavaScript中的事件监听!

怎么理解JavaScript中的事件?

想要理解JavaScript中的事件,先要了解JavaScript中的对象,大家都知道对象都有它的属性和方法。举个例子汽车(对象)有自己的颜色和宽、高等属性,也有“驾驶”的方法,也有可能有“撞车”事件。我们可以这样理解JavaScript中的事件,目标对象上发送了某些事情。事件触发浏览器中行为的能力,比如当用户点击某个鼠标时时启动一段 JavaScript代码,可以把这个过程看成是一个独立的JavaScript事件。JavaScript中的事件可以分为很多种,常见的有表单事件、键盘事件、鼠标事件、媒介事件(常见于HTML5中)。

掌握这三点,就能快速掌握JavaScript中的事件监听!

怎么理解JavaScript中的事件监听?

从前几天文章介绍中看出,页面中的每个事件都需要一个函数来响应,这样的函数一般称为事件处理函数,从另一个角度看就是这些函数再监听事件是否发生,也称为事件监听函数。对于不同的浏览器他们的监听函数调用有一些区别。

JavaScript中常见的事件监听方法

掌握这三点,就能快速掌握JavaScript中的事件监听!

1、通用的监听方法

简单的事件,没有必要去编写复杂的代码,直接在HTML标签中处理就可以,而且兼容性很好,比如:p onclick="add(‘p
’)",p标签直接通过onclick函数进行事件监听。几乎所有的HTML标签都有onclick方法,也可以再标签中采用JavaScript语句比如说p=onclick=“alert(‘点击’)”,这种方法大部分浏览器都支持兼容性很好。

考虑到结构、行为分离,通常采用以下方法来实现事件监听,这种方法实际中用的比较多。代码如下(把监听函数放到了window对象的onload函数中,保证了DOM结构在完全建立后搜索p节点。):

掌握这三点,就能快速掌握JavaScript中的事件监听!

2、IE中的监听方法

在微软的IE浏览器中,每个元素都有两个方法处理事件的监听,分别是attachEvent()和detachEvent()。attachEvent()用来某个元素添加事件处理函数,detachEvent()用来删除元素上的事件监听函数,语法格式如下:element.attachEvent(event, function)和element.detachEvent(event, function)其中event是事件名称如“onclick”、“onload”、“onmouseover”等,function是监听函数名称。

掌握这三点,就能快速掌握JavaScript中的事件监听!

3、标准的DOM的监听方法

标准的DOM定义两个方法添加和删除监听函数,是addEventListener()和removeEventListener()。与IE不同之处在于这两个函数是有3个参数(名称、分配的函数名、用于冒泡阶段还是捕获阶段),第三个参数如果是捕获阶段是true,反之为false,语法是element.addEventListener(event, function, useCapture) 和element.removeEventListener(event, function, useCapture) 。

关于“php用户交互变量传递”先聊到这。还是要多多练习。每天学习一个知识点,每日寄语”要趁自己还没有承担太多压力,还不需要考虑太多事情的时候,多做一些自己想要做的事情。”如转载文章清标明出处。


分享到:


相關文章: