Javascript Event

事件原理

JS的事件原理,先看一段HTML。

<html>
<head>
<title>Example</title>
</head>
<body onclick=”handleClick()”>
<div onclick=”handleClick()”>Click Me</div>
</body>
</html>

点击Click Me,会发生什么事呢?

Javascript Event

DOM支持事件捕获(event capturing)及事件冒泡(event bubbling),前者是netscape浏览器的事件处理机制,后者是ie的处理机制。

netscape的事件捕获模型也叫top-down model,从上往下,直到target(div)。 而IE是从target(div)一直往上传递事件,就像一个气泡从水底往上冒。

例子

这是一个事件冒泡的例子,

alert input

修改这一句

// oEvent.cancelBubble = true;

则alert结果为 input body html

<html onclick="alert('html')">
<head>
<title>Stopping Event Propagation Example</title>
<script type="text/javascript">
function handleClick(oEvent) {
var ie = !-[1,]; // 检测是否IE
alert("input");
if (ie) {
oEvent.cancelBubble = true; // 取消事件冒泡
} else {
oEvent.stopPropagation();
}
}
</script>
</head>
<body onclick="alert('body')">
<input type="button" value="Click Me" onclick="handleClick(event)" />
</body>
</html>

事件处理

为事件添加处理函数

HTML

<div onclick=”alert(‘I was clicked’)”></div>

JS

var oDiv = document.getElementById(“div1”);
oDiv.onclick = function () {
alert(“I was clicked”);
};

IE,每个元素及WINDOW对象都有2个函数: attachEvent, detachEvent.

[Object].attachEvent(“name_of_event_handler”, fnHandler);
[Object].detachEvent(“name_of_event_handler”, fnHandler);

上面的例子可以写成如下形式

var fnClick = function () {
alert(“Clicked!”);
};
var oDiv = document.getElementById(“div”);
oDiv.attachEvent(“onclick”, fnClick); //add the event handler
//do some other stuff here
oDiv.detachEvent(“onclick”, fnClick); //remove the event handler

也同时可以为一个事件指派多个Handler。

Netscape Dom method

[Object].addEventListener(“name_of_event”, fnHandler, bCapture);
[Object].removeEventListener(“name_of_event”, fnHandler, bCapture);

添加事件处理函数

var fnClick1 = function () {
alert(“Clicked!”);
};
var fnClick2 = function () {
alert(“Also clicked!”);
};
var oDiv = document.getElementById(“div1”);
oDiv.addEventListener(“onclick”, fnClick1);
oDiv.addEventListener(“onclick”, fnClick2);

事件对象

当一个事件发生时,我们需要知道这个事件的一些细节,如

1,那个对象引起的事件

2,事件发生时,鼠标的相关信息

3,事件发生时,键盘的相关信息

这些细节在IE及其他浏览器的获取方式是不同的,

IE

oDiv.onclick = function () {
var oEvent = window.event;
}

Netscape

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

事件的类型有很多,不同事件类型的属性在不同浏览器也有差异,这些都需要不断的练习,才能熟练掌握,未完待续。

上一篇:3551: [ONTAK2010]Peaks加强版


下一篇:bzoj 3545/3551: [ONTAK2010]Peaks -- 主席树,最小生成树,倍增