詳解Javascript事件驅動程式設計_javascript技巧
- WBOY原創
- 2016-05-16 15:22:171666瀏覽
一、基本概述
JS是採用事件驅動的機制來回應使用者操作的，也就是說當使用者對某個html元素進行操作的時候，會產生一個時間，該時間會驅動某些函數來處理。
PS：這種方式和Java GUI中的事件監聽機制很像，都是需要註冊監聽，然後再處理監聽，只不過實現的方式不同而已。
二、事件驅動原理
- 事件來源：產生事件的地方(html元素)
- 事件：點擊/滑鼠操作/鍵盤操作等等
- 事件對象：當某個事件發生時，可能會產生一個事件對象，該時間對象會封裝好該時間的信息，傳遞給事件處理程序
- 事件處理程序：回應使用者事件的程式碼
案例：
<html>
<head>
<script type="text/javascript">
function test1(e){
window.alert("x=" + e.clientX + " y=" + e.clientY);
}
function test2(e){
window.alert("x=" + e.clientX + " y=" + e.clientY);
}
function test3(e){
window.alert(new Date().toLocaleString());
}
function test4(e){
if(e.value == "red"){
div1.style.backgroundColor = "red";
} else if (e.value == "black"){
div1.style.backgroundColor = "black";
}
}
</script>
</head>
<body>
<input type="button" onclick="test1(event)" value="button1">
<input type="button" onmouseover="test2(event)" value="button2">
<input type="button" onclick="test3(event)" value="button3">
<div id="div1" style="width: 400px; height: 300px; background-color: red"></div>
<input type="button" onclick="test4(this)" value="red">
<input type="button" onclick="test4(this)" value="black">
</body>
</html>
- JS事件分類
- 老鼠事件
- click dblclick mousedown mouseout mouseover mouseup mousemove等
- 鍵盤事件
- keydown keypress keyup等
- HTML事件
- window的onload unload error abort 文字框的select change等
- 其他事件
- 頁面中有些特殊物件運作過程中產生的事件
案例1：監聽滑鼠點擊事件，並且能夠顯示滑鼠點擊的位置x,y
<html>
<head>
<script>
function test1(e){
window.alert("x="+e.clientX+"y="+e.clientY);
}
</script>
</head>
<body onmousedown="test1(event)">
</body>
</html>
點選瀏覽器之後，顯示座標(有些瀏覽器可能無效)
案例2：點選按鈕，圖片變成紅色，黑色
方法：JS存取內部css
//js如何访问css属性，来改变外观
<html>
<head>
<script>
function test3(e){
var pic=document.getElementById("pic");
if(e.value=="红色"){
pic.style.backgroundColor="red";
}
else if(e.value=="黑色"){
pic.style.backgroundColor="black";
}
}
</script>
</head>
<body >
<div id="pic" style="border:1;background-color:red;width:300px;height:300px"></div>
<input type="button" onclick="test3(this)" value="红色">
<input type="button" onclick="test3(this)" value="黑色">
</body>
</html>
方法：JS存取外部css(這方法不一定適用於所有瀏覽器)
event2.css
.style {
border:1;
background-color:red;
width:300px;
height:300px;
}
event2.html
<html>
<head>
<script>
function test3(e){
//取连接的第一个css文件的内容用0
var ocssRules=document.styleSheets[0].rules;
//从ocssRules取出你希望的样式
var style=ocssRules[0];//这里面的0表示event2.css文件中第一个规则
if(e.value=="黑色"){
style.style.backgroundColor="black";
}
else if(e.value=="红色"){
style.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div class="style"></div>
<input type="button" onclick="test3(this)" value="红色">
<input type="button" onclick="test3(this)" value="黑色">
</body>
</html>
案例3：區分目前瀏覽器的核心是什麼?(區分出ie6/7/8/ 火狐等)
<script language="javascript">
if(window.XMLHttpRequest)
{ //Mozilla, Safari, IE7,IE8
if(!window.ActiveXObject)
{ // Mozilla, Safari,
alert('Mozilla, Safari');
}
else
{
alert('IE7 .8');
}
}
else
{
alert('IE6');
}
</script>
案例4：一個事件可以被多個函數監聽
<html>
<head>
function test(e){
window.alert("fss");
}
function test1(e){
window.alert("sfdsdf");
}
</script>
</head>
<body>
<div class="style"></div>
<input type="button" onclick="test(this),test1(this)" value="红色">
</body>
</html>
案例5：防止使用者點選滑鼠右鍵選單拷貝網頁內容，選擇網頁內容
<html>
<script type="text/javascript">
function test(){
//window.alert("没有菜单");
return false;
}
function test2(){
//window.alert("全选不行");
return false;
}
</script>
</head>
<!--body元素响应oncontextmenu,onselectstart事件 -->
<body oncontextmenu="return test()" onselectstart="return test2()">
内容
</body>
</html>
下篇文章為大家分享一個簡單綜合案例：簡單的計算器，希望大家不要錯過。
關於Javascript事件驅動程式設計遠不止這些，希望本文所述對大家學習javascript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn