這篇文章主要介紹“JavaScript與HTML怎么實現(xiàn)交互”，在日常操作中，相信很多人在JavaScript與HTML怎么實現(xiàn)交互問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript與HTML怎么實現(xiàn)交互”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元鐵東做網(wǎng)站,已為上家服務(wù),為鐵東各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

JavaScript和HTML的交互是通過事件實現(xiàn)的。JavaScript采用異步事件驅(qū)動編程模型，當文檔、瀏覽器、元素或與之相關(guān)對象發(fā)生特定事情時，瀏覽器會產(chǎn)生事件。如果JavaScript關(guān)注特定類型事件，那么它可以注冊當這類事件發(fā)生時要調(diào)用的句柄。

事件流

事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div，點擊了內(nèi)層的div，這時候是內(nèi)層的div先出發(fā)click事件還是外層先觸發(fā)？目前主要有三種模型

IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素

Netscape的事件捕獲：不太具體的節(jié)點更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反

DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡句階段。

Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

如有以下html，點擊div區(qū)域

復(fù)制代碼

   

復(fù)制代碼

Untitled

Untitled

Untitled

事件冒泡模型

事件捕獲模型

DOM事件流

事件處理程序（handler）

我們也稱之為事件偵聽器（listener），事件就是用戶或瀏覽器自身執(zhí)行的某種動作。比如click、load、moseover等，都是事件類型（俗稱事件名稱），而響應(yīng)某個事件的方法就叫做事件處理程序或者事件監(jiān)聽器或者事件句柄，事件處理程序名字是：on+事件類型。

了解了這些，我們看看如何給元素添加事件處理程序

HTML事件處理程序

元素支持的每個事件都可以使用一個相應(yīng)事件處理程序同名的HTML屬性指定。這個屬性的值應(yīng)該是可以執(zhí)行的JavaScript代碼，我們可以為一個button添加 click事件處理程序

在HTML事件處理程序中可以包含要執(zhí)行的具體動作，也可以調(diào)用在頁面其它地方定義的腳本,剛才的例子可以寫成這樣

復(fù)制代碼

這樣處理，事件處理程序被認為是元素的方法，事件處理程序在元素的作用域下運行，this就是當前元素，所以點擊button結(jié)果是：btnClick

這樣還有一個好處，我們可以刪除事件處理程序，只需把元素的onclick屬性賦為null即可

DOM2事件處理程序

DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：addEventListener和removeEventListener。所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：事件類型、事件處理方法、一個布爾值。最后布爾參數(shù)如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理。

剛才的例子我們可以這樣寫

復(fù)制代碼

復(fù)制代碼

上面代碼為button添加了click事件的處理程序，在冒泡階段觸發(fā)，與上一種方法一樣，這個程序也是在元素的作用域下運行，不過有一個好處，我們可以為click事件添加多個處理程序

復(fù)制代碼

復(fù)制代碼

這樣兩個事件處理程序會在用戶點擊button后按照添加順序依次執(zhí)行。

通過addEventListener添加的事件處理程序只能通過removeEventListener移除，移除時參數(shù)與添加的時候相同，這就意味著剛才我們添加的匿名函數(shù)無法移除，因為匿名函數(shù)雖然方法體一樣，但是句柄卻不相同，所以當我們有移除事件處理程序的時候可以這樣寫

復(fù)制代碼

復(fù)制代碼

下面就是老生常談的IE兼容性問題了。。。

IE并不支持addEventListener和removeEventListener方法，而是實現(xiàn)了兩個類似的方法attachEvent和detachEvent，這兩個方法都接收兩個相同的參數(shù)，事件處理程序名稱和事件處理程序方法，由于IE指支持事件冒泡，所以添加的程序會被添加到冒泡階段。

使用attachEvent添加事件處理程序可以如下

復(fù)制代碼

復(fù)制代碼

結(jié)果是undefined，很奇怪，一會兒我們會介紹到

使用attachEvent添加的事件處理程序可以通過detachEvent移除，條件也是相同的參數(shù)，匿名函數(shù)不能被移除。

復(fù)制代碼

復(fù)制代碼

跨瀏覽器的事件處理程序

前面內(nèi)容我們可以看到，在不同的瀏覽器下，添加和移除事件處理程序方式不相同，要想寫出跨瀏覽器的事件處理程序，首先我們要了解不同的瀏覽器下處理事件處理程序的區(qū)別

