关闭

javascript学习笔记

标签: javascriptfunction浏览器iemozillascroll
681人阅读 评论(0) 收藏 举报

转自Blogjava:http://www.blogjava.net/amigoxie/archive/2007/08/27/139711.html

一.今天的事件

 事件DOM的一部分,在DOM Level1中未定义任何事件,在Level中定义了一小部分子集,完整的事件是在Level3中规定的,该标准在2004年最终定案。

 Mozilla的事件模式与DOM标准最为接近,IE成为唯一一个对DOM事件模式缺乏良好支持的浏览器。

 

二.事件流

 事件流意味着在页面上可有不仅一个,甚至多个元素响应同一个事件。

1.       冒泡型事件

IE上的解决方案的绰号为冒泡的技术。冒泡型事件的基本思想是,时间按照最特定的目标到最不特定的事件目标的顺序触发。

IE6.0中,<html/>元素也可接收冒泡的时间。

2.       捕获型事件

Netscape Navigator4.0使用了捕获型事件的解决方案。事件从最不确定的对象(document对象)开始触发,然后到最精确。

3DOM事件流

       DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。

       DOM事件模型的最独特的性质是,文本节点也触发事件(在IE中不会)。

 

三.时间处理函数/监听函数

事件是用户或浏览器自身进行的特定行为。这些事件都有自己的名字,如clickload等。用于响应某个事件而调用的函数称为事件处理函数

       如果是JavaScript中分配的事件处理函数,则需要首先获得要处理对象的引用,然后将函数赋值给事件处理函数属性,eg1.

用这个分配方法,事件处理函数必须小写,才能正确响应事件。

       var oDiv = document.getElementById(“div1”);
       oDiv.onclick 
= function() {
       alert(“I was clicked.”);
}

      

       Eg2. <div onclick=”alert(‘I was clicked.’)”></div>

在例二中,事件处理函数的大小写可以任意

1.       IE

IE中,每个元素和window对象都有两个方法:attachEvent()detachEvent()attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.

var fnClick = function() {
              alert(“Clicked
!”);
       }

       
var oDiv = document.getElementById(“div1”);
       oDiv.attachEvent(“onclick”, fnClick);
       oDiv.detachEvent(“onclick”, fnClick);

 

2.       DOM

DOM方法addEventListener()removeEventListener()用来分配和移除事件处理函数。与IE不同,这些方法需要三个参数:事件名称、要分配的函数和处理函数用于冒泡阶段(为false时)还是捕获阶段(为true时)。Eg.

oDiv. addEventListener (“onclick”, fnClick, false);

oDiv.removeEventListener (“onclick”, fnClick, false);

如果使用传统方法直接给事件处理函数属性赋值,事件处理函数将被添加到事件的冒泡阶段,eg.

oDiv.onclick = fnClick;

oDiv.removeEventListener (“onclick”, fnClick, false);

 

四.             事件对象

事件对象只在发生事件时才被创建,且只有事件处理函数才能访问。所有事件处理函数执行完毕后,事件对象就被销毁。

1.       定位

IE中,事件对象是window对象的一个属性event,也就是说,事件处理函数必须这样访问事件对象:

oDiv.onclick = function() {

        var oEvent = window.event;

}

Event对象只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。

2.       属性/方法

见页面233-235页,在此不详述。

3.       相似性

1) 获取事件类型

下面代码可在任何浏览器中获取事件的类型:

var sType = oEvent.type;

它返回“click”或“mouseover”之类的值。Eg.2) 获取按键代码

function handleEvent(oEvent) {
              
if (oEvent.type == “click”) {
       alert(“Clicked
!”);
}
 else if (oEvent.type == “mouseover”) {
       alert(“mouse over
!”);
}

}

oDiv.onclick 
= handleEvent;
oDiv.onmouseover 
= handleEvent;

 

Eg. var iKeyCode = oEvent.keyCode;

例如,Enter键的keyCode13,空格键的keyCode32,回退键为8.

3) 检测ShiftAltCtrl

Eg.   var bShift = oEvent.shiftKey;

        var bAlt = oEvent.altKey;

        var bCtrl = oEvent.ctrlKey;

4) 获取客户端坐标

Eg.  var iClientX = oEvent.clientX;

        var iClientY = oEvent.clientY;

5) 获取屏幕坐标

可用screenXscreenY属性来获取鼠标指针在计算机屏幕中的位置

var iScreenX = oEvent.screenX;

var iScreenY = oEvent.screenY;

4.区别

1)获取目标

 IE中:var oTarget = oEvent.srcElement;

 DOM兼容的浏览器中:var oTarger = oEvent.target;

2)获取字符代码

IE中:var iCharCode = oEvent.keyCode;

 DOM兼容的浏览器中:var iCharCode = oEvent.charCode;

3)阻止某个事件的默认行为

