javascript高级程序设计 -- 读书笔记（三）

最新推荐文章于 2023-06-02 09:52:29 发布

猿敲月下码

最新推荐文章于 2023-06-02 09:52:29 发布

阅读量771

点赞数

分类专栏： javascript 文章标签： javascript 读书 function div object 框架

本文链接：https://blog.csdn.net/thc1987/article/details/6417399

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

javascript高级编程 -- 读书笔记（1） :
http://blog.csdn.net/thc1987/archive/2011/05/13/6417361.aspx

javascript高级编程 -- 读书笔记（2） :

http://blog.csdn.net/thc1987/archive/2011/05/13/6417367.aspx

-------------------------------------

事件

<html>
<head>
<script type="text/javascript">
  function f(){
   var oDiv = document.getElementById("d");
   oDiv.onclick = function(){
   alert("div");
   }
  }
</script>
</head>
<body οnlοad="f()">
    <div id="d">div1</div>
    <div id="d2" οnclick="alert('div2')">div2</div>
</body>
</html>
以上两种方法功能相同

------------
IE中的attachEvent()和detachEvent()方法.

[Object].attachEvent("nameOfEventHander",fn);
[Object].detachEvent("nameOfEventHander",fn);

attachEvent()函数被作为事件处理函数添加
detachEvent()在事件处理函数列表中查找指定的函数,并移除
function f2(){
   var oDiv = document.getElementById("d");
   oDiv.attachEvent("onclick",fn);
   oDiv.attachEvent("onclick",fn2);
  }

  var fn = function(){
   alert("attachEvent");
  }
  var fn2 = function(){
   alert("attachEvent2");
  }

<div id="d">div1</div>
点击div1,先弹出attachEvent2再弹出attachEvent

如果改为:
function f3(){
   var oDiv = document.getElementById("d");
   oDiv.onclick = fn;
   oDiv.attachEvent("onclick",fn2);
  }

则先attachEvent再attachEvent2

-------------------
DOM方法addEventListener()和removeEventListener()用来分配和移除事件处理函数
这些方法有三个参数:事件名称,要分配的函数和处理函数是否用于冒泡阶段还是捕获阶段.
true为捕获阶段,反之冒泡阶段

[Object]addEventListener("name_of_event",fn,bCapture);
[Object]removeEventListener("name_of_event",fn,bCapture);

function f4(){
   var oDiv = document.getElementById("d");
   oDiv.addEventListener("click",fn,false);
   oDiv.addEventListener("click",fn2,false);
  }

如果在add的时候第三个参数为false,则remove的时候第三个参数同样为false

-------------------

定位:

IE中,事件对象是window对象的一个属性event

oDiv.onclick = function(){
var oEvent = window.event;
}

DOM标准:对象必须作为唯一的参数传给事件处理函数
oDiv.onclick = function(){
var oEvent = arguments[0];
}
或
oDiv.onclick = function(oEvent){

}

IE和DOM的相似性:

1. 获取事件类型
var sType = oEvent.type;
function f(oEvent){
      if(oEvent.type=="click"){
       alert("clicked");
      }else if(oEvent.type == "mouseover"){
       alert("mouseovered");
      }
    }

    function load(){
      var oDiv = document.getElementById("d");
      oDiv.onclick = f;
      oDiv.onmouseover = f;
    }

2. 获取按键代码(keydown/keyup)
var iKeyCode = oEvent.keyCode;

3. 检测Shift,Alt,Ctrl,返回boolean类型
var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;

4. 获取客户端坐标

var iClientX = oEvent.clientX;
var iClientY = oEvnet.clientY;

5. 获取屏幕坐标

var iScreenX = oEvent.screentX;
var iScreenY = oEvent.screentY;
两个属性表示返回离用户屏幕边界有多少个像素的整数

---------------
区别:
IE和DOM的区别

1. 获取目标:
假设<div>元素分配onclick事件处理函数,触发click时,<div>就被认为是目标

IE中,目标包含在event对象的srcElement属性中
var oTarget = oEvent.srcElement;

