Javascript Event

時間 2019-11-07

原文原文鏈接

事件原理

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

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

點擊Click Me，會發生什麼事呢？html

DOM支持事件捕獲(event capturing)及事件冒泡(event bubbling),前者是netscape瀏覽器的事件處理機制，後者是ie的處理機制。java

netscape的事件捕獲模型也叫top-down model，從上往下，直到target(div)。而IE是從target(div)一直往上傳遞事件，就像一個氣泡從水底往上冒。瀏覽器

例子函數

這是一個事件冒泡的例子，spa

alert input3d

修改這一句code

// oEvent.cancelBubble = true;htm

則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>

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及其餘瀏覽器的獲取方式是不一樣的，

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

Netscape

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

事件的類型有不少，不一樣事件類型的屬性在不一樣瀏覽器也有差別，這些都須要不斷的練習，才能熟練掌握，未完待續。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。