js 綁定方法怎么寫?

方法一：綁定屬性元素

創(chuàng)新互聯(lián)專注于興山企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站制作。興山網(wǎng)站建設(shè)公司,為興山等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

最簡單和向后兼容性最好的事件綁定方法是把事件綁定到元素標(biāo)識的屬性。事件屬性名稱由事件類型外加一個“on”前綴構(gòu)成。盡管HTML屬性并不是大小寫敏感的，人們還是定義了一個規(guī)則，規(guī)定事件類型的每一個“詞”的首字母大寫，比如onClick?和onMouseOver。這些屬性也被稱為事件處理器，因為它們指示了元素如何“處理”特定的事件類型。

示例：

INPUT?TYPE="button"?NAME="myButton"?VALUE="Click?Here"?onClick="myFunc()"?

!--把事件綁定到元素屬性上有一個優(yōu)點，即可以支持開發(fā)者把參數(shù)傳遞給事件處理器函數(shù)。接收事件的元素的引用則由一個特殊的參數(shù)值--this???

關(guān)鍵字來傳遞。下面的代碼演示一個函數(shù)如何借助傳入?yún)?shù)，把任意數(shù)目的文本框的內(nèi)容轉(zhuǎn)化為大寫：??--

SCRIPT?LANGUAGE="JavaScript"function?convertToUpper(textbox)?{??????

textbox.value?=?textbox.value.toUpperCase();}??

/SCRIPT...FORM?....??

INPUT?TYPE="text"?NAME="first_name"?onChange="convertToUpper(this)"??

INPUT?TYPE="text"?NAME="last_name"?onChange="convertToUpper(this)".../FORM

方法二：綁定IE4+SCRIPT FOR標(biāo)識

IE4+ 中，Microsoft 對 SCRIPT 標(biāo)識實現(xiàn)了自己的擴展，可以將它包含的腳本語句和某個元素的一個事件類型進行綁定。支持這個綁定的標(biāo)識屬性（還沒有被 W3C 批準(zhǔn)為 HTML 的一部分）是?FOR?和EVENT。

FOR?屬性的值必須是您為元素的 ID 屬性分配的唯一標(biāo)識符。然后，您必須把事件的名稱（onmouseover，onclick，等等）分配給?EVENT屬性。在上面的按鍵實例的基礎(chǔ)上，我們必須對按鍵標(biāo)識進行修改，使之包含一個ID?屬性：

INPUT?TYPE="button"?NAME="myButton"?ID="button1"?VALUE="Click?Here"

!--腳本語句并不在函數(shù)中，而是在?SCRIPT?標(biāo)識中，如下所示：--??

SCRIPT?FOR="button1"?EVENT="onclick"http://?script?statements?here?/SCRIPT

方法三：綁定對象屬性

對于 NN3+ 和 IE4+ 這兩類瀏覽器，腳本編程人員可以以腳本語句的方式把事件綁定到對象上，而不是綁定到元素標(biāo)識的屬性上。每一個負責(zé)事件響應(yīng)的元素對象都為自己能夠識別的事件設(shè)置了相應(yīng)的屬性。對象屬性名稱是元素標(biāo)識屬性的小寫形式，比如onmouseover。NN4 還接受 interCap（即首字小寫，之后的每一個詞的首字大寫）版本的屬性名，但是考慮到跨瀏覽器的兼容性，所有字母都是小寫的名稱會更安全一些。

當(dāng)您把一個函數(shù)的引用賦值給一個事件屬性的時候，就發(fā)生了綁定。函數(shù)的引用是指函數(shù)的名稱，但是不帶函數(shù)定義中的括號。因此，如果要為一個名為myButton?的按鍵的點擊事件（click）進行綁定，使之激活一個定義為myFunc()?的函數(shù)，則其賦值語句如下所示：

document.forms[0].myButton.onclick = myFunc;

方法四：使用IE5/Windows的attachEvent()方法

attachEvent()?方法的用法如下所示：

elemObject.attachEvent("eventName",?functionReference);

eventName?參數(shù)的值是表示事件名稱的字符串，比如?onmousedown。????????????????????functionReference?參數(shù)是一個不帶括號的函數(shù)引用，和早些時候描述的事件屬性方法中一樣。因此對于上面例子的按鍵對象，可以通過如下的腳本語句把函數(shù)綁定到按鍵的 click 事件：

document.getElementById("button1").attachEvent("onclick",?myFunc);

由于?attachEvent()?方法必須嚴格工作在 IE5+/Windows 的環(huán)境中，所以您既可以使用 W3C DOM 的元素引用方式（如上文所示），也可以使用 IE4+ 的引用方式：

document.all.button1.attachEvent("onclick",?myFunc);

方法五：使用W3C DOM的addEventListener();

addEventListener()?方法的語法如下所示：

nodeReference.addEventListener("eventType", listenerReference, captureFlag);

用 W3C DOM 規(guī)范中的行話來說，addEventListener()?方法為指定的結(jié)點注冊了一個事件，表示該結(jié)點希望處理相應(yīng)的事件。

這個方法的第一個參數(shù)是一個聲明事件類型的字符串（不帶"on"前綴），比如click，mousedown，和keypress。

addEventListener()?方法的第二個參數(shù)可以和早些時候描述過的函數(shù)引用同樣對待。

