JavaScript事件

[size=large][b]1.javascript事件流的概念[/b][/size]

冒泡型事件:事件从最确定的事件目标到最不确定的事件目标的顺序触发。
捕获型事件:事件从最不确定的对象开始触发到最确定的事件目标。
IE支持冒泡型事件,而DOM标准同时支持两种事件流,捕获型事件先发生。


<meta charset="UTF-8" />
事件测试
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
};
function main() {
if (document.addEventListener) {
$('outer').addEventListener('click', function(){
alert('outer on click');
}, true);
$('inner').addEventListener('click', function(){
alert('inner on click');
}, true);
} else {
$('outer').attachEvent('onclick', function(){
alert('outer on click');
});
$('inner').attachEvent('onclick', function(){
alert('inner on click');
});
}
}
</script>
<div style="width: 140px; height: 155px; border: 1px solid #e33333;" onclick="alert('outer on click');">
<div style="cursor: pointer; width: 100px; height: 105px; border: 1px solid #323232;" onclick="alert('inner on click');">默认冒泡,IE与Firefox同时支持</div>
</div>
<div id="outer" style="width: 140px; height: 155px; border: 1px solid #e33333;">
<div id="inner" style="cursor: pointer; width: 100px; height: 105px; border: 1px solid #323232;">捕获型事件测试</div>
</div>


[img]http://dl.iteye.com/upload/attachment/0069/9832/86f290d6-82bd-3c29-adc3-385312d08919.png[/img]

Chrome Firefox:

第一个示例,点击inner,依次先提示:”inner on click”, “outer on click”,即:默认为冒泡事件类型
第二个示例,点击inner,依次先提示:”outer on click”, “inner on click”,addEventListener中的第三个参数为useCapture,默认为false,即冒泡事件类型,此示例设置为true,则外围先响应事件(捕获型事件),建议是保持为默认false。

IE:
第一个示例,点击inner,依次先提示:”inner on click”, “outer on click”,默认为冒泡事件类型
第二个示例,点击inner,依次先提示:”inner on click”, “outer on click”,attachEvent也为冒泡事件,先响应最具体的DOM元素,没有useCapture参数

总结:在DOM元素上使用的唯一的onclick事件中,IE与Firefox, Chrome同为冒泡型事件;在动态添加事件监听上面,Firefox和Chrome通过useCapture选项,可更改为捕获型事件。

[size=large][b]2.事件处理函数及事件监听[/b][/size]

事件处理函数:获得对象引用,将函数赋给对应事件处理属性,此类事件只能绑定唯一一个函数。
如:

var oDiv = document.getElementById("div1");
oDiv.onchange = function (){
alert("test");
}

IE中,每个对象(包含window对象)都支持两个方法:
attachEvent(“name_of_event_handler”,fnHandler);
detachEvent(“name_of_event_handler”,fnHandler);
其中attachEvent中的name_of_event_handler需要添加on参数,如 onclick

Firefox或者Chrome的标准DOM中,支持的是:
addEventListener(“name_of_event”,fnHandler,bCapture);
removeEventListerner(“name_of_event”,fnHandler,bCapture);
其中 addEventListener 的 name_of_event,不需要添加on,直接写:click


<meta charset="UTF-8" />
事件触发
<script type="text/javascript">// <![CDATA[
function otherHandler() {
alert("other handler occur");
}
function otherHandler2() {
alert("other2 handler occur");
}
function changeEventHandler(){
var v1 = document.getElementById("v1");
if (document.addEventListener) {
v1.addEventListener("click", otherHandler, true);
v1.addEventListener("click", otherHandler2, true);
} else {
v1.attachEvent("onclick", otherHandler);
v1.attachEvent("onclick", otherHandler2);
}
}
function triggerEvent() {
var v1 = document.getElementById("v1");
v1.click();
}

// ]]></script>
<div id="v1" style="width: 140px; height: 55px; border: 1px solid #e33333;">DIV1</div>
<div style="cursor: pointer; width: 100px; height: 45px; border: 1px solid #323232;" onclick="changeEventHandler();">添加DIV1的onclick事件</div>
<input onclick="triggerEvent();" type="button" value="触发事件" />


