- 浏览: 783443 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
事件(上)
JavaScript事件列表
事件 解说
一般事件 onclick 鼠标点击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件
页面相关事件 onabort 图片在下载时被用户中断
onbeforeunload 当前页面的内容将要被改变时触发此事件
onerror 出现错误时触发此事件
onload 页面内容完成时触发此事件
onmove 浏览器的窗口被移动时触发此事件
onresize 当浏览器的窗口大小被改变时触发此事件
onscroll 浏览器的滚动条位置发生变化时触发此事件
onstop 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
oncontextmenu 当弹出右键上下文菜单时发生
onunload 当前页面将被改变时触发此事件
表单相关事件 onblur 当前元素失去焦点时触发此事件
onchange 当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当表单中RESET的属性被激发时触发此事件
onsubmit 一个表单被递交时触发此事件
了解上面的事件如此简单,那么事件还有什么可讲的呢?
问题一:每个事件只能注册一个函数
Js代码
var oDiv = document.getElementById("oDiv");
oDiv.onclick = fn1;
oDiv.onclick =fn2;
function fn1() {alert("我被覆盖了!")}
function fn2() {alert("只有我被执行到!")}
var oDiv = document.getElementById("oDiv"); oDiv.onclick = fn1; oDiv.onclick =fn2; function fn1() {alert("我被覆盖了!")} function fn2() {alert("只有我被执行到!")}
解决方案一:
Js代码
obj.onclick = function () {
fn1();
fn2();
fn3();
};
obj.onclick = function () { fn1(); fn2(); fn3(); };
缺陷一:需要将所有函数一次添加进去,不能在运行时添加
缺陷二:在事件处理函数中this将指向window,而不是obj
解决方案二:
Js代码
function addEvent(fn,evtype,obj) {
//obj是要添加事件的HTML元素对象
//evtype是事件名字,不包含on前缀,因为每个都有on,所以写个on是多余的
//fn是事件处理函数
var oldFn;
if (obj["on"+evtype] instanceof Function) {
oldFn = obj["on"+evtype];//当添加函数时,如果已注册过了,则将其保存起来
}
obj["on"+evtype]=function () {
if (oldFn) {
oldFn.call(this);
}
fn.call(this);//使用call方法,使事件处理函数中的this仍指向obj
};
}
function addEvent(fn,evtype,obj) { //obj是要添加事件的HTML元素对象 //evtype是事件名字,不包含on前缀,因为每个都有on,所以写个on是多余的 //fn是事件处理函数 var oldFn; if (obj["on"+evtype] instanceof Function) { oldFn = obj["on"+evtype];//当添加函数时,如果已注册过了,则将其保存起来 } obj["on"+evtype]=function () { if (oldFn) { oldFn.call(this); } fn.call(this);//使用call方法,使事件处理函数中的this仍指向obj }; }
这样已经解决了问题,但如何删除事件呢?如果直接将对象的onevtype这类的属性赋值为null将会删除所有的事件处理函数!
解决方案二的修改版:先将事件存储起来,存储在对象的__EventHandles属性里面
Js代码
eventHandlesCounter=1;//计数器,将统计所有添加进去的函数的个数,0位预留作其它用
function addEvent(fn,evtype,obj) {
if (!fn.__EventID) {//__EventID是给函数加的一个标识,见下面给函数添加标识的部分
fn.__EventID=eventHandlesCounter++;
//使用一个自动增长的计数器作为函数的标识以保证不会重复
}
if (!obj.__EventHandles) {
obj.__EventHandles=[];//当不存在,也就是第一次执行时,创建一个,并且是数组
}
if (!obj.__EventHandles[evtype]) {//将所有事件处理函数按事件类型分类存放
obj.__EventHandles[evtype]=[];//当不存在时也创建一个数组
if (obj["on"+evtype] instanceof Function) {
//查看是否已经注册过其它函数
//如果已经注册过,则将以前的事件处理函数添加到数组下标为0的预留的位置
obj.__EventHandles[evtype][0]=obj["on"+evtype];
obj["on"+evtype]=handleEvents;//使用handleEvents集中处理所有的函数
}
}
obj.__EventHandles[evtype][fn.__EventID]=fn;
//如果函数是第一次注册为事件处理函数,那么它将被添加到数组中,函数的标识作为下标
//如果函数已经注册过相同对象的相同事件了,那么将覆盖原来的而不会被添加两次
function handleEvents() {
var fns = obj.__EventHandles[evtype];
for (var i=0;i< fns.length;i++) {
fns[i].call(this);
}
}
}
eventHandlesCounter=1;//计数器,将统计所有添加进去的函数的个数,0位预留作其它用 function addEvent(fn,evtype,obj) { if (!fn.__EventID) {//__EventID是给函数加的一个标识,见下面给函数添加标识的部分 fn.__EventID=eventHandlesCounter++; //使用一个自动增长的计数器作为函数的标识以保证不会重复 } if (!obj.__EventHandles) { obj.__EventHandles=[];//当不存在,也就是第一次执行时,创建一个,并且是数组 } if (!obj.__EventHandles[evtype]) {//将所有事件处理函数按事件类型分类存放 obj.__EventHandles[evtype]=[];//当不存在时也创建一个数组 if (obj["on"+evtype] instanceof Function) { //查看是否已经注册过其它函数 //如果已经注册过,则将以前的事件处理函数添加到数组下标为0的预留的位置 obj.__EventHandles[evtype][0]=obj["on"+evtype]; obj["on"+evtype]=handleEvents;//使用handleEvents集中处理所有的函数 } } obj.__EventHandles[evtype][fn.__EventID]=fn; //如果函数是第一次注册为事件处理函数,那么它将被添加到数组中,函数的标识作为下标 //如果函数已经注册过相同对象的相同事件了,那么将覆盖原来的而不会被添加两次 function handleEvents() { var fns = obj.__EventHandles[evtype]; for (var i=0;i< fns.length;i++) { fns[i].call(this); } } }
使用上面的函数已经可以在一个对象添加多个事件处理函数,在函数内部this关键字也指向了相应的对象,并且这些函数都被作了标识,那么移除某个事件处理函数就是轻而易举的了!
Js代码
//使用传统方法:obj.onevtype = null;但这样会移除所有的事件处理函数
function delEvent(fn,evtype,obj) {
if (!obj.__EventHandles || !obj.__EventHandles[evtype] || !fn.__EventID) {
return false;
}
if (obj.__EventHandles[evtype][fn.__EventID] == fn) {
delete obj.__EventHandles[evtype][fn.__EventID];
}
}
//使用传统方法:obj.onevtype = null;但这样会移除所有的事件处理函数 function delEvent(fn,evtype,obj) { if (!obj.__EventHandles || !obj.__EventHandles[evtype] || !fn.__EventID) { return false; } if (obj.__EventHandles[evtype][fn.__EventID] == fn) { delete obj.__EventHandles[evtype][fn.__EventID]; } }
-------------------------------------------------新手的分隔线----------------------------------------------------------------
事件(下)
事件对象——Event
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!
访问事件对象:W3C DOM方法与IE专用方法
Js代码
//W3C DOM把事件对象作为事件处理函数的第一个参数传入进去
document.onclick = function (evt) {//这样,事件对象只能在对应的事件处理函数内部可以访问到
alert(evt);
};
//IE将事件对象作为window对象的一个属性(相当于全局变量)
//貌似全局对象,但是只有是事件发生时才能够访问
alert(window.event);//null
window.onload = function () {
alert(window.event);
};
//W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 document.onclick = function (evt) {//这样,事件对象只能在对应的事件处理函数内部可以访问到 alert(evt); }; //IE将事件对象作为window对象的一个属性(相当于全局变量) //貌似全局对象,但是只有是事件发生时才能够访问 alert(window.event);//null window.onload = function () { alert(window.event); };
事件对象的属性及方法
鼠标相关 属性名 值类型 读/写 描述
button Integer R 对于特定的鼠标事件,表示按下的鼠标按钮,该属性仅可以在mouseup与mousedown事件中访问。W3C 规定:0表示按下了左键,1表示按下了中键,2表示按下了右键,相当于对于鼠标键从左到右进行的编号,而编号从0开始; 而IE有另外一套规定:0表示没有任何键按下,1表示左键,2表示右键,4表示中键,而其它按键的组合则只要将键码相加即可,如:同时按下左右键时button值为3
clientX Integer R 事件发生时,鼠标在客户端区域的X坐标,客户端区域是指页面可视区域
clientY Integer R 事件发生时,鼠标在客户端区域的Y坐标
screenX Integer R(IE) R/W(W3C) 相对于屏幕的鼠标X坐标
screenY Integer R(IE) R/W(W3C) 相对于屏幕的鼠标Y坐标
x(仅IE) Integer R 鼠标相对于引起事件的元素的父元素的X坐标
y(仅IE) Integer R 鼠标相对于引起事件的元素的父元素的Y坐标
offsetX(仅IE) layerX(仅W3C) Integer R 鼠标相对于引起事件的对象的X坐标
offsetY(仅IE) layerY(仅W3C) Integer R 鼠标相对于引起事件的对象的Y坐标
pageX(仅W3C) Integer R 鼠标相对于页面的X坐标
pageY(仅W3C) Integer R 鼠标相对于页面的Y坐标
键盘相关 属性名 值类型 读/写 描述
altKey Boolean R true表示按下了ALT键;false表示没有按下
ctrlKey Boolean R true表示按下了CTROL,false表示没有
shiftKey Boolean R true表示按下了shift,false表示没有
keyCode Integer R/W(IE) R(W3C) 对于keypress事件,表示按下按钮的Unicode字符;对于keydown/keyup事件 ,表示按下按钮的数字代号
charCode(仅W3C) Integer R 在keypress事件中所按键的字符Unicode编码,如果不是字符键,则该属性为0,并且,当CapsLock打开与关闭时charCode的值也对应着大小写字母
其它 属性名 值类型 读/写 描述
srcElement(IE) target(W3C) Element R 引起事件的元素
fromElement(仅IE) Element R 某些鼠标事件中(mouseover与mouseout),鼠标所离开的元素
toElement(仅IE) Element R 某些鼠标事件中(mouseover与mouseout),鼠标所进入的元素
relatedTarget(仅W3C) Element R 某些鼠标事件中(mouseover与mouseout),返回与事件的目标节点相关的节点。
repeat(仅IE) Boolean R 如果不断触发keydown事件,则为true,否则为false
returnValue(仅IE) Boolean R/W 将其设为false表示以取消事件的默认动作
preventDefault(仅W3C) Function R 执行方法以取消事件的默认动作
type String R 事件的名称,不带on前缀
cancelable(仅W3C ) Boolean R 当为true表示事件的默认动作可以被取消(用preventDefault方法取消)
cancelBubble(仅IE) Boolean R/W 将其设置为true将取消事件冒泡
stopPropagation(仅W3C) Function R 执行方法取消事件冒泡
bubbles(仅W3C) Boolean R 返回true表示事件是冒泡类型
eventPhase(仅W3C) Integer R 返回事件传播的当前阶段。它的值是下面的三个常量之一,它们分别表示捕获阶段、在目标对象上时和起泡阶段: 常量 值
Event.CAPTURING_PHASE(捕获阶段) 1
Event.AT_TARGET(在目标对象上) 2
Event.BUBBLING_PHASE(冒泡阶段) 3
timeStamp (仅W3C) Long R 返回一个时间戳。指示发生事件的日期和时间(从 epoch 开始的毫秒数)。epoch 是一个事件参考点。在这里,它是客户机启动的时间。并非所有系统都提供该信息,因此,timeStamp 属性并非对所有系统/事件都是可用的。
取得事件对象及取得事件目标对象
Js代码
document.onclick =function (evt) {
evt = evt || window.event;//在IE中evt会是undefined
//而支持W3C DOM事件的浏览器中事件对象将会作为事件处理函数的第一个参数
var targetElement = evt.target || evt.srcElement;
//IE中事件对象没有target属性
};
document.onclick =function (evt) { evt = evt || window.event;//在IE中evt会是undefined //而支持W3C DOM事件的浏览器中事件对象将会作为事件处理函数的第一个参数 var targetElement = evt.target || evt.srcElement; //IE中事件对象没有target属性 };
阻止事件发生时浏览器的默认行为
Js代码
document.onclick = function (evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (!target) {
return;
}
if (target.tagName=="A" && target.href) {
//使用传统的方法取消事件默认行为必须使用return false
//但使用了return ,函数便终止了运行,可以使用事件对象来取消
if (window.event) {//IE
window.event.returnValue = false;
} else {
evt.preventDefault();
}
window.open(target.href,"newWindow");
//这样让所有的链接在新窗口打开
}
};
document.onclick = function (evt) { evt = evt || window.event; var target = evt.target || evt.srcElement; if (!target) { return; } if (target.tagName=="A" && target.href) { //使用传统的方法取消事件默认行为必须使用return false //但使用了return ,函数便终止了运行,可以使用事件对象来取消 if (window.event) {//IE window.event.returnValue = false; } else { evt.preventDefault(); } window.open(target.href,"newWindow"); //这样让所有的链接在新窗口打开 } };
事件传播——冒泡与捕获
DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。
默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true。
冒泡事件流
当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。
捕获事件流
事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。
现代事件绑定方法
针对如上节课所讨论的,使用传统事件绑定有许多缺陷,比如不能在一个对象的相同事件上注册多个事件处理函数。而浏览器和W3C也并非没有考虑到这一点,因此在现代浏览器中,它们有自己的方法绑定事件。
W3C DOM
obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添加事件的对象,evtype是事件类型,不带on前缀,fn是事件处理函数,如果useCapture是true,则事件处理函数在捕获阶段被执行,否则在冒泡阶段执行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法
微软IE方法
obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象,evtype是事件类型,带on前缀,fn是事件处理函数,IE不支持事件捕获
obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法,evtype包含on前缀
整合两者的方法
Js代码
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {
obj.addEventListener(evtype,fn,useCapture);
} else {
obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获
} else {
obj["on"+evtype]=fn;//事实上这种情况不会存在
}
}
function delEvent(obj,evtype,fn,useCapture) {
if (obj.removeEventListener) {
obj.removeEventListener(evtype,fn,useCapture);
} else {
obj.detachEvent("on"+evtype,fn);
} else {
obj["on"+evtype]=null;
}
}
function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) { obj.addEventListener(evtype,fn,useCapture); } else { obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获 } else { obj["on"+evtype]=fn;//事实上这种情况不会存在 } } function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) { obj.removeEventListener(evtype,fn,useCapture); } else { obj.detachEvent("on"+evtype,fn); } else { obj["on"+evtype]=null; } }
其它兼容性问题:IE不支持事件捕获?很抱歉,这个没有办法解决!但IE的attach方法有个问题,就是使用attachEvent时在事件处理函数内部,this指向了window,而不是obj!当然,这个是有解决方案的!
Js代码
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {
obj.addEventListener(evtype,fn,useCapture);
} else {
obj.attachEvent("on"+evtype,function () {
fn.call(obj);
});
} else {
obj["on"+evtype]=fn;//事实上这种情况不会存在
}
}
function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) { obj.addEventListener(evtype,fn,useCapture); } else { obj.attachEvent("on"+evtype,function () { fn.call(obj); }); } else { obj["on"+evtype]=fn;//事实上这种情况不会存在 } }
但IE的attachEvent方法有另外一个问题,同一个函数可以被注册到同一个对象同一个事件上多次,解决方法:抛弃IE的attachEvent方法吧!IE下的attachEvent方法不支持捕获,和传统事件注册没多大区别(除了能绑定多个事件处理函数),并且IE的attachEvent方法存在内存泄漏问题!
addEvent,delEvent现代版
Js代码
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {//优先考虑W3C事件注册方案
obj.addEventListener(evtype,fn,!!useCapture);
} else {//当不支持addEventListener时(IE),由于IE同时也不支持捕获,所以不如使用传统事件绑定
if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;}
//为每个事件处理函数分配一个唯一的ID
if (!obj.__EventHandles) {obj.__EventHandles={};}
//__EventHandles属性用来保存所有事件处理函数的引用
//按事件类型分类
if (!obj.__EventHandles[evtype]) {//第一次注册某事件时
obj.__EventHandles[evtype]=[];
if (obj["on"+evtype]) {//以前曾用传统方式注册过事件处理函数
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加到预留的0位
//并且给原来的事件处理函数增加一个ID
}
obj["on"+evtype]=addEvent.execEventHandles;
//当事件发生时,execEventHandles遍历数组obj.__EventHandles[evtype]并执行其中的函数
}
}
}
addEvent.__EventHandlesCounter=1;//计数器,0位预留它用
addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行
if (!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__EventHandles[evt.type];
for (var i=0;i< fns.length;i++) {
if (fns[i] instanceof Function) {
fns[i].call(this);
}
}
};
function delEvent(obj,evtype,fn,useCapture) {
if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数
obj.removeEventListener(evtype,fn,!!useCapture);
} else {
if (obj.__EventHandles) {
var fns = obj.__EventHandles[evtype];
if (fns) {delete fns[fn.__EventID];}
}
}
}
function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) {//优先考虑W3C事件注册方案 obj.addEventListener(evtype,fn,!!useCapture); } else {//当不支持addEventListener时(IE),由于IE同时也不支持捕获,所以不如使用传统事件绑定 if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;} //为每个事件处理函数分配一个唯一的ID if (!obj.__EventHandles) {obj.__EventHandles={};} //__EventHandles属性用来保存所有事件处理函数的引用 //按事件类型分类 if (!obj.__EventHandles[evtype]) {//第一次注册某事件时 obj.__EventHandles[evtype]=[]; if (obj["on"+evtype]) {//以前曾用传统方式注册过事件处理函数 (obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加
JavaScript事件列表
事件 解说
一般事件 onclick 鼠标点击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件
页面相关事件 onabort 图片在下载时被用户中断
onbeforeunload 当前页面的内容将要被改变时触发此事件
onerror 出现错误时触发此事件
onload 页面内容完成时触发此事件
onmove 浏览器的窗口被移动时触发此事件
onresize 当浏览器的窗口大小被改变时触发此事件
onscroll 浏览器的滚动条位置发生变化时触发此事件
onstop 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
oncontextmenu 当弹出右键上下文菜单时发生
onunload 当前页面将被改变时触发此事件
表单相关事件 onblur 当前元素失去焦点时触发此事件
onchange 当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当表单中RESET的属性被激发时触发此事件
onsubmit 一个表单被递交时触发此事件
了解上面的事件如此简单,那么事件还有什么可讲的呢?
问题一:每个事件只能注册一个函数
Js代码
var oDiv = document.getElementById("oDiv");
oDiv.onclick = fn1;
oDiv.onclick =fn2;
function fn1() {alert("我被覆盖了!")}
function fn2() {alert("只有我被执行到!")}
var oDiv = document.getElementById("oDiv"); oDiv.onclick = fn1; oDiv.onclick =fn2; function fn1() {alert("我被覆盖了!")} function fn2() {alert("只有我被执行到!")}
解决方案一:
Js代码
obj.onclick = function () {
fn1();
fn2();
fn3();
};
obj.onclick = function () { fn1(); fn2(); fn3(); };
缺陷一:需要将所有函数一次添加进去,不能在运行时添加
缺陷二:在事件处理函数中this将指向window,而不是obj
解决方案二:
Js代码
function addEvent(fn,evtype,obj) {
//obj是要添加事件的HTML元素对象
//evtype是事件名字,不包含on前缀,因为每个都有on,所以写个on是多余的
//fn是事件处理函数
var oldFn;
if (obj["on"+evtype] instanceof Function) {
oldFn = obj["on"+evtype];//当添加函数时,如果已注册过了,则将其保存起来
}
obj["on"+evtype]=function () {
if (oldFn) {
oldFn.call(this);
}
fn.call(this);//使用call方法,使事件处理函数中的this仍指向obj
};
}
function addEvent(fn,evtype,obj) { //obj是要添加事件的HTML元素对象 //evtype是事件名字,不包含on前缀,因为每个都有on,所以写个on是多余的 //fn是事件处理函数 var oldFn; if (obj["on"+evtype] instanceof Function) { oldFn = obj["on"+evtype];//当添加函数时,如果已注册过了,则将其保存起来 } obj["on"+evtype]=function () { if (oldFn) { oldFn.call(this); } fn.call(this);//使用call方法,使事件处理函数中的this仍指向obj }; }
这样已经解决了问题,但如何删除事件呢?如果直接将对象的onevtype这类的属性赋值为null将会删除所有的事件处理函数!
解决方案二的修改版:先将事件存储起来,存储在对象的__EventHandles属性里面
Js代码
eventHandlesCounter=1;//计数器,将统计所有添加进去的函数的个数,0位预留作其它用
function addEvent(fn,evtype,obj) {
if (!fn.__EventID) {//__EventID是给函数加的一个标识,见下面给函数添加标识的部分
fn.__EventID=eventHandlesCounter++;
//使用一个自动增长的计数器作为函数的标识以保证不会重复
}
if (!obj.__EventHandles) {
obj.__EventHandles=[];//当不存在,也就是第一次执行时,创建一个,并且是数组
}
if (!obj.__EventHandles[evtype]) {//将所有事件处理函数按事件类型分类存放
obj.__EventHandles[evtype]=[];//当不存在时也创建一个数组
if (obj["on"+evtype] instanceof Function) {
//查看是否已经注册过其它函数
//如果已经注册过,则将以前的事件处理函数添加到数组下标为0的预留的位置
obj.__EventHandles[evtype][0]=obj["on"+evtype];
obj["on"+evtype]=handleEvents;//使用handleEvents集中处理所有的函数
}
}
obj.__EventHandles[evtype][fn.__EventID]=fn;
//如果函数是第一次注册为事件处理函数,那么它将被添加到数组中,函数的标识作为下标
//如果函数已经注册过相同对象的相同事件了,那么将覆盖原来的而不会被添加两次
function handleEvents() {
var fns = obj.__EventHandles[evtype];
for (var i=0;i< fns.length;i++) {
fns[i].call(this);
}
}
}
eventHandlesCounter=1;//计数器,将统计所有添加进去的函数的个数,0位预留作其它用 function addEvent(fn,evtype,obj) { if (!fn.__EventID) {//__EventID是给函数加的一个标识,见下面给函数添加标识的部分 fn.__EventID=eventHandlesCounter++; //使用一个自动增长的计数器作为函数的标识以保证不会重复 } if (!obj.__EventHandles) { obj.__EventHandles=[];//当不存在,也就是第一次执行时,创建一个,并且是数组 } if (!obj.__EventHandles[evtype]) {//将所有事件处理函数按事件类型分类存放 obj.__EventHandles[evtype]=[];//当不存在时也创建一个数组 if (obj["on"+evtype] instanceof Function) { //查看是否已经注册过其它函数 //如果已经注册过,则将以前的事件处理函数添加到数组下标为0的预留的位置 obj.__EventHandles[evtype][0]=obj["on"+evtype]; obj["on"+evtype]=handleEvents;//使用handleEvents集中处理所有的函数 } } obj.__EventHandles[evtype][fn.__EventID]=fn; //如果函数是第一次注册为事件处理函数,那么它将被添加到数组中,函数的标识作为下标 //如果函数已经注册过相同对象的相同事件了,那么将覆盖原来的而不会被添加两次 function handleEvents() { var fns = obj.__EventHandles[evtype]; for (var i=0;i< fns.length;i++) { fns[i].call(this); } } }
使用上面的函数已经可以在一个对象添加多个事件处理函数,在函数内部this关键字也指向了相应的对象,并且这些函数都被作了标识,那么移除某个事件处理函数就是轻而易举的了!
Js代码
//使用传统方法:obj.onevtype = null;但这样会移除所有的事件处理函数
function delEvent(fn,evtype,obj) {
if (!obj.__EventHandles || !obj.__EventHandles[evtype] || !fn.__EventID) {
return false;
}
if (obj.__EventHandles[evtype][fn.__EventID] == fn) {
delete obj.__EventHandles[evtype][fn.__EventID];
}
}
//使用传统方法:obj.onevtype = null;但这样会移除所有的事件处理函数 function delEvent(fn,evtype,obj) { if (!obj.__EventHandles || !obj.__EventHandles[evtype] || !fn.__EventID) { return false; } if (obj.__EventHandles[evtype][fn.__EventID] == fn) { delete obj.__EventHandles[evtype][fn.__EventID]; } }
-------------------------------------------------新手的分隔线----------------------------------------------------------------
事件(下)
事件对象——Event
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!
访问事件对象:W3C DOM方法与IE专用方法
Js代码
//W3C DOM把事件对象作为事件处理函数的第一个参数传入进去
document.onclick = function (evt) {//这样,事件对象只能在对应的事件处理函数内部可以访问到
alert(evt);
};
//IE将事件对象作为window对象的一个属性(相当于全局变量)
//貌似全局对象,但是只有是事件发生时才能够访问
alert(window.event);//null
window.onload = function () {
alert(window.event);
};
//W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 document.onclick = function (evt) {//这样,事件对象只能在对应的事件处理函数内部可以访问到 alert(evt); }; //IE将事件对象作为window对象的一个属性(相当于全局变量) //貌似全局对象,但是只有是事件发生时才能够访问 alert(window.event);//null window.onload = function () { alert(window.event); };
事件对象的属性及方法
鼠标相关 属性名 值类型 读/写 描述
button Integer R 对于特定的鼠标事件,表示按下的鼠标按钮,该属性仅可以在mouseup与mousedown事件中访问。W3C 规定:0表示按下了左键,1表示按下了中键,2表示按下了右键,相当于对于鼠标键从左到右进行的编号,而编号从0开始; 而IE有另外一套规定:0表示没有任何键按下,1表示左键,2表示右键,4表示中键,而其它按键的组合则只要将键码相加即可,如:同时按下左右键时button值为3
clientX Integer R 事件发生时,鼠标在客户端区域的X坐标,客户端区域是指页面可视区域
clientY Integer R 事件发生时,鼠标在客户端区域的Y坐标
screenX Integer R(IE) R/W(W3C) 相对于屏幕的鼠标X坐标
screenY Integer R(IE) R/W(W3C) 相对于屏幕的鼠标Y坐标
x(仅IE) Integer R 鼠标相对于引起事件的元素的父元素的X坐标
y(仅IE) Integer R 鼠标相对于引起事件的元素的父元素的Y坐标
offsetX(仅IE) layerX(仅W3C) Integer R 鼠标相对于引起事件的对象的X坐标
offsetY(仅IE) layerY(仅W3C) Integer R 鼠标相对于引起事件的对象的Y坐标
pageX(仅W3C) Integer R 鼠标相对于页面的X坐标
pageY(仅W3C) Integer R 鼠标相对于页面的Y坐标
键盘相关 属性名 值类型 读/写 描述
altKey Boolean R true表示按下了ALT键;false表示没有按下
ctrlKey Boolean R true表示按下了CTROL,false表示没有
shiftKey Boolean R true表示按下了shift,false表示没有
keyCode Integer R/W(IE) R(W3C) 对于keypress事件,表示按下按钮的Unicode字符;对于keydown/keyup事件 ,表示按下按钮的数字代号
charCode(仅W3C) Integer R 在keypress事件中所按键的字符Unicode编码,如果不是字符键,则该属性为0,并且,当CapsLock打开与关闭时charCode的值也对应着大小写字母
其它 属性名 值类型 读/写 描述
srcElement(IE) target(W3C) Element R 引起事件的元素
fromElement(仅IE) Element R 某些鼠标事件中(mouseover与mouseout),鼠标所离开的元素
toElement(仅IE) Element R 某些鼠标事件中(mouseover与mouseout),鼠标所进入的元素
relatedTarget(仅W3C) Element R 某些鼠标事件中(mouseover与mouseout),返回与事件的目标节点相关的节点。
repeat(仅IE) Boolean R 如果不断触发keydown事件,则为true,否则为false
returnValue(仅IE) Boolean R/W 将其设为false表示以取消事件的默认动作
preventDefault(仅W3C) Function R 执行方法以取消事件的默认动作
type String R 事件的名称,不带on前缀
cancelable(仅W3C ) Boolean R 当为true表示事件的默认动作可以被取消(用preventDefault方法取消)
cancelBubble(仅IE) Boolean R/W 将其设置为true将取消事件冒泡
stopPropagation(仅W3C) Function R 执行方法取消事件冒泡
bubbles(仅W3C) Boolean R 返回true表示事件是冒泡类型
eventPhase(仅W3C) Integer R 返回事件传播的当前阶段。它的值是下面的三个常量之一,它们分别表示捕获阶段、在目标对象上时和起泡阶段: 常量 值
Event.CAPTURING_PHASE(捕获阶段) 1
Event.AT_TARGET(在目标对象上) 2
Event.BUBBLING_PHASE(冒泡阶段) 3
timeStamp (仅W3C) Long R 返回一个时间戳。指示发生事件的日期和时间(从 epoch 开始的毫秒数)。epoch 是一个事件参考点。在这里,它是客户机启动的时间。并非所有系统都提供该信息,因此,timeStamp 属性并非对所有系统/事件都是可用的。
取得事件对象及取得事件目标对象
Js代码
document.onclick =function (evt) {
evt = evt || window.event;//在IE中evt会是undefined
//而支持W3C DOM事件的浏览器中事件对象将会作为事件处理函数的第一个参数
var targetElement = evt.target || evt.srcElement;
//IE中事件对象没有target属性
};
document.onclick =function (evt) { evt = evt || window.event;//在IE中evt会是undefined //而支持W3C DOM事件的浏览器中事件对象将会作为事件处理函数的第一个参数 var targetElement = evt.target || evt.srcElement; //IE中事件对象没有target属性 };
阻止事件发生时浏览器的默认行为
Js代码
document.onclick = function (evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (!target) {
return;
}
if (target.tagName=="A" && target.href) {
//使用传统的方法取消事件默认行为必须使用return false
//但使用了return ,函数便终止了运行,可以使用事件对象来取消
if (window.event) {//IE
window.event.returnValue = false;
} else {
evt.preventDefault();
}
window.open(target.href,"newWindow");
//这样让所有的链接在新窗口打开
}
};
document.onclick = function (evt) { evt = evt || window.event; var target = evt.target || evt.srcElement; if (!target) { return; } if (target.tagName=="A" && target.href) { //使用传统的方法取消事件默认行为必须使用return false //但使用了return ,函数便终止了运行,可以使用事件对象来取消 if (window.event) {//IE window.event.returnValue = false; } else { evt.preventDefault(); } window.open(target.href,"newWindow"); //这样让所有的链接在新窗口打开 } };
事件传播——冒泡与捕获
DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。
默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true。
冒泡事件流
当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。
捕获事件流
事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。
现代事件绑定方法
针对如上节课所讨论的,使用传统事件绑定有许多缺陷,比如不能在一个对象的相同事件上注册多个事件处理函数。而浏览器和W3C也并非没有考虑到这一点,因此在现代浏览器中,它们有自己的方法绑定事件。
W3C DOM
obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添加事件的对象,evtype是事件类型,不带on前缀,fn是事件处理函数,如果useCapture是true,则事件处理函数在捕获阶段被执行,否则在冒泡阶段执行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法
微软IE方法
obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象,evtype是事件类型,带on前缀,fn是事件处理函数,IE不支持事件捕获
obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法,evtype包含on前缀
整合两者的方法
Js代码
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {
obj.addEventListener(evtype,fn,useCapture);
} else {
obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获
} else {
obj["on"+evtype]=fn;//事实上这种情况不会存在
}
}
function delEvent(obj,evtype,fn,useCapture) {
if (obj.removeEventListener) {
obj.removeEventListener(evtype,fn,useCapture);
} else {
obj.detachEvent("on"+evtype,fn);
} else {
obj["on"+evtype]=null;
}
}
function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) { obj.addEventListener(evtype,fn,useCapture); } else { obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获 } else { obj["on"+evtype]=fn;//事实上这种情况不会存在 } } function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) { obj.removeEventListener(evtype,fn,useCapture); } else { obj.detachEvent("on"+evtype,fn); } else { obj["on"+evtype]=null; } }
其它兼容性问题:IE不支持事件捕获?很抱歉,这个没有办法解决!但IE的attach方法有个问题,就是使用attachEvent时在事件处理函数内部,this指向了window,而不是obj!当然,这个是有解决方案的!
Js代码
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {
obj.addEventListener(evtype,fn,useCapture);
} else {
obj.attachEvent("on"+evtype,function () {
fn.call(obj);
});
} else {
obj["on"+evtype]=fn;//事实上这种情况不会存在
}
}
function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) { obj.addEventListener(evtype,fn,useCapture); } else { obj.attachEvent("on"+evtype,function () { fn.call(obj); }); } else { obj["on"+evtype]=fn;//事实上这种情况不会存在 } }
但IE的attachEvent方法有另外一个问题,同一个函数可以被注册到同一个对象同一个事件上多次,解决方法:抛弃IE的attachEvent方法吧!IE下的attachEvent方法不支持捕获,和传统事件注册没多大区别(除了能绑定多个事件处理函数),并且IE的attachEvent方法存在内存泄漏问题!
addEvent,delEvent现代版
Js代码
function addEvent(obj,evtype,fn,useCapture) {
if (obj.addEventListener) {//优先考虑W3C事件注册方案
obj.addEventListener(evtype,fn,!!useCapture);
} else {//当不支持addEventListener时(IE),由于IE同时也不支持捕获,所以不如使用传统事件绑定
if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;}
//为每个事件处理函数分配一个唯一的ID
if (!obj.__EventHandles) {obj.__EventHandles={};}
//__EventHandles属性用来保存所有事件处理函数的引用
//按事件类型分类
if (!obj.__EventHandles[evtype]) {//第一次注册某事件时
obj.__EventHandles[evtype]=[];
if (obj["on"+evtype]) {//以前曾用传统方式注册过事件处理函数
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加到预留的0位
//并且给原来的事件处理函数增加一个ID
}
obj["on"+evtype]=addEvent.execEventHandles;
//当事件发生时,execEventHandles遍历数组obj.__EventHandles[evtype]并执行其中的函数
}
}
}
addEvent.__EventHandlesCounter=1;//计数器,0位预留它用
addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行
if (!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__EventHandles[evt.type];
for (var i=0;i< fns.length;i++) {
if (fns[i] instanceof Function) {
fns[i].call(this);
}
}
};
function delEvent(obj,evtype,fn,useCapture) {
if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数
obj.removeEventListener(evtype,fn,!!useCapture);
} else {
if (obj.__EventHandles) {
var fns = obj.__EventHandles[evtype];
if (fns) {delete fns[fn.__EventID];}
}
}
}
function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) {//优先考虑W3C事件注册方案 obj.addEventListener(evtype,fn,!!useCapture); } else {//当不支持addEventListener时(IE),由于IE同时也不支持捕获,所以不如使用传统事件绑定 if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;} //为每个事件处理函数分配一个唯一的ID if (!obj.__EventHandles) {obj.__EventHandles={};} //__EventHandles属性用来保存所有事件处理函数的引用 //按事件类型分类 if (!obj.__EventHandles[evtype]) {//第一次注册某事件时 obj.__EventHandles[evtype]=[]; if (obj["on"+evtype]) {//以前曾用传统方式注册过事件处理函数 (obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加
发表评论
-
flex学习
2010-05-06 20:17 817flex学习例子, -
JSON法创建JavaScript对象
2010-01-14 21:33 919<!DOCTYPE html PUBLIC " ... -
JavaScript Math 对象与函数
2010-01-14 21:16 1192Math函数 Math.abs() -- 返回 ... -
JavaScript Date 对象与函数
2010-01-14 21:14 934JavaScript_Date对象说明 Date对象构造函数 ... -
日历控件
2010-01-13 16:03 793日历控件 编辑控件 -
访问iframe里面的javascript函数、对象,兼容IE、Firefox
2009-12-29 23:16 1575假如你当前主页面中嵌入了一个iframe,ID为:iframe ... -
document.createElement等DOM函数与属性
2009-12-18 17:05 12111、创建节点 createElemen ... -
document.createElement("A")的相关属性
2009-12-18 17:03 1955<html> <BODY> ... -
removeChild 使用注意事项
2009-12-18 16:55 881Java代码 var giftBody = document ... -
获取HTML DOM节点元素的方法
2009-12-18 16:47 1091在Web应用程序特别是Web2.0程序开发中,经常要获取页面 ... -
js 按钮交互 元素属性获取
2009-12-18 16:44 1045<html xmlns="http://www ... -
HTML DOM selectedIndex 属性
2009-12-18 16:34 1324定义和用法 selectedIndex 属性可设置或返回下拉 ... -
hyperlink 控制
2009-12-18 16:09 948<html> <head> ... -
onchange()和onblur()
2009-12-18 15:54 1436<html> <head> ... -
js动态显示时间
2009-12-18 15:48 2801<html> <head> ... -
JS时间对象
2009-12-17 18:09 1429时间对象用来操作日期和时间。 Examples 举例 Ret ... -
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
2009-12-16 17:40 7941判断select选项中 是否存在Value="pa ... -
javascript 暂定执行一段时间
2009-12-16 17:31 2158有人说window.setTimeout("func ... -
JS常用对象介绍
2009-12-16 17:22 887click() 对象.click() ------------ ... -
JS事件对象
2009-12-16 17:20 1201事件源对象 event.srcElement.tagName ...
相关推荐
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例...
JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言,它的事件机制是实现动态交互的重要部分。在JavaScript中,事件是用户或浏览器对网页进行操作时触发的特定动作,比如点击按钮、鼠标移动等。本文将详细...
接下来,为了使WebView能够执行JavaScript代码并处理JavaScript事件,我们需要启用JavaScript支持。我们可以调用`WebSettings`类的`setJavaScriptEnabled()`方法: ```java WebSettings settings = webView....
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...
实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...
JavaScript事件查询是Web开发中的重要概念,它涉及到用户与网页交互时的各种响应处理。这篇文档“javascript事件查询综合”很可能是对JavaScript事件处理机制的详细阐述。在Web开发中,JavaScript事件模型允许开发者...
JavaScript事件是JavaScript编程中至关重要的一个概念,它用于响应用户或浏览器的行为,如点击、滚动、键盘输入等。本文将详细解析JavaScript事件的几个关键点:异步回调、事件对象、`this`关键字以及事件冒泡的管理...
JavaScript事件是网页交互的核心,它定义了当特定动作发生时,浏览器如何响应。这些动作可以是用户的操作,如点击、滚动、键盘输入,或者是页面加载、数据改变等。JavaScript事件的处理方式有多种,包括事件处理属性...
JavaScript事件是Web开发中不可或缺的一部分,它允许我们与用户进行交互,响应用户的操作,并以此来更新页面内容。本文将深入探讨JavaScript事件的各个方面,帮助开发者更好地理解和应用这些关键概念。 一、事件...
在前端开发中,编写高性能的JavaScript事件处理代码至关重要。高效的事件处理不仅能够提升用户体验,还能减少不必要的计算和DOM操作,从而加快页面的响应速度。随着Web应用的日益复杂,对JavaScript事件系统的优化...
"WEB页编程技巧──JavaScript事件的应用.pdf" 本文档主要介绍了JavaScript事件在WEB页编程中的应用,包括JavaScript事件的概念、分类、事件处理器的使用、事件驱动编程等方面的知识点。 一、JavaScript事件概述 ...
JAVASCRIPT事件与动态页面编程 本文概述了JAVASCRIPT事件、事件监视器和事件处理器,并通过一个示例程序详细介绍了如何使用JAVASCRIPT事件处理器进行动态页面编程。 JAVASCRIPT事件是指人机交互的结果,如鼠标移动...
标题中的"JavaScript事件学习小结(一)事件流"指的是JavaScript中的事件处理机制,特别是事件流的概念。事件流描述了在DOM(文档对象模型)中事件如何从根节点传播到具体的元素节点。在JavaScript中,事件是用户与...
"扣代码工具 JavaScript事件 捕获者2.0.zip"这个压缩包文件显然聚焦于JavaScript事件处理,特别是事件捕获的概念。事件是用户与网页交互时产生的行为,如点击按钮、滚动页面等,而事件处理则允许开发者对这些行为...
JavaScript事件是Web开发中不可或缺的一部分,它允许用户与网页进行交互并响应用户的操作。这篇博客主要探讨了JavaScript事件的基本概念、事件模型以及如何处理事件。 首先,我们需要理解什么是JavaScript事件。...
标题中的“AJAX中不触发javascript事件”指的是在使用AJAX技术进行页面更新时,可能出现JavaScript事件不按预期触发的情况。这通常是由于AJAX请求更新页面部分时,不会触发表单提交、点击或其他依赖于页面刷新的...