六.事件
(一)、事件流
1.冒泡型事件
2.捕获型事件
(二)、事件监听
1.IE和Firefox简单的通用方法:(只能添加单一事件)
例如:
windows.onload = function(){
var oP = document.getElementById("myP");
oP.onclick = function(){
alert("我被点击了");
}
}
2.IE中的事件监听
例如:
function fnClick(){
alert("我被点击了");
oP.detachEvent("onclick",fnClick);
}
var oP;
window.onload = function(){
oP = document.getElementById("myP");
oP.attacheEvent("onclick",fnClick);
}
3.标准DOM的事件监听(firefox)
function fnClick1(){
alert("我被fnClick1点击");
oP.removeEventListener("click",fnClick2,false);
}
function fnClick2(){
alert("我被fnClick2点击");
}
var oP;
window.onload = function(){
oP = document.getElementById("myP");
oP.addEventListener("click",fnClick1,false);
oP.addEventListener("click",fnClick2,false);
}
(三)、事件对象
1.兼容两种浏览器:
oP.onclick = function(oEvent){
if(window.event)oEvent = window.event;
}
2.判断事件的类型:
例如:
function handle(oEvent){
var oDiv = document.getElementById("display");
if(window.event)oEvent = window.event;
if(oEvent.type == "click")
oDiv.innerHTML+="你点击了我";
else if(oEvent.type == "mouseover")
oDiv.innerHTML+="你移动到我上方";
}
window.onload = function(){
var oImg = document.getElementsByTagName("img")[0];
oImg.onclick = handle;
oImg.onmouseover = handle;
}
七.表格和表单
(一)动态控制表格
1.动态添加表格
window.onload = function(){
var oTr = document.getElementById("member").insertRow(2);
var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("100089");
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
2.动态删除表格
例如:
window.onload = function(){
var oTable = document.getElementById("member");
oTable.deleteRow(2);
oTable.rows[2].deleteCell(1);
}
(二)表单
1.可以通过document.form集合来引用表单,例如一个name属性为“myForm1”的表单可以用如下语句来获得:
document.forms["myForm1"]
2.表单的基本元素
text、password、select(下拉菜单)、radio(单选项)、checkbox(多选项)、textarea(多行文本框)、submit、reset。
3.文本框
(1)控制字符个数
单行文本框的maxlength属性
<textarea>的字符个数 例如:
<script language="javascript">
function LessThan(oTextArea){
return oTextArea.value.length<oTextArea.getAttribute("maxlength");
}
<textarea id="comments" name="comments" cols="40" rows="4" maxlength="30" οnkeypress="return LessThan(this);" ></textarea>
其中maxlength为自定义属性
(2)自动选择文本
<input type="text" οnmοuseοver="this.focus()" οnfοcus="this.select()">