JavaScript的BOM对象

事件

• 事件作用
• 验证用户输入的数据
• 增加页面的动感效果

事件与元素的绑定

• 行内事件: 耦合度高
  
  • 在标签内写上事件代码

<input type="button" name="btn1" id="btn2" value=" 点 我 2" onclick ="test();"/>

• DOM0级事件处理
  
  • 在script标签内将事件连上元素

<input type="button" name="btn1" id="btn1" value="点我"/>//dom 事件级处理var btn1 = document.getElementById('btn1');//添加处理函数给相应事件btn1.onclick = function(){alert('点击了一次');}

• DOM2级事件处理
  
  • 为同一个元素/标签绑定多个同类型事件，即元素上添加事件监听器
  • addEventListener()和 removeEventListener()

<input type="button" name="btn1" id="btn1" value="点我"/><script type="text/javascript">var obj = document.getElementById('btn1');//为 obj 对象添加事件obj.addEventListener('click',test);obj.addEventListener('click',function(){alert('我是匿名的');});function test(){alert('点点');}//移除事件obj.removeEventListener('click',test);</script>

常见事件

• JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML 事件

• onload:当页面或图像加载完后立即触发
• onblur:元素失去焦点
• onfocus:元素获得焦点
• onclick:鼠标点击某个对象
• onchange:用户改变域的内容
• onmouseover:鼠标移动到某个元素上
• onmouseout:鼠标从某个元素上离开
• onkeyup:某个键盘的键被松开
• onkeydown:某个键盘的键被按下

BOM对象模型

BOM(Browser Object Model) 与 DOM(Document Object Model)的关系

• 概述
  
  • 用于访问浏览器的功能,对浏览器进行操作。能操作窗口,导航对象,历史等
• window对象
  
  • 它表示浏览器的一个实例，
  • window 对象处于JavaScript 结构的最顶层,对于每个打开的窗口,系统都会自动为其定义window 对象
  • window 对象表示一个浏览器窗口,window 对象是全局对象
  • 系统对话框
    
    • alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
    • prompt() 方法用于显示可提示用户进行输入的对话框
    • confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框
  • 打开和关闭窗口
    
    • window.open()
    • window.close():关闭窗口

事件函数

• setTimeout()
  
  • 在指定的毫秒数后调用函数或计算表达式
  • var id = setTimeout(function,times)
  • 该方法只执行 code 一次。如果要多次调用,请使用 setInterval()或者让 code 自身再次调用 setTimeout()
  • clearTimeout():取消执行。参数:setTimeout()返回的 ID 值
• setInterval()
  
  • 可按照指定的周期(以毫秒计)来调用函数或计算表达式
  • var id = setInterval(function,times)
  • 该方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭
  • clearInterval()取消执行，参数:setInterval()返回的 ID 值

history对象

• 概述
  
  • history 对象是历史对象。包含用户(在浏览器窗口中)访问过的 URL
  • 可通过 window.history 属性对其进行访问
• history 对象的属性
  
  • length:返回浏览器历史列表中的 URL 数量
• history 对象的方法
  
  • back():加载 history 列表中的前一个 URL
  • forward():加载 history 列表中的下一个 URL
  • go():加载 history 列表中的某个具体页面

location对象

• 概述
  
  • location 对象是 window 对象之一,提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能
  • 可通过 window.location 属性来访问
• location 对象的属性
  
  • href:设置或返回完整的 URL
• location 对象的方法
  
  • reload():重新加载当前文档
  • replace():用新的文档替换当前文档

document 对象

• 概述
  
  • document 代表窗口的空白区域
  • document 是 window 的属性
  • document.title : 标题栏