标签:
JavaScript巩固与加强二
目录
4、案例:获取键盘上下左右四个键的键值,并进行相应的判断... 16
答:在JavaScript中,用户的行为(点击、移动)会被Javascript中的事件所捕获,并执行相应的处理程序,我们把这个过程就称之事件驱动式。
例1:点击按钮弹出一个弹出窗口
例2:点击按钮弹出2个弹出窗口
例3:点击按钮,能弹出100个对话框
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:表单提交时
答:为某个对象绑定某些事件处理程序,我们把这个过程就称之为事件绑定
在JavaScript中事件绑定可以分为以下三种:
1)行内绑定
2)动态绑定
3)事件监听
基本语法:
<标签 属性列表 事件=“事件的处理程序”></标签>
编写特效或javascript小技巧(三步走)
第一步:找到要作用的对象
第二步:找到触发时所用的事件
第三步:为事件定义事件处理程序
例1:单击层更新其文字颜色为红色
示例代码:
效果:
面试题:你会不会编写结构+样式+行为相分离的代码?
结构:HTML
样式:CSS
行为:Javascript
说明:当我们打开某一个web应用程序时,系统会自动生成BOM模型,该模型最顶端是全局Window对象,我们定义的变量或函数都是向该对象中添加属性。
var i=100;
window.i = 100;
function display() {}
window.display = function display() {};
基本语法:
对象.事件 = 事件的处理程序
document.getElementById(‘content’).事件=事件的处理程序
探讨:行内绑定与动态绑定的区别?
说明:在Javascript中谁调用了函数,那么函数内部的this指针就指向谁
例1:行内绑定时,this指针指向window对象
以上代码无法正常运行,原因如下:
通过调试工具证明:行内绑定时,函数中的this指向window对象,所以以上案例无法正常运行。
例2:证明动态绑定时this的指向
通过以上代码运行可知,动态绑定时,函数内部的this指向,指向当前dom对象
谁调用函数,函数内部的this就指向谁
在语法上不同:
行内:<标签 属性列表 事件=“事件的处理程序”>
动态:对象.事件 = 事件的处理程序
this指向不同
行内:指向window全局对象
动态:指向当前所调用的dom对象
问题:我们可不可以为某个对象的某个事件绑定多个事件的处理程序
答:事件监听
IE模型下采用:
对象.attachEvent(type,callback);
参数说明:
type:事件类型(onclick,onmouseover)
callback:事件的处理程序(函数)
示例代码:
浏览器分类:
IE模型浏览器
W3C模型浏览器
对象.addEventListener(type,callback,[capture]);
参数说明:
type:事件类型(click,mouseover)
callback:事件的处理程序(函数)
capture:浏览器模型,冒泡模型(默认情况下采用的是冒泡模型),捕捉模型
示例代码:
public.js代码封装
使用案例:
总结:IE模型与W3C模型区别:
在语法上IE模型与W3C模型不同
在触发顺序上不同,在IE模型,先定义后触发,在W3C是先定义先触发
基本语法
attachEvent() 添加事件监听
detachEvent() 移除事件监听
detachEvent(type,callback);
参数说明:
type:要移除的事件类型 onclick,onmouseover
callback:要移出的处理程序(函数)
谨记:在Javascript中,如果要移除事件监听,那么我们的事件处理程序必须是有名字的,否则我们是无法移除该事件的。
addEventListener() 添加事件监听
removeEventListener() 移除事件监听
答:Javascript代码封装
示例代码:
public.js
使用:
标签:
原文地址:http://www.cnblogs.com/lifushan/p/5423326.html