第三個參數(shù)則是一個 Boolean 值，指明該結(jié)點是否以DOM中所謂的捕捉模式來偵聽事件。事件的捕捉和派發(fā)---綜合起來稱為事件的傳播--最后由另一篇文章來描述。對于一個典型的事件偵聽器來說，第三個參數(shù)應(yīng)該為false（假）。

如何用javascript實現(xiàn)雙向數(shù)據(jù)綁定

1、手動綁定

比較老的實現(xiàn)方式，有點像觀察者編程模式，主要思路是通過在數(shù)據(jù)對象上定義get和set方法(當(dāng)然還有其它方法)，調(diào)用時手動調(diào)用get或set數(shù)據(jù)，改變數(shù)據(jù)后出發(fā)UI層的渲染操作；以視圖驅(qū)動數(shù)據(jù)變化的場景主要應(yīng)用與input、select、textarea等元素，當(dāng)UI層變化時，通過監(jiān)聽dom的change，keypress，keyup等事件來出發(fā)事件改變數(shù)據(jù)層的數(shù)據(jù)。整個過程均通過函數(shù)調(diào)用完成。

2、臟檢查機制

以典型的mvvm框架angularjs為代表，angular通過檢查臟數(shù)據(jù)來進行UI層的操作更新。關(guān)于angular的臟檢測，有幾點需要了解些： - 臟檢測機制并不是使用定時檢測。 - 臟檢測的時機是在數(shù)據(jù)發(fā)生變化時進行。 - angular對常用的dom事件，xhr事件等做了封裝， 在里面觸發(fā)進入angular的digest流程。 - 在digest流程里面， 會從rootscope開始遍歷， 檢查所有的watcher。 （關(guān)于angular的具體設(shè)計可以看其他文檔，這里只討論數(shù)據(jù)綁定），那我們看下臟檢測該如何去做：主要是通過設(shè)置的數(shù)據(jù)來需找與該數(shù)據(jù)相關(guān)的所有元素，然后再比較數(shù)據(jù)變化，如果變化則進行指令操作。

3、前端數(shù)據(jù)劫持(Hijacking)

第三種方法則是avalon等框架使用的數(shù)據(jù)劫持方式。基本思路是使用Object.defineProperty對數(shù)據(jù)對象做屬性get和set的監(jiān)聽，當(dāng)有數(shù)據(jù)讀取和賦值操作時則調(diào)用節(jié)點的指令，這樣使用最通用的=等號賦值就可以了。

Javascript中什么可以綁定事件

使用addEventListener綁定事件，同時使用removeEventListener取消綁定。注意，removeEventListener只能刪除有實體的函數(shù)的，不能夠刪除類似的：

document.documentElement.addEventListener(event,function(){});

例子：

function?a(){alert('Hello?World!')}

window.addEventListener('click',a)等價于window.addEventListener('click',function(){a()})

js事件綁定和普通事件有什么區(qū)別

事件綁定相當(dāng)于在一個元素上進行監(jiān)聽，監(jiān)聽事件是否觸發(fā)。

普通事件就是直接觸發(fā)事件。

兩者的區(qū)別就在于是否可重復(fù)使用。

事件綁定可以在一個元素上監(jiān)聽同一事件多次，而普通事件多次寫會被覆蓋。如：

var?ys1?=?‘某個元素監(jiān)聽（綁定）’,ys2?=?‘另一個元素(普通事件)’;

ys1.addEventListener('click',function?()?{

alert(1);

});

ys1.addEventListener('click',function?()?{

alert(2)

});

//會彈出1，2；

ys2.onclick?=?function(){

alert(1);

}

ys2.onclick?=?function(){

alert(2);

}

//只會彈出2.

Javascript事件綁定的幾種方式

以button的Click事件為例：

button id="btn"click me/button

function clickBtn() {

alert('click!');

}

1、直接在元素上綁定回調(diào)函數(shù) button id="btn" onclick="clickBtn()"click me/button

2、JS獲取DOM元素對象后，對onclick屬性賦值，綁定事件： document.getElementById('btn').onclick=clickBtn;

3、JS獲取DOM對象后，調(diào)用對象的addEventListener函數(shù)綁定事件：document.getElementById('btn').addEventListener('click',clickBtn);

現(xiàn)階段主流瀏覽器兼容的綁定事件方式就這3種

javascript中綁定body的onload事件的幾種方法？

一般來說，有4種方法：

1：直接把代碼寫在html里，例如:body onload="functionA();functionB()"

2：寫在頁面的js里，例如：

window.onload = function () {

functionA();

functionB();

}

3：用綁定事件的方式綁定上去，例如：

function addListener (element, event, fn) {

if (window.attachEvent) {

element.attachEvent('on' + event, fn);

} else {

element.addEventListener(event, fn, false);

}

}

addListener(window, 'load', functionA);

addListener(window, 'load', functionB);

4：用第三方j(luò)s框架（如jquery）來綁定事件，例如：

$("body").on("load",function(){

})

當(dāng)前文章：javascript綁定,js雙向綁定
標(biāo)題鏈接：http://chinadenli.net/article27/dsehijj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、品牌網(wǎng)站制作、云服務(wù)器、營銷型網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)