JavaScript讲义记录6-7

 六.事件
(一)、事件流
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" onkeypress="return LessThan(this);" ></textarea>
其中maxlength为自定义属性

 

(2)自动选择文本
<input type="text" onmouseover="this.focus()" onfocus="this.select()">