DOM编程
- 事件
- 事件: bodymousedown()后的括号不能丢(表示调用bodymousedown函数/而非onmousedown事件的响应函数是bodymousedown)
<script type=“text/javascript”>
function bodymousedown(){
alert(“哈哈”);
}
</script>
<body onmousedown=“bodymousedown()”>
</body>
- 动态添加事件处理函数:
function f1(){
alert(“1”);
}
<input type=“button” onclick=“document.ondbclick=f1” value=“事件关联” />
- HTML元素事件: onclick(单击)ondbclick(双击)onkeydown(按键按下)onkeypress(点击按键)onkeyup(按键释放)onmousedown(鼠标按下)onmousemove(鼠标移动)onmouseout(鼠标离开元素范围)onmouseover(鼠标进入元素范围)onmouseup(鼠标按键释放)
- 事件冒泡
- 事件冒泡: 如果A嵌套在B中 当A被点击时 不仅A的onclick事件被触发 B的onclick事件也会被触发/触发顺序: 由内而外
- 事件中的this
- 事件中的this: 表示发生事件的控件(只在事件响应函数中可用/在响应函数调用的函数中不可用 如要使用则需将this传递给调用函数或使用event.srcElement)
- 两种事件处理方式: ①btn.onclick=action; //指定btn的事件处理函数 ②btn.onclick=“action()”; //指定btn的匿名事件处理函数(“action()”相当于function{ action(); })
- 事件范围
- IE中<body/>的事件范围(FireFox中类似): 如果页面不满则最后一个元素以下(横向不限制)的部分是无法响应事件的 必须使用编程方式动态在document上进行监听
- body & document事件
- window.document.body
- onload事件: 网页加载完毕时触发/浏览器是一边加载文档一边解析执行 可能会出现JavaScript执行时需要操作某个元素而这个元素还没有加载 此时可以将操作代码放在onload事件中(或放在元素后面)
- onunload事件: 网页关闭(离开)后触发
- onbeforeunload事件: 网页关闭(离开)之前触发/在事件中为window.event.returnValue赋值(要显示的警告消息)
<body onbeforeunload=“window.event.returnValue=‘真的要放弃发帖退出吗？’” />
- 动态创建DOM元素
- window.document.createElement()方法: 动态创建DOM元素(write()方法只能在页面加载过程中创建DOM元素/结合元素的appendChild()方法添加到相应元素下)
Function(){
var divMain = document.getElementById(“divMain”);
var btn = document.createElement(“input”);
btn.type = “button”;
btn.value = “我是动态的”;
divMain.appendChild(btn);
}
<div id=“divMain”></div>
<input type=“button” value=“ok” onclick=“showit” />
- innerText/innerHTML: 元素标签内内容的文本表现形式和HTML源代码(几乎所有DOM元素都有该属性/可读可写)/可用innerHTML代替window.document.createElement()方法(简单 粗放 后果自负的DOM元素创建方式)
function createlink(){
var divMain = document.getElementById(“divMain”);
div.innerHTML = “<a href = ‘http://www.rupeng.com’>”:
}
- 动态产生的DOM元素网页源代码中不可见(DebugBar可见)
- createElement()方法在IE6 7下对table.appendChild(“tr”)的支持与IE8不同的解决办法: ①用tableobject.insertRow()及tableRow.insertCell()方法(方法执行完后返回tr/td到界面) ②<tr/>添加到<tbody/>中(IE6 7的不同: <table/>下添加一个<tbody/>)
- DOM元素单位
- 通过DOM读取元素的top left width height等取到的值不是数字 而是”10px”这样的字符串/为这些属性设值时IE可以使数字 FF必须是字符串(为了兼容统一使用字符串形式)
- 修改元素大小(宽度加10): ①取出宽度②parseInt()(parseInt可以将”20px”这样以数字开头的包含其他内容的字符串尽可能多的解析为数字)③(…+10)+”px”并赋值回去
- DOM元素编程定位
- DOM.style.position: static(无定位/默认显示)/absolute(绝对定位)/fixed(固定定位/位置不随浏览器窗口的滚动而改变)/relative(相对定位/相对元素默认位置的定位)
- 修改元素坐标: 一般使用absolute 然后修改元素top(上边距) left(左边距)两个样式值
- DOM样式修改
- DOM.className属性: 样式
- 单独修改样式中某个属性: DOM.style.属性名
<input type=“button” onclick=“this,style.color=‘red’”>
- CSS中属性名与JavaScript中的属性名可能不同: 主要集中在属性名中有”-”的属性/JavaScript中”-”不能用作属性名 类名(JavaScript中”-”表示减号)
background-color→(style.background)
font-size→(style.fontSize)
margin-top→(style.marginTop)
- DOM)div层
document.getElementById(“div1”).style.display = “none”/… //style.display属性为none则不显示
- 不同浏览器差异
- 不同浏览器中对DOM支持的方法不一样:
获取网页中触发事件的元素: (IE)srcElement (FF)target
获取和更改网页标签元素的文本: (IE)innerText (FF)textContent
动态为网页或元素绑定事件: (IE)attachEvent (FF)addEventListener
更多: http://www.360doc.com/content/09/0319/12/16915_2855107.shtml
- 不同浏览器中对CSS的支持不一样(比之DOM更难处理)
- JQuery之类的框架进行了封装 将不同浏览器的差异帮开发人员处理了 开发人员只要调用JQuery的方法 JQuery会帮助在不同浏览器中进行翻译(解决不同浏览器DOM层次上的不同)
- ASCⅡ & keycode
- window.event.keycode(少数可替换(如13替换为9)/大部分替换不了):
8: 退格键
46: delete
37~40: 方向键
48~57: 小键盘区的数字
96~105: 主键盘区的数字
110 190: 小键盘区和主键盘区的小数点
189 109: 小键盘区和主键盘区的负号
13: 回车
9: tab键
- 例：金额文本框
- 财务等系统中金额文本框要求:
①不能切换中文输入法
style=“ime-mode:disabled”; //只有IE支持
②(易错:粘贴值的合法性判断)不能输入非数字k==46||k==8||k==189||k==109||k==190||k==110||(k>=48&&k<=57)||(k>=96&&k<=105)||(k>=37&&k<=40)
③焦点在文本框时左对齐 离开时右对齐并显示千分位(理解)
function commafy(n){
var re = /\d{1,3}(?=(\d{3})+$)/g;
var nl = n.replace(/”(\d+)((\.\d+)?)$/, function(s,s1,s2){return s1.replace(re,”$&,”)+s2});
return nl;
}
