Fork me on GitHub

JavaScript学习笔记(三)

JS事件驱动机制

  • 由鼠标或热键引发的一连串程序的动作,称之为事件驱动
  • 对事件进行处理程序或函数,我们称之为事件处理程序

事件的分类

  • 鼠标事件:当用户在页面上用鼠标点击页面元素时,对应的dom节点会触发鼠标事件,主要有click、dblclick、mousedown、mouseout、mouseover、mousemove等。
  • 键盘事件:当用户用键盘输入信息时,会触发键盘操作事件。主要包括keydown、keypress、keyup三个。
  • HTML事件:在HTML节点加载变更等相关的事件,比如window的onload、unload、abort、error,文本框select、change等。
  • 其他事件:页面中一些特殊对象运行过程中产生的事件,比如xmlhttprequest对象的相关事件。
关于事件绑定
  1. 直接和某个html控件绑定 比如:

    1
    <input type="button" value="刷新页面" onclick="test()"/>
  2. 通过getElementById()获取到元素后,再绑定监听

    1
    2
    3
    <script>
    document.getElementById("but1").onclik=test;
    </script>
  3. detachEvent与attachEvent,假设我们有一个投票系统,但是只能投一次票,需要解除绑定机制,非ie浏览器用的addEventListener/RemoveEventListener,代码实例如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script>
    document.getElementById("but1").attachEvent("onclick",test);
    function test(){
    window.alert('you have one vote');
    document.getElementById("but1").detachEvent("onclick",test);
    }
    </script>
    <body>
    <input type="button" id="but1" value="vote"/>
    </body>

DOM编程

  • 通过DOM编程,可以写出各种网页游戏
  • DOM编程也是ajax的重要基础
  • 将HTML文档看成一颗DOM树,<html>标签为网页的根节点
  • HTML DOM把html文档呈现为带有元素、属性和文本的树结构(节点树)
  • HTML DOM对象只通过方法对元素进行动态的控制

dom

BOM 浏览器对象模型

window对象

confirm
1
2
3
4
5
6
7
8
function test(){
var res=window.confirm("你要删除吗?");
if(res){
window.alert("删除");
}else{
window.alert("放弃删除");
}
}
setInterval()
  • 该函数可以按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInrerval()
  • 取消由 setInterval() 设置的 timeout。
setTimeout()
  • 在指定的毫秒数后调用函数或计算表达式(只能调用一次)。
clearTimeout()
  • 取消由 setTimeout() 方法设置的 timeout。
1
2
3
4
5
function test(){
window.alert("hello");
}
var mytimer=setTimeout("test()",3000);
clearTimeout(mytimer);
moveTo()/moveBy()
  • moveTo() 方法可把窗口的左上角移动到一个指定的坐标。
  • moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。
1
2
window.moveTo(100,100)//相对屏幕的左上角,移动到(100,100)
window.moveBy(100,100)//相对当前这个窗口的左上角再移动(100,100)
resizeTo()/resizeBy()
  • resizeTo() 方法用于把窗口大小调整为指定的宽度和高度。
  • resizeBy() 方法用于根据指定的像素来调整窗口的大小。
1
2
resizeTo(100,100)//把窗口调整到100,100
resizeBy(100,100)//把窗口再增加100,100

Screen 对象

  • Screen 对象包含有关客户端显示屏幕的信息。

history对象

  • History 对象包含用户(在浏览器窗口中)访问过的 URL。
  • History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
  • back() 方法可加载历史列表中的前一个 URL(如果存在)。
    • history.back() ~ history.go(-1)
  • 属性: history.length 返回浏览器历史列表中的 URL 数量。

Location 对象

  • Location 对象包含有关当前 URL 的信息。
  • Location 对象是 Window 对象的一个部分,可通过window.location 属性来访问。
  • reload() 重新加载改文档。
  • 包含有关浏览器的信息

Document 对象

  • 定义:document 对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)
document.write
  • 向文档输出文本或是js代码
document.writeln
  • 这个是向文档输出文本或是js代码,与write不一样的地方是,writeln是换行输出。
  • 但是对于浏览器来说,输出效果没什么区别
document.getElementById()
  • 规定html文档中id号要唯一,如果不唯一,则只取第一个元素。
  • id不能用数字开头
document.getElementsByName()
  • 通过html控件的名字返回对象集合(注意不是数组)
document.getElementsByTagName
  • 通过html的标签名返回对象集合(注意不是数组)

如何动态的创建添加删除html元素

  • createElement()
  • appendChild()
  • removeChild() 必须获得父元素
  • parentNode 属性以 Node 对象的形式返回指定节点的父节点。
  • 在dom编程中,一个html文档会被当做一个dom树来对待,dom会把所有的html元素映射成Node节点,于是就可以使用Node节点(对象)的属性和方法

body对象

  • innerHTML 作为html来解析
  • innerText 当做文本来解析
  • appendChild()
  • removeChild()
  • getElementByTagName()
  • bgColor 该属性规定文档的背景颜色
  • onload 文档加载时触发
  • onunload 文档关闭时触发
  • onbeforeunload事件 文档关闭前触发
  • onScroll事件 用户拉动滚动条时触发
  • onselectstart事件 用户选中文档body体的内容时触发
  • body.clientWidth 网页可见区域宽,该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距
  • body.clientHeight 网页可见区域高,该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距
  • offsetWidth 网页可见区域宽(包括边线的宽)
  • offsetHeight 网页可见区域高(包括边线的高)

style对象

forms 对象

  • document.forms
  • length:返回大小
  • item(index):指定取出forms对象集合的第几个form对象
  • document.forms[i].value
  • document.forms.item[i].value

img 对象

  • onload()
  • onerror()

table 对象

  • rows 行
  • cells 列
  • deletRow() 删除一行
  • insertRow() insertCell() 插入行再在行中插入列
  • 遍历一个table
    1
    2
    3
    4
    5
    6
    7
    8
    for(var i=0;i<mytab.rows.length;i++){
    //取出一行
    var eachRow=mytab.rows[i];
    //对该行遍历
    for(var j=0;j<eachRow.cells.length;j++){
    window.alert(eachRow.cells[j].innerText);
    }
    }
------ 本文结束 ------