javascript高级程序设计 -- 读书笔记（三）
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 onload="f()">
<div id="d">div1</div>
<div id="d2" onclick="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框架级别.
如果有什么问题希望大家指出来,毕竟学习是个互动分享的过程,自己闷头闷脑学习也不会学出什么名堂的.. :)