<html>
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage()
...{
var op = document.body.getElementsByTagName("p")[0];
document.body.removeChild(op);
}
function replaceMessage()
...{
var op = document.createElement("p");
var oText = document.createTextNode("hello universe!");
op.appendChild(oText);
var oldOp = document.getElementsByTagName("p")[0];
oldOp.parentNode.replaceChild(op,oldOp);
}
function appendMessage()
...{
var op = document.createElement("p");
var oText = document.createTextNode("hello universe two !");
op.appendChild(oText);
document.body.appendChild(op);
}
function insertMessage()
...{
var op=document.createElement("p");
var oText = document.createTextNode("hello insert before");
op.appendChild(oText);
var oldOp = document.body.getElementsByTagName("p")[0];
oldOp.parentNode.insertBefore(op,oldOp);
}
function getUserAgent()
...{
var sUserAgent = navigator.userAgent;
var appVersion = parseFloat(navigator.appVersion);
alert(sUserAgent);
alert(appVersion);
}
function handleEvent()
...{
var oDiv = document.getElementById("div1");
oDiv.onclick=function()
...{
alert("I was clicked!");
}
//用这种分配事件的形式,事件响应函数的名字必须为小写的.
}
//IE中,attachEvent(),detachEvent(),在IE中,每个元素和window对象都有这两个方法
var fnclick1=function()
...{
alert("I am clicked!");
}
var fnclick2=function()
...{
alert("I am also clicked!");
}
var addIeEvent=function()
...{
var oDiv = document.getElementById("div1");
oDiv.onclick=fnclick1;
oDiv.attachEvent("onclick",fnclick2);
}
function addDomEvent()
...{
var oDiv = document.getElementById("div1");
oDiv.addEventListener("click",fnclick1,true);
oDiv.addEventListener("click",fnclick2,true);
oDiv.addEventListener("click",fnclick1,false);
oDiv.addEventListener("click",fnclick2,false);
}
//DOM中,addEventListener(),removeEventListener()用于分配和移除事件处理函数,
//第三个参数为true时,事件处理函数用于捕获阶段,为false时,用于冒泡阶段.
//IE , DOM区别是很大的
function getIeEvent()
...{
var oEvent = window.event;
alert(oEvent.type);
}
//在IE中,event对象是window对象的一个属性。
//DOM中,访问的方式是不一样的
function getDomEvent()
...{
var oEvent = arguments[0];
}
//当然,更方便的方式是直接的命名参数
function getDomEvent(oEvent)
...{
}
//oEvent.type 可以获取到事件的类型
//获取按键的代码(keydown/keyup事件)
var iKeyCode = oEvent.keyCode;
//检测shift,alt,ctrl是否被按下,下面的方法都是返回布尔值
var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;
//获取客户端坐标
var iClientX = oEvent.clientX;
var iClientY = oEvent.clienty;
//获取屏幕坐标
var iScreenX = oEvent.screenX;
VAR iScreenY = oEvent.screenY;
//获取事件源
var oTarget = oEvent.srcElement; // IE
var oTarget = oEvent.target; // DOM
//获取字符代码
var iCharCode = oEvent.keyCode; //IE
var iCharCode = oEvent.charCode; //DOM
//阻止某个事件的默认行为
oEvent.returnValue =false;//IE
oEvent.preventDefault(); //DOM
//for example
document.body.oncontextmenu = function(oEvent)
...{
if(isIE)
...{
oEvent = window.event;
oEvent.returnValue =false;
}
else
...{
oEvent.preventDefault();
}
}
//键盘事件:
//keydown-----用户在键盘上按下某按键的时候发生.
//keypress----用户按下一个按键,并产生一个字符时候发生(也就是不管shift,alt之类的键)
//keyup------用户释放按着的按键发生
</script>
</head>
<body onload="getIeEvent()">
<p>hello world!</p>
<div id="div1">实打实的</div>
</body>
</html>
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage()
...{
var op = document.body.getElementsByTagName("p")[0];
document.body.removeChild(op);
}
function replaceMessage()
...{
var op = document.createElement("p");
var oText = document.createTextNode("hello universe!");
op.appendChild(oText);
var oldOp = document.getElementsByTagName("p")[0];
oldOp.parentNode.replaceChild(op,oldOp);
}
function appendMessage()
...{
var op = document.createElement("p");
var oText = document.createTextNode("hello universe two !");
op.appendChild(oText);
document.body.appendChild(op);
}
function insertMessage()
...{
var op=document.createElement("p");
var oText = document.createTextNode("hello insert before");
op.appendChild(oText);
var oldOp = document.body.getElementsByTagName("p")[0];
oldOp.parentNode.insertBefore(op,oldOp);
}
function getUserAgent()
...{
var sUserAgent = navigator.userAgent;
var appVersion = parseFloat(navigator.appVersion);
alert(sUserAgent);
alert(appVersion);
}
function handleEvent()
...{
var oDiv = document.getElementById("div1");
oDiv.onclick=function()
...{
alert("I was clicked!");
}
//用这种分配事件的形式,事件响应函数的名字必须为小写的.
}
//IE中,attachEvent(),detachEvent(),在IE中,每个元素和window对象都有这两个方法
var fnclick1=function()
...{
alert("I am clicked!");
}
var fnclick2=function()
...{
alert("I am also clicked!");
}
var addIeEvent=function()
...{
var oDiv = document.getElementById("div1");
oDiv.onclick=fnclick1;
oDiv.attachEvent("onclick",fnclick2);
}
function addDomEvent()
...{
var oDiv = document.getElementById("div1");
oDiv.addEventListener("click",fnclick1,true);
oDiv.addEventListener("click",fnclick2,true);
oDiv.addEventListener("click",fnclick1,false);
oDiv.addEventListener("click",fnclick2,false);
}
//DOM中,addEventListener(),removeEventListener()用于分配和移除事件处理函数,
//第三个参数为true时,事件处理函数用于捕获阶段,为false时,用于冒泡阶段.
//IE , DOM区别是很大的
function getIeEvent()
...{
var oEvent = window.event;
alert(oEvent.type);
}
//在IE中,event对象是window对象的一个属性。
//DOM中,访问的方式是不一样的
function getDomEvent()
...{
var oEvent = arguments[0];
}
//当然,更方便的方式是直接的命名参数
function getDomEvent(oEvent)
...{
}
//oEvent.type 可以获取到事件的类型
//获取按键的代码(keydown/keyup事件)
var iKeyCode = oEvent.keyCode;
//检测shift,alt,ctrl是否被按下,下面的方法都是返回布尔值
var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;
//获取客户端坐标
var iClientX = oEvent.clientX;
var iClientY = oEvent.clienty;
//获取屏幕坐标
var iScreenX = oEvent.screenX;
VAR iScreenY = oEvent.screenY;
//获取事件源
var oTarget = oEvent.srcElement; // IE
var oTarget = oEvent.target; // DOM
//获取字符代码
var iCharCode = oEvent.keyCode; //IE
var iCharCode = oEvent.charCode; //DOM
//阻止某个事件的默认行为
oEvent.returnValue =false;//IE
oEvent.preventDefault(); //DOM
//for example
document.body.oncontextmenu = function(oEvent)
...{
if(isIE)
...{
oEvent = window.event;
oEvent.returnValue =false;
}
else
...{
oEvent.preventDefault();
}
}
//键盘事件:
//keydown-----用户在键盘上按下某按键的时候发生.
//keypress----用户按下一个按键,并产生一个字符时候发生(也就是不管shift,alt之类的键)
//keyup------用户释放按着的按键发生
</script>
</head>
<body onload="getIeEvent()">
<p>hello world!</p>
<div id="div1">实打实的</div>
</body>
</html>
ajax in practise :
The Basic Event Model, also informally known as the DOM Level 0 Event
Model, which is fairly easy, straightforward, and reasonably cross-platform.
■ The DOM Level 2 Event Model, which provides more flexibility but is
supported only on standards-compliant browsers such as Firefox, Mozilla,
and Safari.
■ The Internet Explorer Event Model, which is functionally similar to the
DOM Level 2 Model, but which is proprietary to Internet Explorer.