笔记压缩dom和bom老师day

1、1.(继续)事件对象的生命周期第一阶段：捕获，event 对象由父元素向下传递 第二阶段：目标，event 对象在事件源对象上触发第三阶段：冒泡，event 对象由子元素向上传递注意：(1)IE 事件模型没有捕获阶段，elementachEvent( on, fn )也没有第三个参数。(2)element.on= fn 绑定的事件处理函数都是在“冒泡阶段”触发的。(3)DOM 事件模型中有完整的三个阶段，使用第三个参数 useCapture(在捕获阶段”)来指定“是否绑定element.addEventListener(xx, fn, false) 事件element.addEventList

2、ener(xx, fn, true) 事件函数绑定在冒泡阶段函数绑定在捕获阶段思考：DOM 事件模型为什么添加一个捕获阶段？2.如何获取 event 对象？IE:HTML/JS 中，可以直接使用event 对象，把event 看做是window.event 属性。FF:HTML 中可以使用使用event 对象，但 JS 中不能直接使用该对象。兼容性问题解决方法：绑定函数的方式 1：HTML:JS:绑定JS：function f1( e ) console.log(e);函数的方式 2/3：element.onclick = function( event ) console.log( even

3、t );事件对象的常用属性和方法：(1)获取事件的对象IE: event.srcElement FF: event.兼容性解决方案： var src = event.srcElement | event.;练习：创建一个计算器应用，函数对象尽可能少(2)事件的默认行为事件的默认行为：一个事件触发后，默认要执行的动作。如 submit 按钮被单击，默认就要提交表单；网页中单击上下左右键，默认就要让内容发生滚动；输入框中击键后默认就会把键盘字符显示在输入框中.有些应用中，需要事件的默认行为！IE:event.returnValue = false;DOM: event.preventDefault

4、( );保证兼容性的写法：if( event.preventDefault ) event.preventDefault( );elseevent.returnValue = false;停止事件的继续IE: event.cancelBubble = true; DOM: event.stopPropagation( );考虑兼容性的写法：if( event.stopPropagation ) event.stopPropagation();elseevent.cancelBubble = true;获取事件的发生坐标/DOM/IE/取消冒泡/停止传递/BOM： 七个对象，操作浏览器本身DOM

5、： N 个对象，操作文档内容，分为三部分：(1)DOM：用于操作任意的 ML 文档HTML DOM：用于操作HTML 文档XML DOM：用于操作XML 文档4.HTML DOM面试题：DOM 和HTML DOM 的关系DOM 只定义几种不同Node 对象：属性Node、文本Node、元素Node，但没有定义元素Node又可以细分为哪些；HTML DOM 定义了 100 种左右的元素Node每个 HTML了若干的属性，如：var img = new Image( ); img.src = 1.jpg;img.title = ;img.width = ;img.alt = ;都对应一个对象，且这

6、些对象预定义img.onclick = function()练习：使用HTML DOM 属性方式来获取和修改下述超的所有属性值标题 15.常用的 HTML DOM 对象Image 对象Table 对象特别的属性： rows特别的方法：insertRow( ) deleteRow( )类数组型属性为表格对象添加一个 tr 子对象从表格对象中删除一个 tr 子对象(3)TableRow 对象特别的属性：rowIndex : number，返回当前 tr 在table 中序号cells：类数组对象，返回当前 tr 中所有的 td 集合特别的方法：insertCell( )在 tr 中的一个新的 td

7、deleteCell( )在 tr 中删除一个 td 元素TableCell 对象Form 对象 特殊的方法：submit( ) reset( )提交表单中的内容重置表单中的内容(6)表单中的输入域对象：常用的属性：name value常用的方法：focus( ) select( )Text PasswordCheckbox.申请获取输入焦点选中输入框中的所有文本(7)Select 对象 特别的属性：multiple：，是否允许多选，注意！与HTML 中的类型不同！size： number，显示出来的选项的数量 value：string，当前选中的 option 的值 selectedIndex：number，当前选中的option 的下标 options：类数组对象，包含所有的 option特别的方法：add(option) remove(index)(8)Option 对象创建新的Option：添加一个新option删除一个optionnew Option(txt, value)new Option(特别的属性：index： text：, 110); 开始和结束之间的文本GRK： YKRKIZKJ：练习：有如下的数据：GX JGZG # A 设置当前 UVZOUT 是否被选中aOJ