03——js 获取元素id 动态注册事件 window对象
JavaScript操作DOM对象
1） JavaScript最终是要操作Html页面，让Html变成DHtml,而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象，就像XDocument一样，把Xml模拟成一个对象，提供了操作各个节点的方法，直接调用就可以了。
2） 如果JavaScript只是执行一些计算、循环等操作，而不能操作Html也就捡到它存在的意义。
3） Xml
Dom入门（把标签当做对象来处理）
1） Dom就是Html页面的模型，将每个标签都当做一个对象，Javascript通过调用Dom中的属性、属性就可以对网页中的文本框、层等元素进行编程控制。快如操作文本框中的Dom对象，就可以读取文本框中的值、设置文本框中的值。Javascrpt -> Dom就是C# -> .net Framework，没有.net，C# 只能for、while、连WriteLine、MessageBox都不行地。Dom就是一些让JavaScritp能够操作Html页面控件的类函数
2） Dom也像Win Form一样，通过事件、属性、方法进行编程。
3） CSS+JavaScript+Dom=Dhtml
4） 学习阶段只考虑IE,用IE Collector安装IE所有版本。
5） Jquery.com
事件
在DOM中有很多事件。演示：
1）
2）有时事件的响应代码比较多，就要放到一个函数中：
3）οnmοusedοwn=”userMouseDown();”中，UserMouseDown后的括号不能丢（不能写成：onmusedown=”UserMouseDowm”）,带括号表示调用函数，直接写函数名表示设置事件的处理函数为UserMouseDown.
动态设置事件
1）javascript也可以像.Net那样动态设置事件，Button.Click+=…
关联F1” οnclick=”document.οnclick=F1;”>
关联F2” οnclick=”document.οnclick=F2;”>
2）注意：οnclick=”document.οnclick=F1;”，此外的F1不要加括号，加括号就表示编程调用了F1()函数，并且把返回值赋值给了document.onclick了
3）可以通过winform的事件来演示οnclick=”hanshu()”与οnclick=hanshu;的区别。
Window对象（DOM中的顶级对象）
1） window对象代表当前浏览器当前窗口
2） 使用window对象的属性、方法的时候可以省略window
3） 比如：
1. window.alert(‘hello ’);可以省略成alert(‘hello’);
2. Window.document可以直接写document
4） 能不写window就不要写，这样可以省略js文件中的字节数
window对象的常用的方法
1） window.alert(‘大家好’); //调出警告对话框
2） window.confirm(‘确定要删除吗？’); //确定、取消对话框，返回true或false
3） window.navigate(url); //将网页重新导航到url，只支持IE、Operate 11.6 ，建议使用window.location.href = ’url’ ; //支持大多数浏览器
4） window.setInterval( code , delay ) ; //每隔一段时间执行指定的代码（类似于winForm中的Timer控件）
1. 第一个参数：指定的代码字符串(非字符串的如代码，函数，匿名函数)
2. 第二个参数：时间间隔（毫秒数）
3.var intervalId =s etInterval ( “ alert ( ‘hello’ ) ; ” , 1000 ) ;
clearInterval() 取消 setInterval 可以设定多个定时，相当于 Timer 中的 Enable=false 。因为 serInterval 可以设定多个定时，所以 clearInterval 要指定清除那个定时器的标识，即 serInterval 的返回值。
6） setTimeout也是定时执行，但是不像setInterval那样重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：interval:间隔； timeout超时
var timeoutId=setTimeout(“alert(‘hello’);”2000);
body、document对象的事件
1）onload(页面加载后触发)
1.网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，bodyonload才是全部加载完成。
2.window.控件Id(不建议使用)
3.document.getElementById('控件Id'); //推荐
2）onunload(页面卸载后触发)
1.网页关闭（或者离开）后触发。//刷新页面的时候、关闭选项卡的时候（多个选项卡）
3）onbeforunload(页面卸前触发) //谷歌没反应
1.在网页准备关闭（或者离开）前触发。//注意浏览器缓存
2.。显示的文字随浏览器版本而差异。 //="window.event.returnValue=''"只兼容IE
其它事件
1）除了属性之外，当然还有通用的HTML元素的事件：onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup（按键释放）、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)、oncontextmenu(在流浪器中单击鼠标右键显示“右键菜单”时触发)等。
Window对象常用的属性
1）window.location对象：
1.window.location.href= ’ ’ ; //重新导航到新页面，可以取值，也可以赋值。
2.window.location.reload(); //刷新当前页面
2）window.event是IE下非常重要的属性，用来获取事件发生时的信息，事件不局限于window对象的事件，所有元素的事件也可以通过event属性取到相关信息。类似于winForm中的e（EventArgs）。//兼容IE、Chrome、不兼容FF(用event参数)。
3）window.screen属性：获取屏幕的信息
alert( “分辨率：”+screen.width+’*’+screen.height);
if(screen.width<1024||screen.height<768){alert(‘分辨率太低！’);}
4）clipboardData对象，对粘贴板的操作。//只支持IE
a. setData(“text”,val),设置粘贴板中的的值。
b. getData(“text”)读取粘贴板中的值，返回粘贴板中的内容
c. 页面禁止复制：当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。
5）docouemt:对 Document对象的只读引用（非常重要）
6）history操作历史记录
1. window.history.back()后退；window.history.forward()前进
2. Window.history.go(-1)后退一步、window.history.go(1)前进一步
Window.event下重要的属性和方法：
1) altKey: 返回一个布尔值。Alt 键是否被按下并保持住了。类似的还有ctrlKey，shiftKey。演示：点击” οnclick=”if(event.altKey){alert(‘alt点击’);}else{alert(‘普通点击”);}”>
示例：
document.getElementById('div1').onclick = function(evt1) {
if(evt1.ctrlKey) { alert('鼠标点击同时按下ctrl键'); }
}//其中的evt1是事件对象参数 要兼容的话：var e =window.event|| evt1;
2) clientX、clientY属性发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。当页面中有 示例：
获取当前鼠标击的坐标var e = window.event || evt;
var x = e.clientX; （获取流浪器中鼠标的x坐标，相对于当前页面的偏移坐标，同理有clientY）
var z = e.screenX; （获取屏幕中鼠标的x坐标，相对于屏幕左上角的偏移坐标，同理有screenY）
var c = e.offsetX; (获取在当前对象中鼠标的x坐标，相对于元素自己的偏移坐标，同理有offsetY)
3) returnValue属性：如果将returnValue设置为false，就会取消默认页面的处理。
4) preventDefault();取消事件的默认动作
5) srcElement属性：获取事件源对象,始终表示最初引发事件的对象
6) Button属性：发生事件时鼠标按键，1为左键，2为右键，4为中滑轮，要测试event.button的值的时候，请在onmousedown事件中测试。在onclick事件中只能识别鼠标左键的单击。不同浏览器的返回值可能不一样。（不同浏览器值不一样）
7) 注意：FireFox等标准的浏览器下，获取事件对象不能通过window.event方式，只能在事件处理程序添加一个参数，而这个参数就是事件对象
Window对象的属性——document
1） document属性
1.document属性是window对象中最复杂的属性。
2.因为使用window对象成员可以省略window,所以一般直接写document
3.document的方法：
①write（）；向文档中写入内容。writeIn(),和write差不多，只不过是在最后添加一个回车（看的时候是多了个空格，实际上为原代码换行）。在onclick等事件中的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原来的内容融合在一起。writeIn()是在源码里面换行。与不一样。
②document.write（）经常在广告代码、整合资源代码中被使用。内容联盟、广告代码、cnzz，不需要被主页面的站长支维护，只要被嵌入的js内容提供商修改内容，显示的内容就变了
③（使用pre标签看write()与writeIn()的区别）
④ js脚本一执行就会访问服务器。在超链接的onclick里面直接写return false能禁止访问href页面 ，;
⑤ getElementById(),（非常有用），根据元素的id获取对象，网页的id不能重复。也可以直接通过元素的id来应用元素，但是有效范围、form1.textbox1之类的问题（当元素放在form中的时候（在html页面中需要通过form.元素id））因此不建议直接通过id操作元素，而是通过getElementbyBById.
⑥ getElementByName(),根据元素的name获取对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementByName返回值是对象数组。
⑦ getElementByTagName(),获取指定标签名称的元素，比如getElementByTagName(‘p’)可以获取所有的标签。*表示所有标签
⑧ Document中的方法可以嵌套用：（获取div1下的所有p标签）
varpElements = document.getElementById('div1').getElementsByTagName('p');
事件冒泡
1） 事件冒泡：如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发，B的onclick事件也会被触发。触发的顺序是“由内而外”。验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table、中添加onclick事件响应
2） 取消事件冒泡：window.event.cancleBubble=true; //IE下的写法
window.onload与body的onload
1. 二者效果完全一样，都是页面上的内容加载完毕后才触发
2. 由于网页中没有window，所以在body中写onload
3. 建议使用window.onload //使用js脚本的方式高效
4. 其实应该是 document.onload，但是所有浏览器都实现到window对象上。
事件中的this
1） 事件中的this。除了可以使用window.event.srcElement在事件响应函数中，this表示发生事件的控件，在事件响应函数才能使用this获得发生的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），如果要使用则要将this传递给函数或者使用event.srcElement.(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElment是引发事件的对象：事件冒泡
1）
2）通过“事件冒泡”说明this与window.event.srcElment的区别
3）通过οnclick=f1;与οnclick=”f1(this);”“在f1中使用this，说明this在不同情况下的使用区别。
——以上来源创智博客教学视频，为检查可能手打会有错误