PHP学习笔记第【9】天（2014.11.09）——js学习

一、 事件编程

1、 事件处理程序

直接在 HTML 标记中指定事件，是应用最普遍的方法

<标记 ... ... 事件="事件处理程序">

 

<script type="text/javascript" language=JavaScript charset="UTF-8"> 
   var isPiss=0;
  document.οnkeydοwn=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0]; 
            if(e && e.keyCode==27){
             // 按 Esc //要做的事情
 } 
            if(e && e.keyCode==113){ 
            // 按 F2 //要做的事情 
}
            if(e && e.keyCode==13){
            //enter 键 //要做的事情 }
             if(isPiss==0){ $('#postAdd').focus(); 
           var rows = grid.getSelecteds();
         if(rows.length>0){
        //onRowDblClick(); onOk("add"); 
}
    }
 }
 };

 

 

 

以上程序中就是事件处理程序

 

2、 事件列表

△ onLoad：当页面载入后  一般用于body元素

△ onUnload ：当页面关闭时 一般用于body元素

△onBlur：当失去焦点时

△onFocus ：当获得焦点时

△onClick：当点击时

△onMouseOver ：当鼠标经过时

△ onMouseOut：当鼠标离开时

△ onMouseDown ：当鼠标按下时

△onMouseUp ：当鼠标抬起时

△onMouseMove ：当鼠标移动时

 

触发顺序：onmousemove、onmouseover、onmouseout

Onmouseover只触发一次

Onmousemove 反复触发

△onChange：当内容改变时 一般用于select标签

△ onSelect ：当内容被选中时

△onkeypress  ：当键盘点击时

△onkeydown ：当键盘按下时

△onkeyup ：当键盘抬起时

 

顺序：onkeydown、onkeypress、onkeyup

Onkeypress无法捕获功能键的点击

 

△ onSubmit

△onReset

 

关于表单验证：

1） 验证用户名是否为空

2） 验证密码两次要一致

3） 验证邮箱格式是否正确

4） 验证年龄是否是数字

5） …………

 

3、 关于事件的绑定方式：

 

1）行内绑定

 

将事件指定到标签中，我们称之为行内绑定

现在，我们需要写出：结构+样式+行为分离的页面

 

2）动态绑定

语法：

对象.事件=事件处理程序

问题：可不可以对一个对象的同一个事件反复进行动态绑定

答：后面赋值事件处理程序会覆盖前面的

后面绑定的覆盖前面的

如果想为一个对象的同一个事件指定多个事件处理程序，该如何做？

3）事件监听

让一个对象的某个事件监听多个事件处理程序，当事件触发时，会执行这些程序

IE浏览器：

attaEvent(type,callback);

type：事件名

callback：事件处理程序

基于w3c模型的浏览器：

addEventListener(type, listener, useCapture)

type：事件名  click、mouseover、mouseout

listener：事件处理程序

useCapture：是否使用捕获模型  默认是false、冒泡模型

4、 解决事件监听的兼容性问题

5、 冒泡模型

事件冒泡是指事件响应时会上水冒一样上升至最顶级元素

<div>

<div>

<div>click</div>

</div>

<div>

关于事件模型原理：

 

 

冒泡模型有时可能会给带来意想不到的效果，大多数情况下，我们需要禁止程序冒泡

6、 禁止事件冒泡

7、 解决停止事件冒泡兼容性问题

 

 调用时：

 

 

8、 了解一下捕获模型

如果想使用捕获模型，必须指定事件监听的第三个参数

 

在addEventListener方法的第三个参数中指定为true,表示使用捕获模型

目前，IE浏览器只支持冒泡

 

9、 默认行为

 

在html对象，有些元素有自己的行为，比如说：

 

<a href=’demo01.php’>

<input type=’submit’>

 

有些时候，默认行为需要取消

使用以上办法解决取消默认行为和在sumbit事件中使用return false有何区别？

取消默认行为的优先级要高一些！

10、 关于事件对象

在js中，在事件发生时，会自动产生一个对象，里面保存事件发生时所包含的所有信息，这个对象就叫做事件对象

不同的浏览器获取事件对象方式不同：

IE：

window.event

 

W3C：

function(event){}

 

 

二、 BOM模型

 

BOM：浏览器对象模型

 

1、 window对象

△alert(message) 消息框

△confirm(message)  确认框

△prompt(message[，defstr])  输入框

△ open(url[，name[，features]]) 打开新窗口

△  close() 关闭窗口

△ blur() 失去焦点

△ focus() 获得焦点

△ print() 打印

△ moveBy(x，y) 相对移动

△  moveTo(x，y) 绝对移动

△ resizeBy(x，y) 相对改变大小

△resizeTo(x，y)  绝对改变大小

△ scrollBy(x，y) 相对滚动

△ scrollTo(x，y) 绝对滚动

△ setTimeout(表达式，毫秒) 设置定时器

△ clearTimeout(定时器对象) 清除定时器

△ open方法第三个参数的取值范围：

 

△  menubar ：菜单        

△ toolbar ：工具栏

△ scrollbars ：滚动条

△fullscreen ：全屏

△directories ：链接

△location ：地址栏

△ status ：状态栏

△resizable ：是否可以改变尺寸

 

以上属性的取值范围：yes/no   yes：有    no：无

△width ：宽

△ height：高

△ left：左边距

△ top ：上边距

 

 

关于定时器：

又叫延迟器，表示延迟多少秒后会执行指定的语句

 

 window.setTimeout(arg1,arg2)

arg1：待执行语句

arg2：延迟时间  单位：毫秒

 

 

setTimeout方法在执行时，会立即向系统内存中抛出一个定时器对象，这个定时器对象在若干时候后，会自动触发。

 

 

 

可以使用setInterval函数在指定的时间后执行前面待执行语句（反复执行）

 

 

 

 

2、 navigator   浏览器信息对象

 

l appCodeName  ：内部代码

l appName ：浏览器名称

l appVersion ：版本号

l platform ：操作系统类型

l onLine ：是否在线

l userAgent ：用户代理头信息

l cookieEnabled ：是否支持cookie

 

 

 

3、location 地址栏信息

 

l host ：主机

l port ：端口  如果是默认端口80，这个值为空

l href ：完整的url

l pathname ：路径

l protocol ：协议

l search  ：查询字符串

l assign(url) ：页面跳转

 

 

 

4、screen    屏幕信息

 

l availHeight 可用高度

l availWidth 可用宽度

l colorDepth 颜色质量

l height 高度

l width 宽度

 

 

 

5、document

 

l linkColor 超链接颜色

l alinkColor 作用中的超链接颜色

l vlinkColor 作用后的超链接颜色

l bgColor 背景颜色

l fgColor 字体颜色

l title 文档标题

l getElementById(“id”)

通过id属性值获取某个对象

l getElementsByName(“name”)

通过name属性值获取某些对象

l getElementsByTagName(“tagname”)

通过元素名称获取某些对象