关于JavaScript的事件绑定

js事件绑定的几种方式

JavaScript中有三种常用的绑定事件方法：

1. 在DOM元素中直接绑定；

2. 在JavaScript代码中绑定；

3. 绑定事件佳妮婷函数。

一、在DOM元素中直接绑定

这里的DOM元素指HTML标签。JavaScript支持在标签中直接绑定事件，语法：

onXXX = "JavaScript Code"

其中：

1)、onXXX为事件名称。如：鼠标单击事件onclick，鼠标双击事件ondouble，鼠标移入事件onmouseover，鼠标移出事件onmouseout等。

2)、JavaScript Code为处理事件的JavaScript代码，一般是函数。

① 原生函数

<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />

② 自定义函数

<input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>

二、在<script>元素中直接绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

在JavaScript代码中绑定事件的语法为：

elementObject.onXXX=function(){

 // 事件处理代码

}

其中：

1)、elementObject 为DOM对象，即DOM元素。

2)、onXXX 为事件名称。

例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：

<input  id="demo"  type="button"  value="点击我，显示 type 属性" />  
<script type="text/javascript">  
document.getElementById("demo").onclick=function(){  
    alert(this.getAttribute("type"));  
// this 指当前发生事件的HTML元素，这里是<div>标签  
}  
</script>

三、绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

1、addEventListener()函数语法：

elementObject.addEventListener(eventName,handle,useCapture);

1)、elementObject：DOM对象（即DOM元素）。

2)、eventName：事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。

3)、handle：事件句柄函数，即用来处理事件的函数。

4)、useCapture：Boolean类型，是否使用捕获，一般用false 。

2、attachEvent()函数语法：

elementObject.attachEvent(eventName,handle);

1)、elementObject：DOM对象（即DOM元素）。

2)、eventName：事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。

3)、handle：事件句柄函数，即用来处理事件的函数。

注意：事件句柄函数是指“ 函数名 ”，不能带小括号。

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：

function addEvent(obj,type,handle){  
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本  
        obj.addEventListener(type,handle,false);  
    }catch(e){  
        try{  // IE8.0及其以下版本  
            obj.attachEvent('on' + type,handle);  
        }catch(e){  // 早期浏览器  
            obj['on' + type] = handle;  
        }  
    }  
}  

这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。

例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：

addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
    alert("又是一个警告框");
}

以上三种js绑定事件方式示例：

1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
　　　　<script>
　　　　　function clickone(){ alert("hello"); }
　　　　</script>
2. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }
 //脚本里面绑定
　　</script>
3. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").addeventlistener("click",clickone,false); 
//通过侦听事件处理相应的函数
　　　　　function clickone(){ alert("hello"); }
　　</script>

用“addeventlistener”可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个“onclick”事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个请求。

1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 
　　<script>
　　　　　function clickone(){ alert("hello"); } //执行这个
　　　　　function clicktwo(){ alert("world!"); }
　　</script>
2. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }
　　　　　document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个
　　</script>
3. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").addeventlistener("click",clickone,false);
　　　　　function clickone(){ alert("hello"); } //先执行
　　　　　document.getElementById("btn").addeventlistener("click",clicktwo,false);
　　　　　function clicktwo(){ alert("world"); } //后执行
　　</script>

jQuery事件绑定

一、.bind()、.live()、.delegate()之间的区别

1) .bind()

$('a').bind('click', function() {alert('That tickles') });

这是最简单的绑定方法。jQuery扫描文档找出所有的$('a')元素，并把alert函数绑定到每个元素的click事件上。

2) .live()

$('a').live('click',function(){alert('That tickles!)});

jQuery把alert函数绑定到$(document)元素上，并使用‘click’和‘a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与‘这一CSS选择器是否匹配，如果都是的话，则执行函数。

live方法还可以被绑定到具体的元素（或context）而不是document上，像这样：

$('a',$('#container')[0]).live(...);

3) .delegate()

$('#container').delegate('a','click',function(){alert(”That tickles!")});

jQuery扫描文档查找$('#container')，并使用click事件和‘a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

可以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。

为什么.delegate()要比.live()好用？

基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：

$('a').live('click', function() { blah() }); 
// 或者 
$(document).delegate('a', 'click', function() { blah() });

停止传播

最后一个我想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：

$('a').bind('click', function(e) { 
　　e.preventDefault(); 
　　// 或者 
　　e.stopPropagation(); 
　});

二、比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；

2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；

3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些。

4.bind()支持Jquery所有版本；live()支持jquery1.9-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

三、推荐使用.on()方法绑定，原因有两点：

1.on()方法可以绑定动态添加到页面元素的事件

比如动态添加到页面的DOM元素，用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来，也不需要重复绑定。有的同学可能习惯于用.bind()、.live()或.delegate()，查看源码就会发现，它们实际上调用的都是.on()方法，并且.live()方法在jQuery1.9版本已经被移除。

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
}

2.on()方法绑定事件可以提升效率

测试：

假设页面添加了5000个li，用chrome开发者工具Profiles测试页面载入时间。

普通

$('li').click(function(){
    console.log(this)
});

普通绑定相当于在5000li上面分别注册click事件，内存占用约4.2M，绑定时间约为72ms。

.on()绑定

$(document).on('click', 'li', function(){
    console.log(this)
})

.on()绑定利用事件代理，只在document上注册了一个click事件，内存占用约2.2M，绑定时间约为1ms。

 

tip:如果你需要移除on()所绑定的方法，可以使用off()方法处理。