JavaScript之DOM-8 Event对象(事件概述、事件处理、event对象)

一、事件概述

事件概述

- 当用户与 Web 页面进行某些交互时,解释器就会创建相应的event对象以描述事件信息。常见的事件有:

- 用户点击页面上的某项内容

- 鼠标经过特定的元素

- 用户按下键盘上的某个按键

- 用户滚动窗口或改变窗口大小

- 页面元素加载完成或加载失败

- ...

- 1995年 IE4 浏览器就已经定义了自己的事件模型,而DOM模型2004年才最终确定标准的事件模型,并被其它浏览器所支持。所以事件处理需要注意兼容性问题

事件句柄

- 事件句柄(又称事件处理函数、事件监听函数),指用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄,在程序执行时,将相应的函数或语句指定给事件句柄,则在该事件发生时,浏览器便执行指定的函数或语句

二、事件处理

事件定义

- 为特定事件定义监听函数有三种方式

- 直接在 HTML 中定义元素的事件相关属性

- 在 JavaScript 中为元素的事件相关属性赋值

- 高级事件处理方式,一个事件可以绑定多个监听函数:

- 通常浏览器在事件传递并处理完后可能会执行与该事件关联的默认动作。例如:

- 如果表单中input type属性是"submit",点击后会自动提交表单;

- input 元素的 keydown 事件发生并处理后,浏览器默认会将用户键入的字符自动追加到 input 元素的值中

- 可采用下述方法阻止事件的默认行为

事件周期

- 解释器创建一个 event 对象后,会按如下过程将其在 HTML 元素间进行传播:

事件的处理机制

- 事件的冒泡处理机制

三、event 对象

event 对象

- 任何事情触发后将会产生一个event对象

- event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息,事件对象的常用属性:

获取 event 对象

- 需要考虑浏览器兼容性

- IE 浏览器

- js 或者 html 代码中直接使用 event 关键字

  - Firefox 浏览器

- html 代码中可以直接使用 event 关键字

- js 代码中不能直接使用 event 关键字

- 在 HTML 代码中,在事件句柄定义时,使用 event 关键字将事件对象作为参数传入方法

使用 event 对象

- 对于 event 对象,经常需要获得事件源

- 事件源,即触发事件的元素(事件的目标节点)

- IE 浏览器: event.srcElement

- Firefox 浏览器: event.target

总结:本章内容主要介绍了 JavaScript DOM Event对象(事件概述、事件处理、event对象)

时间: 2024-10-26 18:10:19

JavaScript之DOM-8 Event对象(事件概述、事件处理、event对象)的相关文章

DOM Event:事件流动(Event Flow)

考虑这么个例子: <div> <button id="btn">Click Me!</button> </div> 哪怕一个web开发的初学者都会知道,当我们鼠标在button上点击时,会在button上触发一个click事件.但是: button是div的一个子Node:从界面上来看,在button里点击相当于在div里点击:那click事件也会触发在div上吗? 如果click事件也触发在div上,那它们会不会共用同一个事件对象? 如

[ javascript html Dom image 对象事件加载方式 ] 对象事件加载方式

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

javascript event(事件对象)详解

1. 事件对象 thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.45;vertical-align:top;border-top:1px solid #ddd}.table>thead

JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

JavaScript的事件对象_概述/this

JavaScript 事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能. 最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数. 一.事件处理三部分组成 对象.事件处理函数=函数.例如:单击文档任意处. click 表示一个事件类型,单击. onclick 表示一个事件处理函数或绑定对象的属性(或者叫事件监听器.侦听器). document 表示一个绑定的对象,用于触发某个元素区域. function

javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler,false); }else if(element.attachEven

JavaScript基础—dom,事件

Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让javascript能操作html页面控件的类,函数. 这就是文档对象模型.按照xml文档的理解就可以. à页面中的属性,标签要是没有注明给那个对象,则统一时给window的,我们都可以通过window点击出来,进行操作,这个js中理解的一样.但是我们现在通过document.getElementById

DOM(五)事件对象

浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.onclick = function(){ var oEvent = window.event; } 尽管它是window对象属性,但event对象还是只能在事件发生时被访问,所有的事件处理函数执行完之后,该对象就消失了. 而标准的dom规定event对象必须作为唯一的参数传给事件处理函数.一次在类似