DOM兼容的浏览器,目标包含在target中
var oTarget = oEvent.target

2. 获取字符代码
如果按键代表一个字符,IE的keyCode将返回字符的代码(等于它的Unicode值)
var iCharCode = oEvent.keyCode;

DOM中按键的代码和字符会有一个分离,使用charCode属性
var iCharCode = oEvent.charCode;

然后用这个值来获取实际的字符,
var sChar = String.fromCharCode(iCharCode);

如果不确定按下的键是否包含字符,可以使用isChar来进行判断
if(oEvent.isChar){
var iCharCode = oEvent.charCode;
}

3. 阻止某个时间的默认行为
IE中要阻止事件的默认行为,将returnValue属性设置为false;
oEvent.returnValue = false;
在Mozilla中
oEvent.preventDefault();

禁止右键:
document.body.oncontextmenu = function(oEvent){
if(isIE){
  oEvent = window.event;
  oEvent.returnValue = false;
}else{
  oEvent.preventDefault();
}
}

4. 停止事件复制(冒泡)
IE中,要阻止进一步冒泡
oEvent.cancelBubble = true;

mozilla中
oEvent.stopPropagation();

===========================
事件类型:
鼠标事件:使用鼠标时触发的事件
键盘事件:使用键盘时触发的事件
HTML事件:窗口发生变动或者发生特定的客户端-服务端交互时触发
突变事件:底层的DOM结构发生改变时触发

--------------
鼠标事件:

click: 点击鼠标左键时发生(右键不发生).当焦点在按钮上,并按了回车同样会发生.
dblclick: 双击鼠标时发生(右键不发生)
mousedown: 点击任意一个鼠标按钮时发生
mouseout: 鼠标指针在某个元素上,且用户正要将其移出元素的边界时发生
mouseover: 鼠标移出某个元素,到另一个元素上时发生
mouseup: 松开任意一个按钮时发生
mousemove: 鼠标在某个元素上持续发生

1. 鼠标事件的属性:
坐标属性: 如clientX clientY等
type
target(DOM)或srcElement
shiftKey,ctrlKey,altKey,metaKey(DOM)
button(只有在mousedown,mouseover,mouseout,mousemove,mouseup事件中)

对于mouseover,mouseout事件还有额外事件.

在IE中fromElement属性包含鼠标指针来自的元素,toElement包含鼠标指针指去的元素
对于mouseover事件,toElement总是等于srcElement
对于mouseout事件,fromElement总是等于srcElement

在DOM中的mouseover事件中,relatedTarget指出指针来自何处
在DOM中的mouseout事件中,relatedTarget指出鼠标指针去往何方

2. 顺序:

在同一个目标上顺序如下:
(1)mousedown
(2)mouseup
(3)click
(4)mousedown
(5)mouseup
(6)click
(7)dblclick

-----------------------
键盘事件:

keydown: 按下某个键时发生. 一直按着会不断触发(opera浏览器除外)
keypress: 按下一个键,并产生一个字符时发生.一直按下会持续发生
keyup:释放按键时发生

属性:
keyCode
charCode(DOM)
target(DOM)或srcElement(IE)
shiftKey,ctrlKey,altKey,metaKey(DOM)

顺序:
用户按一次字符按键时顺序:
(1)keydown
(2)keypress
(3)keyup

用户按一次非字符按键(如shift)时顺序:
(1)keydown
(2)keyup

-----------------------
HTML事件:
load事件: 页面完全载入后,在window对象上触发,所有的框架都载入后,在框架集上触发;
     <img />完全载入后,在其上触发;或者对于<object />元素,其完全加载,在其上触发;
unload事件: 页面完全卸载后,在window对象上触发;所有的框架都卸载后,在框架集上触发;
    或者对于<object/>完全卸载在其上触发
abort事件: 用户停止下载过程时,如果<object/>对象还未完全载入,就在其上触发;
error事件:JavaScript脚本出错在window对象上触发;某个<img/>指定图像无法载入时,在其上触发;
     或<object/>对象元素无法载入时触发;或框架集中的一个或多个无法载入时触发;
