Javascript学习笔记#6(事件-----上)
一、JavaScript 中的事件介绍
- 事件类型
-
事件的定义:
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可 以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执 行相应的代码。 -
事件类型:事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮, 按下键盘等。我们也可以把事件类型叫做事件名字,用特定的名字来标识所谈论 的特定类型的事件。
-
事件目标:事件目标是发生的事件或与之相关的对象。当讲事件时,我们必须 同时指定类型和目标。像 window 上的 load 事件或者链接的 click 事件。在客户 端 js 的应用程序中,Window、Document、和 Element 对象是最常见的事件目标, 但是某些事件也是由其它类型的对象触发的。
-
事件处理程序或事件监听程序:我们用户在页面中进行的点击这个动作, 鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即: click、mousemove、load 等都是事件的名称。响应某个事件的函数则称为事件 处理程序,或者叫做事件侦听器。
-
事件对象:事件对象是与特定事件相关且包含有关该事件详细信息的对象。事 件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类 型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件
对象定义一组属性。 -
事件传播:事件传播是浏览器决定那个对象触发其事件处理程序的过程。
-
- 事件模型
- 内联模型
这种模型是最传统接单的一种处理事件的方法。在内联模型中,事件处 理函数是 HTML 标签的一个属性,用于处理指定事件。虽然内联在早期使用 较多,但它是和 HTML 混写的,并没有与 HTML 分离。 - 脚本模型
由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解 决这个问题,我们可以在 JavaScript 中处理事件。这种处理方式就是脚本 模型。 - DOM2 模型
“DOM2 级事件”定义了两个方法,用于添加事件和删除事件处理程序的 操作:
removeEventListener(),addEventListener()。所有 DOM 节点中都包 含这两个方法,并且它们都接受 3 个参数;事件名、函数、冒泡或捕获的布 尔值(true 表示捕获,false 表示冒泡)。
IE 事件处理程序,IE 中实现了 DOM 中类似的两个方法:attachEvent() 和 detachEvent().这两个方法接受相关的两个参数:事件处理程序名称和事 件处理程序函数。在 IE8 及 IE8 之间版本中只支持事件冒泡,所以通过 attachEvent()添加的事件处理都会被添加到冒泡阶段。
- 内联模型
二、基础事件一览
属性 | 描述 | DOM |
---|---|---|
onclick | 当用户点击某个对象时调用的事件 | 2 |
oncontextmenu | 在当用户点击鼠标右键打开上下文菜单时触发 | / |
ondblclick | 当用户双击某个对象时调用的事件 | 2 |
onmousedown | 鼠标按钮被按下调用的事件 | 2 |
onmouseenter | 当鼠标指针移动到元素上触发 | 2 |
onmouseleave | 当鼠标移出元素时触发 | 2 |
onmousemove | 鼠标移动 | 2 |
onmouseover | 鼠标移到某元素上 | 2 |
onmouseout | 鼠标从某元素移开 | 2 |
onmouseup | 鼠标按键被松开 | 2 |
属性 | 描述 | DOM |
---|---|---|
onkeydown | 某个键盘按键被按下 | 2 |
onkeypress | 某个键盘按键被按下并松开 | 2 |
onkeyup | 某个键盘按键被松开 | 2 |
以上