在添加事件處理程序事addEventListener和attachEvent主要有幾個區(qū)別

1. 參數(shù)個數(shù)不相同，這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）

2. 第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）

3. 事件處理程序的作用域不相同，addEventListener得作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行，this是window，所以剛才例子才會返回undefined，而不是元素id

4. 為一個事件添加多個事件處理程序時，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器

了解了這四點區(qū)別后我們可以嘗試寫一個瀏覽器兼容性比較好的添加事件處理程序方法

復(fù)制代碼

function addEvent(node, type, handler) {

            if (!node) return false;

            if (node.addEventListener) {

                node.addEventListener(type, handler, false);

                return true;

            }

            else if (node.attachEvent) {

                node.attachEvent('on' + type, handler, );

                return true;

            }

            return false;

        }

復(fù)制代碼

這樣，首先我們解決了第一個問題參數(shù)個數(shù)不同，現(xiàn)在三個參數(shù)，采用事件冒泡階段觸發(fā)，第二個問題也得以解決，如果是IE，我們給type添加上on，第四個問題目前還沒有解決方案，需要用戶自己注意，一般情況下，大家也不會添加很多事件處理程序，試試這個方法感覺很不錯，但是我們沒有解決第三個問題，由于處理程序作用域不同，如果handler內(nèi)有this之類操作，那么就會出錯在IE下，實際上大多數(shù)函數(shù)都會有this操作。

復(fù)制代碼

function addEvent(node, type, handler) {

            if (!node) return false;

            if (node.addEventListener) {

                node.addEventListener(type, handler, false);

                return true;

            }

            else if (node.attachEvent) {

                node.attachEvent('on' + type, function() { handler.apply(node); });

                return true;

            }

            return false;

        }

復(fù)制代碼

這樣處理就可以解決this的問題了，但是新的問題又來了，我們這樣等于添加了一個匿名的事件處理程序，無法用detachEvent取消事件處理程序，有很多解決方案，我們可以借鑒大師的處理方式，jQuery創(chuàng)始人John Resig是這樣做的

復(fù)制代碼

function addEvent(node, type, handler) {

            if (!node) return false;

            if (node.addEventListener) {

                node.addEventListener(type, handler, false);

                return true;

            }

            else if (node.attachEvent) {

                node['e' + type + handler] = handler;

                node[type + handler] = function() {

                    node['e' + type + handler](window.event);

                };

                node.attachEvent('on' + type, node[type + handler]);

                return true;

            }

            return false;

        }

復(fù)制代碼

在取消事件處理程序的時候

復(fù)制代碼

function removeEvent(node, type, handler) {

            if (!node) return false;

            if (node.removeEventListener) {

                node.removeEventListener(type, handler, false);

                return true;

            }

            else if (node.detachEvent) {

                node.detachEvent('on' + type, node[type + handler]);

                node[type + handler] = null;

            }

            return false;

        }

復(fù)制代碼

John Resig很巧妙地利用了閉包，看起來很不錯。

事件對象

在觸發(fā)DOM上的某個事件的時候會產(chǎn)生一個事件對象event，這個對象包含著所有與事件有關(guān)的信息，包括產(chǎn)生事件的元素、事件類型等相關(guān)信息。所有瀏覽都支持event對象，但支持方式不同。

DOM中的事件對象

兼容DOM的瀏覽器會產(chǎn)生一個event對象傳入事件處理程序中。應(yīng)用一下剛才我們寫的addEvent方法

var btnClick = document.getElementById('btnClick');

    addEvent(btnClick, 'click', handler);

點擊button的時候我們可以看到彈出內(nèi)容是click的彈窗

event對象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法，觸發(fā)事件的類型不同，可用的屬性和方法也不同，但是所有事件都會包含

屬性/方法

類型

讀/寫

說明

bubbles Boolean 只讀 事件是否冒泡

cancelable Boolean 只讀 是否可以取消事件的默認行為

currentTarget Element 只讀 事件處理程序當前處理元素

detail Integer 只讀 與事件相關(guān)細節(jié)信息

eventPhase Integer 只讀 事件處理程序階段：1 捕獲階段，2 處于目標階段，3 冒泡階段

preventDefault() Function 只讀 取消事件默認行為

stopPropagation() Function 只讀 取消事件進一步捕獲或冒泡

target Element 只讀 事件的目標元素

type String 只讀 被觸發(fā)的事件類型

