js与jquery事件绑定联系与区别

关于加载DOM：

js中常使用window.onload方法，

jquery常使用$(document).ready() (可以简写为$(function(){})  或者 $().ready(function(){})  )

或者$(window).load(function(){})

js的window.onload这个方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，

即js此时才可以访问网页中的任何元素。

而jqeury的$(document).ready()只要DOM完全就绪时就可以操作了

但是，例如，有时函数需要处理图片的宽高，可使用上个方法函数在执行时，可能图片的相关信息都没有加载完成

因此jqeury的$(window).load()就会在所有的内容（包括窗口，框架，对象和图片等）加载完成后触发，

如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发

关于事件绑定：

js中注册事件处理程序有两种基本方法：

1：给事件目标对象或文档元素设置属性

2：将事件处理程序传递给对象或元素的一个方法

对于1：

（1 ）设置javascript对象属性为事件处理程序

例如：  window.οnlοad=function(){}

div.οnclick=function(){}

命名规则：事件处理程序属性的名字由"on"加上事件名组成，并且属性名区分大小写，所有都是小写，即使事件类型是由多个词组成

onclick,onchange,onload.onmouseover,onreadystatechange等

缺点：每个事件目标对于某种事件类型最多只有一个事件处理程序

例如：window.οnlοad=function(){ alert("one";}

window.οnlοad=function(){alrt("two");}

最后只会有two的弹框

当然可以通过

window.οnlοad=function(){

function(){....}

function(){...}

.....

}来实现，但是，如果存在多个js文件，并且，每个文件都想调用window.onload时就不行了

（2 ）设置HTML标签属性为事件处理程序

例如： <button οnclick="alert("hello");">click</button>

使用规则：属性值是js代码字符串，这段代码应该是事件处理程序的主体，而非完整的函数声明，也就是说，html事件处理程序代码

不应该使用大括号包围且使用function关键字作为前缀。如果html处理程序属性包含多条js语句，则必须要使用分号分隔这些语句或断开属性值使其跨多行

对于2：

(1 )attachEvent() ,detachEvent()

attachEvent(事件类型,处理函数程序）

例如：btn.attachEvent("onclick",handler)

与1的区别在于：允许相同的事件处理函数注册多次

（2 ）addEventListener() , removeEventListener()

addEventListener(事件类型,事件处理函数,布尔值)

例如：btn.addEventListener("click",handler,false)

关于布尔值：通常情况下都是false,若传的是true，那么函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用

与1的区别在于：允许相同的事件处理函数注册多次

注意：（1 ）与（2）的区别

attchEvent()第一个参数使用带"on"前缀的事件处理程序属性名，而addEventListener则不带"on"

参数个数不同

一般而言，会这样写：

var btn=document.getElementById("btn");

var handler=function(){ alert("hello");};

if(btn.addEventListener)

btn.addEventListener("click",handler);

else if(btn.attachEvent)

btn.attachEvent("onclick",handler);

jquery中绑定事件方法：

bind()  、 on()  (两者其实类似）

bind(type,[data],fn)
　　type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。
　　比如"click"或"submit"，还可以是自定义事件名。
　　data:作为event.data属性值传递给事件对象的额外数据对象
　　fn:绑定到每个匹配元素的事件上面的处理函数
on()在选择元素上绑定一个或多个事件的事件处理函数。
　　on(events,[selector],[data],fn)
　　events:一个或多个用空格分隔的事件类型和可选的命名空间，             如"click"或"keydown.myPlugin" 。
　　selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
　　data:当一个事件被触发时要传递event.data给事件处理函数。
　　fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

特点：
命名规则上：都少了"on'
可以使用连缀 例如 $('#btn').bind("mouseover",handler1).bind("mouseout",handler2);
可以简单绑定事件 例如 $('#btn').mouseover(headler1).mouseout(handler2);