js-BOM事件处理机制.docx

一、BOM模型1、什么是BOM?browser object model。浏览器内置的一些对象，用来操作窗口。这些对象包括window,screen,location,navigator,document,XmlHttpRequest等。虽然该部分没有规范，但是，各个浏览器都支持这些对象。2、Window对象open方法打开一个新的窗口，例如：window.open(1.html, new, height=100, width=200,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no,status=no)；1.html 弹出窗口的文件名；new 弹出窗口的名字；如果该参数指定了一个已经存在的窗口，则 open() 方法不再创建一个新窗口，而只是返回对指定窗口的句柄。height=100 窗口高度；width=200 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar 是否显示菜单栏。scrollbars 是否显示滚动栏。resizable=no 是否允许改变窗口大小，yes为是 。location=no 是否显示地址栏，yes为是。status=no 是否显示状态栏内的信息。close方法关闭窗口返回值为窗口对象句柄status 属性设置或返回窗口状态栏中的文本。document属性获得Document对象location属性获得Location对象navigator属性获得Navigator对象screen属性获得Screen对象opener属性获得打开当前窗口的窗口对象parent属性获得当前窗口的父窗口alert方法弹出一个警告对话框confirm方法弹出一个选择对话框，返回用户是否确认。prompt方法弹出一个供用户输入信息的对话框，返回用户输入信息。setTimeout方法setTimeout(要执行的函数,毫秒数) 方法用于在指定的毫秒数后调用函数。setInterval方法按照指定的周期（以毫秒计）来调用函数。var taskId = setInterval(要执行的函数，毫秒数);返回值taskId用于clearInterval方法。clearInterval方法clearInterval(taskId);3、Document对象代表整个html文档的根节点。var obj = document.getElementById(id);var obj = document.createElement(tagName);document.write(string);4、Location对象封装了浏览器地址栏的相关信息。 href属性：指定加载的页面。 比如： location.href=js02.html;5、Navigator对象封装了浏览器本身的一些信息，比如浏览器的类型、版本、支持的语言等。6、Screen对象封装了屏幕的一些信息，比如分辨率。二、事件处理机制1、事件是如何产生的。第一种情况，用户对网页做了某些操作，比如，点击了一个按钮，产生点击事件。第二种情况，用户没有对网页做操作，也可能产生事件，比如浏览器已经将整个页面加载完毕，会产生加载完成事件。当事件产生以后，浏览器会查找产生事件的节点有没有绑订相应的事件处理代码。如果有，则调用该代码来处理。如果没有，会继续向上查找父节点，有没有对应的事件处理代码(事件冒泡)。2、绑订事件处理代码1)绑订事件处理代码到html标记之上。比如:click2)绑订事件处理代码到dom节点之上。var obj = document.getElementById(a1);obj.onclick=f1;要注意:a, f1不要加(),加()表示立即执行f1这个函数。b,可以使用匿名函数进行绑订。即：obj.onclick=function()/代码。c,绑订事件处理代码到dom节点之上，可以将js代码与html完全分离，方便代码的维护。d,如果要给绑订的函数传参。可以使用匿名函数来解决。即:obj.onclick=function()f(参数);3)使用浏览器自带的绑订方式，不同的浏览器，有各自独有的绑订方式，因为不兼容，所以尽量少用。3、事件对象1)获得事件对象ie: 可以直接使用event获得。firefox:必须给方法添加一个参数event。为了兼容ie,firefox，给方法添加一个参数event。2)事件对象的作用a,获得鼠标点击的坐标event.clientXevent.clientYb,获得事件源(产生事件的那个对象)firefox: event.target获得ie:event.srcElement获得4、事件冒泡1)什么是事件冒泡？当一个节点产生事件以后，该事件会依次向上传递(先传给父节点，如果父节点还有父节点，再向上传递)。2)如何禁止冒泡?event.cancelBubble = true;三、面向对象基础1、如何定义一个类型js没有定义类型的专门的语法，但是，可以利用函数来定义一个类型。function Person(name,age)/this修饰的变量称为属性/属性没有修饰符(private,public.) = name;this.age = age;/如果属性的值是一个方法，此时/该属性可以认为是该类型的一个方法。this.play = function()alert(play 麻将.);2、如何创建一个js对象？1)使用new关键字创建var p = new Person(zs,22);p.play();2)使用json语法创建。var p = name:zs,age:22;var p2 = name:ls,address:city:beijing,street:gjie;要注意：a,属性值如果是字符串必须用引起来。如果属性值不是字符串，不要用。b,属性值的类型可以是:string,number,boolean,null,object。3)使用ObjectOb