view AbstractView 只讀 與事件關(guān)聯(lián)的抽象視圖，等同于發(fā)生事件的window對象

在事件處理程序內(nèi)部，this始終等同于currentTarget，而target是事件的實際目標。

要阻止事件的默認行為，可以使用preventDefault（）方法，前提是cancelable值為true，比如我們可以阻止鏈接導(dǎo)航這一默認行為

document.getElementsByTagName('a').onclick = function (e) {

            e.preventDefault();

        }

stopPaopagation()方法可以停止事件在DOM層次的傳播，即取消進一步的事件捕獲或冒泡。我們可以在button的事件處理程序中調(diào)用stopPropagation（）從而避免注冊在body上的事件發(fā)生

復(fù)制代碼

var handler = function (e) {

            alert(e.type);

            e.stopPropagation();

        }

        addEvent(document.body, 'click', function () { alert('Clicked body')});

        var btnClick = document.getElementById('btnClick');

        addEvent(btnClick, 'click', handler);

復(fù)制代碼

若是注釋掉e.stopPropagation(); 在點擊button的時候，由于事件冒泡，body的click事件也會觸發(fā)，但是調(diào)用這句后，事件會停止傳播。

IE中的事件對象

訪問IE中的event對象有幾種不同的方式，取決于指定事件處理程序的方法。直接為DOM元素添加事件處理程序時，event對象作為window對象的一個屬性存在

復(fù)制代碼

var handler = function () {

            var e = window.event;

            alert(e.type);

        }

        var btnClick = document.getElementById('btnClick');

        btnClick.onclick = handler;

復(fù)制代碼

我們通過window.event取得了event對象，并檢測到了其類型，可是如果事件處理程序是通過attachEvent添加的，那么就會有一個event對象被傳入事件處理程序中

var handler = function (e) {

            alert(e.type);

        }

        var btnClick = document.getElementById('btnClick');

        attachEvent(btnClick, handler);

當然這時候也可以通過window對象訪問event，方便起見，我們一般會傳入event對象，IE中所有的事件都包含以下屬性方法

屬性/方法

類型

讀/寫

說明

cancelBulle Boolean 讀/寫 默認為false，設(shè)置為true后可以取消事件冒泡

returnValue Boolean 讀/寫 默認為true，設(shè)為false可以取消事件默認行為

srcElement Element 只讀 事件的目標元素

type String 只讀 被觸發(fā)的事件類型

跨瀏覽器的事件對象

雖然DOM和IE的event對象不同，但基于它們的相似性，我們還是可以寫出跨瀏覽器的事件對象方案

復(fù)制代碼

function getEvent(e) {

            return e || window.event;

        }

        function getTarget(e) {

            return e.target || e.scrElement;

        }

        function preventDefault(e) {

            if (e.preventDefault)

                e.preventDefault();

            else

                e.returnValue = false;

        }

        function stopPropagation(e) {

            if (e.stopPropagation)

                e.stopPropagation();

            else

                e.cancelBubble = true;

        }

復(fù)制代碼

常用HTML事件

有一些HTML事件我們會經(jīng)常用到，這些事件不一定與用戶操作有關(guān)，這里只是簡單提及，詳細用法大家就得百度谷歌了

load：當頁面完全加載后在window上觸發(fā)，當圖像加載完成后在img元素上觸發(fā)，或當嵌入內(nèi)容加載完成時，在object元素上觸發(fā)

unload：頁面完全卸載后在window上觸發(fā)，或嵌入內(nèi)容卸載后在object元素觸發(fā)

select：用戶選擇文本框中的字符時觸發(fā)

change：文本框焦點變化后其值改變時觸發(fā)

submit：用戶提交表單的時候觸發(fā)

resize：窗口或框架大小變化的時候在window上觸發(fā)

scrool：用戶滾動帶滾動條的元素時，在該元素上觸發(fā)

focus：頁面或元素獲得焦點時在window及相應(yīng)元素上觸發(fā)

blur：頁面或元素失去焦點時在window及相應(yīng)元素上觸發(fā)

beforeunload：頁面卸載前在window上觸發(fā)

mousewheel：不算HTML的，當用戶通過鼠標滾輪與頁面交互，在垂直方向滾動頁面時觸發(fā)

到此，關(guān)于“JavaScript與HTML怎么實現(xiàn)交互”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享名稱：JavaScript與HTML怎么實現(xiàn)交互
URL網(wǎng)址：http://weahome.cn/article/jsgchc.html