select事件: 用户选择文本框中的一个或多个字符时触发.
change事件: 文本框失去焦点并且在它获取焦点后内容发生过改变时触发;某个<select/>元素的值发生改变时触发;
submit事件: 点击提交按钮,在<form>上触发
reset事件: 点击重置按钮,在<form>上触发
resize事件:窗口或框架大小发生改变时触发
scroll事件: 任何滚动条的元素上卷动它时触发
focus事件: 任何元素或者窗口本身获取焦点时触发
blur事件: 任何元素或者窗口本身失去焦点时触发

-----------------------
变化事件:
是DOM标准的一部分,但目前没有任何主流的浏览器实现了它.
DOMSubtreeModified: 文档或者元素的子树因为添加或删除节点而改变时触发
DOMNodeInserted: 当一个节点作为另一个节点的子节点插入时触发
DOMNodeRemoved: 当一个节点作为另一个节点的子节点被删除时触发
DOMNodeRemovedFromDocument: 当一个节点从文档中删除时触发
DOMNodeInsertedIntoDocument: 当一个节点插入到文档中时触发

=======================

跨平台事件:

IE中的事件跟DOM中的事件有好多地方不一样,
我们要做的就是把事件对象揉合成一个通用的对象.

可以写个类

/*
* 事件工具类
* */

var EventUtil = {

/**
* 添加事件
* @param :
* oTarget: 对象元素
* sEventType:事件类型
* fn:函数名
*/
addEventHandler : function(oTarget,sEventType,fn){
  if(oTarget.addEventListener){
   oTarget.addEventListener(sEventType,fn,false);
  }else if(oTarget.attachEvent){
   oTarget.attachEvent("on" + sEventType,fn);
  }else{
   oTarget["on" + sEventType] = fn;
  }
}
/**
* 移除事件
* @param :
* oTarget: 对象元素
* sEventType:事件类型
* fn:函数名
*/
,removeEventHandler : function(oTarget,sEventType,fn){
  if(oTarget.removeEventListener){
   oTarget.removeEventListener(sEventType,oTarget,false);
  }else if(oTarget.detachEvent){
   oTarget.detachEvent("on"+sEventType,fn);
  }else {
   oTarget["on"+sEventType] = null;
  }
}

/**
* 格式化事件对象,做到IE与DOM的统一
* @param:
* oEvent:事件对象
*/
,formatEvnet : function(oEvent){
  if(isIE()){
   oEvent.charCode = (oEvent.type == "keypress")?oEvent.charCode: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.relateTarget = oEvent.toElement;
   } else if(oEvent.type == "mouseover"){
    oEvent.relateTarget = oEvent.fromElement;
   }

   // 阻止冒泡
   oEvent.stopPropagation = function(){
    this.cancelBubble = true;
   }

   oEvent.target = oEvent.srcElement;
   oEvent.timestamp = (new Date()).getTime();
  }
  return oEvent;
}

/**
* 格式化事件对象
*/
,getEvent : function(){
  if(window.event){
   return this.formatEvnet(window.event);
  }else {
   return EventUtil.getEvent.caller.arguments[0];
  }
}
}

caller:
每个函数都有一个caller属性,它包含了指向调用它的方法的引用.
例如:funcA()调用了funB(),那么funB.caller就等于funA.

function funA(){
  funA.name = "jack";
  funB();
}
function funB(){
  var whoCallMe = funB.caller;
  alert(funA.name); // jack
}

function callerTest(){
  funA();
}

BTW: 我是一名java开发者,J2EE方向,个人感觉学好javascript真的很有必要,因为前端页面少不了会用到js

有时候甚至会达到事半功倍的效果. 我一开始进入公司不怎么会js只会简单的语法什么的...发现在工作中遇到了许多问题.

影响了工作进度,因此下狠心好好学习了一下,基本把知识点过了下,想必这些知识运用在开发中已经足够了.如果不是做复杂的js框架级别.

如果有什么问题希望大家指出来,毕竟学习是个互动分享的过程,自己闷头闷脑学习也不会学出什么名堂的.. :)