DOM编程（整理自相关ppt）

•DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。JavaScript→Dom就是C#→.NetFramwork。没有.net，C#只能for、while，连WriteLine、MessageBox都不行。Dom就是一些让JavaScript能操作HTML页面控件的类、函数。

•DOM也像WinForm一样，通过事件、属性、方法进行编程。

•CSS+JavaScript+DOM=DHTML

1,事件

•事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多，就放到单独的函数中：

function bodymousedown() {

alert("网页被点坏了，赔吧！");

alert("逗你玩的！");

}

</script>

bodymousedown后的括号不能丢（ onmousedown="bodymousedown"），因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。

2,动态设置事件

可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样

function f1() {

alert("1");

}

function f2(){

alert("2");

}

<inputtype="button" onclick="document.ondblclick=f1" value="关联事件1"/>//注意f1不要加括号。如果加上括号就变成了执行f1函数，并且将函数的返回值复制给document.ondblclick

<inputtype="button" onclick="document.ondblclick=f2" value="关联事件2"/>

3.window事件

window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('aa')。

(1)alert方法，弹出消息对话框

(2)confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false

if (confirm("是否继续？")) {

alert("确定");

}

else {

alert("取消");

}

(3)重新导航到指定的地址：navigate(http://www.baidu.com);

(4)setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识

setInterval("alert('hello')", 5000);

(5)clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。

varintervalId =setInterval("alert('hello')", 5000);

clearInterval(intervalId);

(6)setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。

vartimeoutId =setTimeout("alert('hello')", 2000);

(7)showModalDialog弹出模态对话框，注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。

–第一个参数为弹出模态窗口的页面地址。

–在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。

(8)showModelessDialog弹出非模态窗口，参数等和showModalDialog一样。

4,body、document对象的事件

•（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，bodyonload才是全部加载完成

•（2）onunload：网页关闭（或者离开）后触发。

•（3）onbeforeunload：在网页准备关闭（或者离开）后触发。在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息

<bodyonbeforeunload="window.event.returnValue='真的要放弃发帖退出吗？'">。显示的文字随浏览器版本而有差异。

5,其他事件

除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等

6,window对象的属性

• window.location.href='http://www.itcast.cn'，重新导向新的地址，和navigate方法效果一样。window.location.reload() 刷新页面

• window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).

– altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子 <input type="button" value="点击" onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；

– clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。

– returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。

– srcElement，获得事件源对象。几个事件共享一个事件响应函数用。

– keyCode，发生事件时的按键值。

– button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制');}">

– （*）screen对象，屏幕的信息

– alert("分辨率：" + screen.width + "*" +screen.height);

– if (screen.width < 1024 ||screen.height < 768) {

– alert("分辨率太低！");

– }

– clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)，设置粘贴板中的值。

– 案例：复制地址给友好。<inputtype="button" value="推荐给好友"onclick="clipboardData.setData('Text','推荐给你一个网站，很好玩'+location.href);alert('已经将网址放到粘贴板中，发给你的好友即可');"/>

–

– 当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');returnfalse;"

– 很多元素也有oncopy、onpaste事件：

– 案例：禁止粘贴帐号。帐号：<inputtype="text" /><br />

重复帐号：<input type="text" onpaste="alert('为保证帐号的正确，请勿粘贴帐号');return false;" />

function modifyClipboard() {

clipboardData.setData('Text',clipboardData.getData('Text') + '本文来自专区，转载请注明来源。' + location.href);

}

oncopy="setTimeout('modifyClipboard()',100)"。用户复制动作发生0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、200……都行。不能直接在oncopy里修改粘贴板。

不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。