js 事件驅動原理

時間  2019-12-09
標籤 事件 驅動 原理 欄目 JavaScript 简体版
原文   原文鏈接

   還記得當初學JAVA-GUI編程時學習過事件監聽機制，此時再學習JavaScript中的事件驅動機制，難免簡單。當初學習時也是畫過原理圖，因此從原理圖開始吧！javascript

   

   js是採用事件驅動(event-driven)響應用戶操做的。好比經過鼠標或者按鍵在瀏覽器窗口或者網頁元素(按鈕，文本框...)上執行的操做，咱們稱之爲事件(Event)。由鼠標或熱鍵引起的一連串程序的動做，稱之爲事件驅動(Event-Driver)。對事件進行處理程序或函數，咱們稱之爲事件處理程序(Event Handler)。css

   

   事件的分類：html

   鼠標事件：java

   當用戶在頁面上用鼠標點擊頁面元素時，對應的dom節點會觸發鼠標事件，主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。編程

   鍵盤事件：瀏覽器

   當用戶用鍵盤輸入信息時，會觸發鍵盤操做事件。主要包括keydown、keypress、keyup三個。dom

   HTML事件：函數

   在html節點加載變動等相關的事件，好比window的onload、unload、abort、error，文本框select、change等等。學習

   其它事件：測試

   頁面中一些特殊對象運行過程當中產生的事件，好比xmlhttprequest對象的相關事件。

   以下例：

   做爲第一個入門案例，會遇到一個問題以下：

   代碼以下：

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        function test(e) {
            window.alert("x = "+ e.cientX + " y =" + e.clientY);
        }
    </script>
</head>
<body onmousedown="test(event)">
    
</body>
</html>
複製代碼

   以上代碼的做用是，在鼠標按下後，彈出窗口顯示x、y的座標。

   這段代碼在IE九、Chrome下都不能夠正常運行。這究竟是什麼緣由呢?

   後來，我就搜索了一下，發現有人和我有一樣的問題，他也解決了，我是參考js的onmousedown事件放在<body>標籤下與firefox瀏覽器所產生的問題這篇文章的。

   原來是body的緣由。

   因而，我就給body加了個寬高試試：

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        function test(e) {
            window.alert("x = "+ e.clientX + " y =" + e.clientY);
        }
    </script>
</head>
<body style="width: 1000px; height: 800px; border: 1px solid red;" onmousedown="test(event)">
    
</body>
</html>
複製代碼

   咱們不難發現，當咱們沒有給body設置寬高時，body的範圍僅僅是一條線，因此onmousedown事件也就沒法響應。因此，在給body設置寬高後，咱們就能夠在body的寬高範圍響應onmousedown事件了。

   如何理解事件驅動機制

   爲了讓你們進一步理解js的事件驅動機制，咱們來看兩個案例：

   案例：顯示一個按鈕，點擊按鈕後彈出對話框顯示當前時間。

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        function test1() {
            window.alert(new Date().toLocaleString());
        }
    </script>
</head>
<body>
    <input type="button" onclick="test1()" value="顯示當前時間" />
</body>
</html>
複製代碼

   案例：經過點擊按鈕改變DIV的顏色。

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        //js如何訪問元素的style屬性，進行樣式修改
        function test4(eventObj) {
            //怎麼知道button1被按，仍是button2被按下
            //window.alert(eventObj.value);
            if(eventObj.value == "黑色") {
                //獲取div1
                var div1 = document.getElementById("div1");
                div1.style.background = "black";
            } else if(eventObj.value == "紅色") {
                var div1 = document.getElementById("div1");
                div1.style.background = "red";
            }
        }
    </script>
</head>
<body>
    <div id="div1" style="width: 400px; height: 300px; background: red;">div1</div>
    <input type="button" value="黑色" onclick="test4(this)" />
    <input type="button" value="紅色" onclick="test4(this)" />
</body>
</html>
複製代碼

   javascript訪問修改CSS樣式表

   javascript訪問修改樣式表，能夠方便的動態修改頁面：

   一、訪問元素中style屬性的CSS樣式

   這個能夠直接使用style對象方便的訪問，例如：

<div id="mdiv" style="">...</div>

   訪問CSS的方法是：

複製代碼 
<script type="text/javascript">
//得到元素
var oDiv=document.getElementById("mdiv");
//訪問元素的style對象，再訪問對象中的屬性，也能夠修改屬性的值，直接爲他賦值
alert(oDiv.style.backgroundColor);
</script>
複製代碼

   二、訪問外部定義的CSS樣式(類定義的CSS樣式)

   這個無法使用上面的方法去訪問，由於CSS數據不是存儲在style屬性中，它是存儲在類中的。

   訪問方法：先取得定義類的樣式表的引用，用document.styleSheets集合實現這個目的，這個集合包含HTML頁面中全部的樣式表，DOM爲每一個樣式表定義一個cssRules的集合，這個集合中包含定義在樣式表中的所用CSS規則(注意：Mozilla和Safasi中是cssRules，而IE中是rules)。

   例，

   外部樣式表(myCss.css)以下：

複製代碼 
/*第一條規則*/
div .ss{
    background-color:red;
    width:101px;
}

/*第二條規則*/
a .btn2{
    background:url(imag/2-AccessCtl.jpg);
}
複製代碼

   訪問css：

複製代碼 
var ocssRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//訪問第一條規則
alert(ocssRules[0].style.backgroundColor);
//設置值
ocssRules[0].style.width="992px";

//訪問第二條規則
alert(ocssRules[1].style.background);
//設置值
ocssRules[0].style.background="url(imag/3-back.jpg);";
複製代碼

   以上是我用到的時候一些簡單的應用，具體深刻的使用能夠參看《javascript高級程序設計》中DOM技術部分。

   以下例：

   案例：經過點擊按鈕改變DIV的顏色(使用CSS樣式表修改)

   外部樣式表(mycss.css)：

.style1 {
    width: 600px;
    height: 400px;
    background: black;
}

   說明：如下代碼在Chrome瀏覽器不起做用，在IE9中不管使用.rules仍是使用.cssRules都經過測試。

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js事件驅動機制操做外部CSS案例</title>
    <link rel="stylesheet" type="text/css" href="mycss.css" />
    <link rel="stylesheet" type="text/css" href="mycss2.css" />
    <script type="text/javascript">
        function test4(eventObj) {
            //獲取mycss.css中全部class選擇器
            var ocssRules = document.styleSheets[0].cssRules;//或xxx.rules
            //從ocssRules中取出你但願的class
            //ocssRules[0]:這裏的0表示mycss.css文件中的一個樣式規則
            var style1 = ocssRules[0];
            if(eventObj.value == "黑色") {
                style1.style.background = "black";
            } else if(eventObj.value == "紅色") {
                style1.style.background = "red";
            }    
        }
    </script>
</head>
<body style="width: 900px; height: 800px; border: 1px solid red;">
    <!-- 如何經過修改style來改變style -->
    <div id="div1" class="style1">div1</div>
    <input type="button" value="黑色" onclick="test4(this)" />
    <input type="button" value="紅色" onclick="test4(this)" />
</body>
</html>
複製代碼

   如何理解事件驅動機制對不一樣瀏覽器的兼容

   如何區分當前瀏覽器類型?

   代碼以下：

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        //"" null false 0 NaN都是false
        if(window.XMLHttpRequest){//Mozilla,Safari,IE7,IE8,IE9...
            if(!window.ActiveXObject){//Mozilla,Safari
                alert("Mozilla(FF),Safari");
            }else{
                alert("IE");
            }
        }else{
            alert("IE6");
        }
    </script>
</head>
<body>
    
</body>
</html>
複製代碼

   一個事件能夠被多個函數監聽

   事件寫在前面的會被先調用。

   以下例：

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        function test4(e) {
            window.alert("ok1");
        }
        function test5(e) {
            window.alert("ok2");
        }
    </script>
</head>
<body>
    <input type="button" value="測試" onclick="test5(this),test4(this)" />
</body>
</html>
複製代碼

   JavaScript經常使用事件：

   可參考：http://www.w3school.com.cn/jsref/jsref_events.asp及http://www.w3school.com.cn/jsref/dom_obj_event.asp。

   下面仍是舉幾個例子吧！

onfocus 元素得到焦點(當光標處在其中時觸發)

 

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        function test6() {
            window.alert("輸入框被選中");
        }
    </script>
</head>
<body>
    <input type="text" id="text1" onfocus="test6()" /><br/>
</body>
</html>
複製代碼

   那麼如何使得頁面一加載，文本框即得到焦點，這是一個疑問?

   window有三個事件

onload 一張頁面或一幅圖像完成加載
onunload 用戶退出頁面
onbeforeunload 關閉頁面時

 

   以下例：

   說明：onload事件在IE9和Chrome瀏覽器測試經過，onbeforeunload事件在IE9中測試經過，onunload事件均沒經過。

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        function test6() {
            window.alert("輸入框被選中");
        }
        function test7() {
            window.alert("onload...");
        }
        function test8() {
            window.alert("onbeforeunload...");
        }
        function test9() {
            window.alert("onunload...");
        }
    </script>
</head>
<body onload="test7()" onbeforeunload="test8()" onunload="test9()">
    <input type="text" id="text1" onfocus="test6()" /><br/>
</body>
</html>
複製代碼

   js經常使用事件實例

   請使用js完成以下功能：

   一、防止用戶經過點擊鼠標右鍵菜單copy網頁內容

   二、當用戶試圖選中網頁文字copy時，給出提示(版權全部，禁止拷貝)

   說明：oncontextmenu(IE九、Chrome不支持)，onselectstart(IE9支持，Chrome不支持)

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <script type="text/javascript">
        function test6() {
            window.alert("輸入框被選中");
        }
        function test1() {
            window.alert("版權全部，禁止拷貝");
            return false;
        }
        function test2() {
            window.alert("不要點擊右鍵");
            return false;
        }
    </script>
</head>
<body onselectstart="return test1()" oncontextmenu="return test2()">
    請使用js完成以下功能：
    一、防止用戶經過點擊鼠標右鍵菜單copy網頁內容
    二、當用戶試圖選中網頁文字copy時，給出提示(版權全部，禁止拷貝)<br/>
    <input type="text" id="text1" onfocus="test6()" /><br/>
</body>
</html>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程