IE中:oEvent.returnValue = false;

 DOM兼容的浏览器中:oEvent.preventDefault();

4)阻止事件复制(冒泡)

IE中:oEvent.cancelBubble = true;

 mozilla中:oEvent.stopPropagation ();

 

五.事件的类型

DOM标准定义了以下几种事件:

      鼠标事件
     
键盘事件

      HTML事件:窗口发生变动或者发生特定的客户端-服务端交互时触发;

      突变事件:底层的DOM结构发生改变时触发。

1.       鼠标事件

Eg. clickdbclickmousedownmouseoutmouseovermouseupmouseover

1) 属性

Eg. 坐标属性(egclientXclientY等)、type属性、targetsrcElement属性、shiftKeyctrlKeyaltKeymetaKeyDOM)属性、button属性(只在mousedownmouseovermouseoutmouseovermouseup事件中)。

2) 顺序

在同一个目标上要按顺序发生以下事件: mousedown->mouseup->click->mousedown->mouseup->click->dbclick

2.       键盘事件

       键盘事件有:keydownkeypresskeyup

1) 事件的属性

对某个键盘事件,会填入如下的事件属性: keyCodecharCode(仅DOM)、target(DOM)或者srcElementIE)、shiftKeyctrlKeyaltKeymetaKeyDOM)属性。

2) 顺序

按下一个字符键,发生事件顺序为: keydown->keypress->keyup;

按下一个非字符键,发生事件顺序为:keydown->keyup

3.       HTML事件

HTML事件有: loadunloadaborterrorselectchangesubmitresetresizescrollfocusblur事件。

1) loadunload事件

eg. window.onload = function() {

        alert(“loaded!”);

}

2) resize事件

resize事件用来判断何时动态的改变某些元素。Eg.

<body onresize=”alert(‘Resizing’)”>

最大化或最小化窗口时,也会触发resize事件。

3) Scroll事件

Eg. <body onscroll=”alert(‘Scroll)”>

4.变化事件

    变化事件包括如下内容:

       DOMSubtreeModified——当文档或者元素的子树因为添加或删除节点而改变时触发;

       DOMNodeInserted——当一个节点作为另一个节点的子节点插入时触发;

       DOMNodeRemoved——当一个节点作为另一个节点的子节点删除时触发;

       DOMNodeRemovedFromDocument——当一个节点从文档中删除时触发;

      DOMNodeInsertedIntoDocument——当一个节点插入到文档中时触发。

    这些事件的目的是,提供一个独立于语言的事件范围,使其可使用在所有基于XML的语言中。

 

六.跨平台的事件

1. EventUtil对象

     var EventUtil = new Object;

2. 添加/删除事件处理函数3. 格式化event对象 

EventUtil.addEventHandler = function() {
        
if (oTarget.addEventListener) //对DOM兼容的浏览器
       oTarget.addEventListener(sEventType, fnHandler, false);
}
 else if (oTarget.attachEvent) //对IE
       oTarget.attachEvent("on" + sEventType, fnHandler);
}
 else {
       oTarget[
"on" + sEventType] = fnHandler;
}

}


EventUtil.removeHandler 
= function(oTarget, sEventType, fnHandler) {
        
if (oTarget.removeEventListener) //对DOM兼容的浏览器
               oTarget.removeEventListener(sEventType, fnHandler, false);
}
 else if (oTarget.detachEvent) //对IE
       oTarget.detachEvent("on" + sEventType, fnHandler);
}
 else {
       oTarget[
"on" + sEventType] = null;
}

}

 

     一种对付IEDOM中的event对象之间区别的最佳手段是,调整它们使之尽可能地表现相似,因为更多的浏览器使用的是DOM的事件类型,所以将IE的事件模型调整为接近于DOM事件模型就可以了。

    根据DOM属性/方法与IE属性/方法的不同,最后可得出如下的格式化event对象函数,如下所示:4. 获取事件对象

