javascript绑定,js双向绑定

js 绑定方法怎么写?

方法一：绑定属性元素

最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。尽管HTML属性并不是大小写敏感的，人们还是定义了一个规则，规定事件类型的每一个“词”的首字母大写，比如onClick 和onMouseOver。这些属性也被称为事件处理器，因为它们指示了元素如何“处理”特定的事件类型。

示例：

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

!--把事件绑定到元素属性上有一个优点，即可以支持开发者把参数传递给事件处理器函数。接收事件的元素的引用则由一个特殊的参数值--this   

关键字来传递。下面的代码演示一个函数如何借助传入参数，把任意数目的文本框的内容转化为大写：  --

  

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标识

IE4+ 中，Microsoft 对 SCRIPT 标识实现了自己的扩展，可以将它包含的脚本语句和某个元素的一个事件类型进行绑定。支持这个绑定的标识属性（还没有被 W3C 批准为 HTML 的一部分）是 FOR 和EVENT。

FOR 属性的值必须是您为元素的 ID 属性分配的唯一标识符。然后，您必须把事件的名称（onmouseover，onclick，等等）分配给 EVENT属性。在上面的按键实例的基础上，我们必须对按键标识进行修改，使之包含一个ID 属性：

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

!--脚本语句并不在函数中，而是在 SCRIPT 标识中，如下所示：--  

SCRIPT FOR="button1" EVENT="onclick"// script statements here /SCRIPT

方法三：绑定对象属性

对于 NN3+ 和 IE4+ 这两类浏览器，脚本编程人员可以以脚本语句的方式把事件绑定到对象上，而不是绑定到元素标识的属性上。每一个负责事件响应的元素对象都为自己能够识别的事件设置了相应的属性。对象属性名称是元素标识属性的小写形式，比如onmouseover。NN4 还接受 interCap（即首字小写，之后的每一个词的首字大写）版本的属性名，但是考虑到跨浏览器的兼容性，所有字母都是小写的名称会更安全一些。

当您把一个函数的引用赋值给一个事件属性的时候，就发生了绑定。函数的引用是指函数的名称，但是不带函数定义中的括号。因此，如果要为一个名为myButton 的按键的点击事件（click）进行绑定，使之激活一个定义为myFunc() 的函数，则其赋值语句如下所示：

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

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

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

elemObject.attachEvent("eventName", functionReference);

eventName 参数的值是表示事件名称的字符串，比如 onmousedown。                    functionReference 参数是一个不带括号的函数引用，和早些时候描述的事件属性方法中一样。因此对于上面例子的按键对象，可以通过如下的脚本语句把函数绑定到按键的 click 事件：

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

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

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

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

addEventListener() 方法的语法如下所示：

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

用 W3C DOM 规范中的行话来说，addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。

这个方法的第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如click，mousedown，和keypress。

addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。

第三个参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。事件的捕捉和派发---综合起来称为事件的传播--最后由另一篇文章来描述。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。

相关问答

Q1: 如何用javascript实现双向数据绑定

1、手动绑定

比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。

2、脏检查机制

以典型的mvvm框架angularjs为代表，angular通过检查脏数据来进行UI层的操作更新。关于angular的脏检测，有几点需要了解些： - 脏检测机制并不是使用定时检测。 - 脏检测的时机是在数据发生变化时进行。 - angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。 - 在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。 （关于angular的具体设计可以看其他文档，这里只讨论数据绑定），那我们看下脏检测该如何去做：主要是通过设置的数据来需找与该数据相关的所有元素，然后再比较数据变化，如果变化则进行指令操作。

3、前端数据劫持(Hijacking)

第三种方法则是avalon等框架使用的数据劫持方式。基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。

Q2: Javascript中什么可以绑定事件

使用addEventListener绑定事件，同时使用removeEventListener取消绑定。注意，removeEventListener只能删除有实体的函数的，不能够删除类似的：

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

例子：

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

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

Q3: js事件绑定和普通事件有什么区别

事件绑定相当于在一个元素上进行监听，监听事件是否触发。

普通事件就是直接触发事件。

两者的区别就在于是否可重复使用。

事件绑定可以在一个元素上监听同一事件多次，而普通事件多次写会被覆盖。如：

var ys1 = ‘某个元素监听（绑定）’,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.

Q4: Javascript事件绑定的几种方式

以button的Click事件为例：

button id="btn"click me/button

function clickBtn() {

alert('click!');

}

1、直接在元素上绑定回调函数 button id="btn" onclick="clickBtn()"click me/button

2、JS获取DOM元素对象后，对onclick属性赋值，绑定事件： document.getElementById('btn').onclick=clickBtn;

3、JS获取DOM对象后，调用对象的addEventListener函数绑定事件：document.getElementById('btn').addEventListener('click',clickBtn);

现阶段主流浏览器兼容的绑定事件方式就这3种

Q5: 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：用第三方js框架（如jquery）来绑定事件，例如：

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

})