div1的onclick事件添加后,div1被点击,IE和Firefox响应顺序不同
IE:先添加,后执行”other2 handler occur”,后”other handler occur”

Firefox,Chrome:先添加,先执行”other handler occur”,后”other2 handler occur”
在使用时一定要注意时序,遇到过一个弹出浮层框,弹出后在浮层监听事件处理,遇到过这个时序问题。

[size=large][b]3.事件对象event[/b][/size]
在IE中,事件对象就是window的一个属性window.event

function(){
var myevent = window.event;
}


而DOM中event是作为第一个参数传递下来的:

function(){
var oEvent = arguments[0];
}


或者是直接作为第一个参数传递下来:

function(event){
}



<script type="text/javascript">

function changeEventHandler(event,aa){
alert("事件类型:" + event.type);
if( !( typeof event.target == 'undefined')){
// Firefox
alert("事件源:" + event.target);
} else{
// IE
alert("事件源:" + event.srcElement);
}
}

</script>
<div id="v1" style="width: 140px; height: 55px; border: 1px solid #e33333;">DIV1</div>
<div style="cursor: pointer; width: 100px; height: 45px; border: 1px solid #323232;" onclick="changeEventHandler(event,'aa');">改变DIV1的onclick事件</div>


同时,event还有很多参数的,可以在Firebug中看到:

[img]http://dl.iteye.com/upload/attachment/335383/6af9d531-66fe-3884-b832-5573f61598fd.jpg[/img]

[size=large][b]4.事件相似性[/b] [/size]
IE和DOM:

获取事件类型:oEvent.type;

获取事件代码:oEvent.keyCode;

检测ctrl,shift,alt键:oEvent.shiftKey;oEvent.ctrlKey;oEvent.altKey;

获取客户端坐标:oEvent.clientX;oEvent.clientY;

获取屏幕坐标:oEvent.screenX;oEvent.screenY;

[size=large][b]5.事件的区别[/b][/size]
(1).获取目标
IE: oEvent.srcElement;
DOM: oEvent.target;
注意 :
在mouseover和mouseout中,鼠标移动过程中,如果元素包含子元素,会触发元素的mouseout和子元素的mouseover方法,其实这并不是我们想要的结果,我们希望在当前的元素里面,即使是子元素,也不进行任何的mouseout事件操作。

所以在事件触发时,需要对子元素位置进行判断,若为目标元素的子元素,则什么也不做,涉及到如何获取当前元素和子元素的,涉及到了浏览器的判断:
var fromElement = event.fromElement || event.relatedTarget;
var toElement = event.toElement || event.target;

同时需要判断toElement是否为目标元素的子元素或者其本身,具体可以参考如下链接:
[url=http://www.cnblogs.com/shaojun/archive/2011/03/16/1986249.html]mouseover和mouseout多次触发解决方法(兼容ie和firefox)[/url]

[url=http://www.css88.com/archives/3809]jQuery判断一个元素是否为另一个元素的子元素或者本身[/url]

(2).获取字符代码
IE: oEvent.keyCode;
DOM: String.fromCharCode(oEvent.charCode);

(3).阻止某个事件的行为
IE:oEvent.returnValue = false;
DOM:oEvent.preventDefault();

(4).停止事件冒泡
IE:oEvent.cancelBubble = true;
DOM:oEvent.stopPropagation();

function stopEvent(e) {
if (!e) {
e = window.event;
}
if (e.stopPropagation) {
e.stopPropagation();
} else {//IE
e.cancelBubble = true;
}
}


[size=large][b]6.事件类型[/b][/size]
鼠标事件:click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove
每个鼠标事件都会向event填入以下属性:坐标属性clientX,clientY,type属性,target或者srcElement,shiftKey,ctrlKey,altKey,button属性

键盘事件:keydown,keypress,keyup
每个键盘事件都会向event填入以下属性:keyCode,charCode(Dom),target或者srcElement,
shiftKey,ctrlKey,altKey
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值