码迷,mamicode.com
首页 > Web开发 > 详细

20150204--JS巩固与加强2-01

时间:2016-04-23 01:26:02      阅读:685      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

JavaScript巩固与加强二

目录

JavaScript巩固与加强二... 1

一、事件编程... 3

1、什么是事件驱动式?... 3

2、什么是事件处理程序... 3

3、JavaScript中常用的事件... 4

二、事件绑定... 6

1、什么是事件绑定... 6

2、事件绑定分类... 6

3、行内绑定... 7

4、动态绑定... 8

5、行内绑定与动态绑定区别... 9

6、事件监听... 10

1)IE模型事件监听基本语法... 10

2)W3C模型下事件监听基本语法:... 11

3)如何解决事件监听兼容性问题... 11

7、移除事件监听... 12

1)IE模型下采用如下方式:... 12

2)W3C模型下采用如下方式:... 12

3)如何解决兼容性问题?... 13

三、事件对象... 14

1、什么是事件对象... 14

2、如何获得事件对象... 14

3、如何证明事件对象的存在?... 15

4、案例:获取键盘上下左右四个键的键值,并进行相应的判断... 16

四、冒泡模型... 16

1、什么是冒泡模型... 16

2、证明事件冒泡的存在?... 17

3、事件冒泡原理图... 18

4、事件冒泡解决... 18

五、默认行为... 19

1、什么是默认行为... 19

2、如何取消HTML标签默认行为... 20

3、解决兼容性问题... 20

六、BOM模型... 21

1、什么是BOM模型... 21

2、BOM模型原理图... 22

3、常用的BOM模型属性与方法... 22

4、定时器... 26

一、事件编程

1、什么是事件驱动式?

答:在JavaScript中,用户的行为(点击、移动)会被Javascript中的事件所捕获,并执行相应的处理程序,我们把这个过程就称之事件驱动式。

2、什么是事件处理程序

例1:点击按钮弹出一个弹出窗口

技术分享

例2:点击按钮弹出2个弹出窗口

技术分享

例3:点击按钮,能弹出100个对话框

技术分享

3、JavaScript中常用的事件

l onLoad : 页面加载完毕时触发

l onUnload : 页面卸载时触发

l onBlur : 失去焦点时触发

l onFocus : 获得焦点时触发

l onClick : 单击时触发

l onMouseOver : 鼠标悬浮时触发

l onMouseOut : 鼠标离开时触发

l onMouseDown : 鼠标按下时触发

l onMouseUp : 鼠标弹起时(释放)时触发

l onMouseMove : 鼠标移动时触发

l onChange : 状态改变时触发

l onSelect : 文本框文本被选择时触发(input、textarea)

l onkeypress : 键盘按下时触发(无法捕获功能键)

l onkeydown : 键盘按下时触发(可以捕获功能键)

l onkeyup : 键盘弹起时触发

l onSubmit : 表单提交时触发

l onReset : 表单重置时触发

例1:页面载入与卸载时触发事件

技术分享

例2:失去焦点与获得焦点

技术分享

例3:鼠标悬浮与离开

技术分享

例4:状态改变时触发

技术分享

例5:文本选中,键盘按下弹起事件

技术分享

例6:表单提交时

技术分享

二、事件绑定

1、什么是事件绑定

答:为某个对象绑定某些事件处理程序,我们把这个过程就称之为事件绑定

2、事件绑定分类

在JavaScript中事件绑定可以分为以下三种:

1)行内绑定

2)动态绑定

3)事件监听

3、行内绑定

基本语法:

<标签 属性列表 事件=“事件的处理程序”></标签>

编写特效或javascript小技巧(三步走)

第一步:找到要作用的对象

第二步:找到触发时所用的事件

第三步:为事件定义事件处理程序

例1:单击层更新其文字颜色为红色

示例代码:

技术分享

效果:

技术分享

面试题:你会不会编写结构+样式+行为相分离的代码?

结构:HTML

样式:CSS

行为:Javascript

技术分享

说明:当我们打开某一个web应用程序时,系统会自动生成BOM模型,该模型最顶端是全局Window对象,我们定义的变量或函数都是向该对象中添加属性。

var i=100;

window.i = 100;

function display() {}

window.display = function display() {};

4、动态绑定

基本语法:

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

document.getElementById(‘content’).事件=事件的处理程序

探讨:行内绑定与动态绑定的区别?

说明:在Javascript中谁调用了函数,那么函数内部的this指针就指向谁

例1:行内绑定时,this指针指向window对象

技术分享

以上代码无法正常运行,原因如下:

通过调试工具证明:行内绑定时,函数中的this指向window对象,所以以上案例无法正常运行。

技术分享

例2:证明动态绑定时this的指向

技术分享

通过以上代码运行可知,动态绑定时,函数内部的this指向,指向当前dom对象

谁调用函数,函数内部的this就指向谁

5、行内绑定与动态绑定区别

在语法上不同:

行内:<标签 属性列表 事件=“事件的处理程序”>

动态:对象.事件 = 事件的处理程序

this指向不同

行内:指向window全局对象

动态:指向当前所调用的dom对象

6、事件监听

技术分享

问题:我们可不可以为某个对象的某个事件绑定多个事件的处理程序

答:事件监听

1)IE模型事件监听基本语法

IE模型下采用:

对象.attachEvent(type,callback);

参数说明:

type:事件类型(onclick,onmouseover)

callback:事件的处理程序(函数)

示例代码:

技术分享

浏览器分类:

IE模型浏览器

W3C模型浏览器

2)W3C模型下事件监听基本语法:

对象.addEventListener(type,callback,[capture]);

参数说明:

type:事件类型(click,mouseover)

callback:事件的处理程序(函数)

capture:浏览器模型,冒泡模型(默认情况下采用的是冒泡模型),捕捉模型

示例代码:

技术分享

3)如何解决事件监听兼容性问题

public.js代码封装

技术分享

使用案例:

技术分享

总结:IE模型与W3C模型区别:

在语法上IE模型与W3C模型不同

在触发顺序上不同,在IE模型,先定义后触发,在W3C是先定义先触发

7、移除事件监听

基本语法

1)IE模型下采用如下方式:

attachEvent() 添加事件监听

detachEvent() 移除事件监听

detachEvent(type,callback);

参数说明:

type:要移除的事件类型 onclick,onmouseover

callback:要移出的处理程序(函数)

谨记:在Javascript中,如果要移除事件监听,那么我们的事件处理程序必须是有名字的,否则我们是无法移除该事件的。

2)W3C模型下采用如下方式:

addEventListener() 添加事件监听

removeEventListener() 移除事件监听

技术分享

3)如何解决兼容性问题?

答:Javascript代码封装

示例代码:

public.js

技术分享

使用:

技术分享

20150204--JS巩固与加强2-01

标签:

原文地址:http://www.cnblogs.com/lifushan/p/5423326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!