EventUtil.formatEvent = function(oEvent) {
        
if (isIE && isWin) {
       oEvent.charCode 
= (oEvent.type == "keypress"? oEvent.keyCode : 0;
       oEvent.eventPhase 
= 2;
       oEvent.isChar 
= (oEvent.charCode > 0);
       oEvent.pageX 
= oEvent.clientX + document.body.scrollLeft;
       oEvent.pageY 
= oEvent.clientY + document.body.scrollTop;
       oEvent.preventDefault 
= function() {
       
this.returnValue = false;
}
;

if (oEvent.type == "mouseout"{
       oEvent.relatedTarget 
= oEvent.toElement;
}
 else if (oEvent.type == "mouseover"{
       oEvent.relatedTarget 
= oEvent.fromElement;
}

oEvent.stopPropagation 
= function() {
       
this.cancelBubble = true;
}
;
oEvent.target 
= oEvent.srcElement;
oEvent.time 
= (new Date()).getTime();
}

return oEvent;
}

 

      IEDOM使用不同的方法来获取event对象。在IE中,event对象是与window对象相关的,而在DOM中,它独立于任何其他对象,并且是作为参数传递的。下面我们编写一个通用的获取event对象的函数,代码如下:    调用举例如下:七.  小结

EventUtil.getEvent = function() {
       
if (window.event) {
       
return this.formatEvent(window.event);
}
 else {
       
return EventUtil.getEvent.caller.arguments[0];
}

}

 

oDiv.onclick = function() {
        
var oEvent = EventUtil.getEvent();
}

 

     本章详细介绍了JavaScript中事件、事件流的概念,详细研究了event对象,最后一节还创建了一个跨浏览器事件库,可使用同一套方法来访问事件对象,添加/删除事件处理函数,而无需考虑浏览器检测的问题。

0
0
查看评论

javascript基础学习笔记

编者寄言:  本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的地方,具体代码部分请自行上网查找,给您带来的困扰,非常抱歉。 这篇文章的主要目的是给一些自学 以及 对 ja...
  • u012967849
  • u012967849
  • 2016-07-20 14:08
  • 1954

javascript学习笔记

第一章 一、JavaScript概述 JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。 特点: 1.交互性(它可以做的就是信息的动态交互) 2.安全性(它不允许直接访问本地硬盘) 3.跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)。 二、JavaScript...
  • zhoulenihao
  • zhoulenihao
  • 2013-09-04 23:04
  • 4104

js学习笔记(比较全)

什么是JavaScript? 1. JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言)。 2. JavaScript 通常被直接嵌入 HTML 页面。 3. JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。 特点: 1....
  • jiangzhongwei_
  • jiangzhongwei_
  • 2016-07-22 20:12
  • 603

JavaScript for Kids 学习笔记1. 学习环境

第一章讲了一堆废话。不过,确实也有干货,那就是学习环境。学习过程中必须要有一个简单易用的练习平台,就像Swift的Playground。
  • wershest
  • wershest
  • 2017-03-10 12:24
  • 444

HTML5学习笔记 —— JavaScript基础知识

来源于我的HTML5学习笔记,通过它可以快速入门HTML5,同时可以作为工作中快速查找知识点的利器。 本文由浅入深地详解了JavaScript的各项基础知识点,通过本文你将会对JavaScript语言有深入的了解。 仔细学习文章中的知识点,并结合文章中的习题将会为你打下坚实的JavaScript基...
  • chencl1986
  • chencl1986
  • 2017-05-11 21:51
  • 2556

前端无小事之HTML--LocalStorage

参考书籍:《JavaScript 权威指南----ECMAScript5+HTML5DOM+HTML5BOM》编著:张亚飞 1.什么是Web存储? Web存储机制是一种通过字符串形式的 key/value 对来安全地存储和使用客户端数据的方法。在HTML5之前,Web存储先后出现了Coo...
  • pengjunlee
  • pengjunlee
  • 2016-11-06 10:34
  • 10839

《JavaScript高级程序设计 第三版》学习笔记 (十一)事件详解

一、事件流 1.事件冒泡:事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。最早使用事件冒泡的是IE,现在绝大多数浏览器都使用冒泡。IE9、Firefox、Chrome、Safari都将事件冒泡到window。 2.事件捕获:事件捕获是由不...
  • lbxx1984
  • lbxx1984
  • 2014-09-01 21:55
  • 1417

JS基础学习笔记整理

JavaScript是一种基于对象的脚本编程语言,是浏览器上的程序语言。当web容器输出内容到浏览器时,这个内容是包含js源代码的,此时,JavaScript可以操作浏览器上的一切内容,在浏览器上提供用户交互,页面美化,增加页面的智能性。 JavaScript是一种基于对象的语言,通过 JavaS...
  • laoma4102
  • laoma4102
  • 2011-12-30 13:30
  • 7106

js面向对象学习笔记之九(BOM 与 DOM 中常用属性分析)

一  BOM对象 window 的 相关属性 1. 用户配置机器配置对象 navigator navigator.userAgent //该属性可以查看用户机器浏览器的配置 "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Ma...
  • wujiangwei567
  • wujiangwei567
  • 2015-06-08 15:35
  • 955

【js学习笔记-051】类和模块

如果两个对象继承自同一个原型,往往意味着(但不是绝对)它们是由同一个构造函数创建并初始化的。 在javascript中,类的所有实例对象都从同一个原型对象上继承属性。因此,原型对象是类的核心。 【js学习笔记】类和原型   回顾inherit(p) function inherit(p){...
  • pigpigpig4587
  • pigpigpig4587
  • 2013-09-03 23:06
  • 1268
    个人资料
    • 访问:447767次
    • 积分:4798
    • 等级:
    • 排名:第7116名
    • 原创:72篇
    • 转载:121篇
    • 译文:2篇
    • 评论:39条
    最新评论
    友情链接