js和jquery绑定事件的方法

== firefox，chrome，ie(8以上)浏览器js注册事件是用addEventListener，而ie(8以下)是用attachEvent。jquery 对此做了兼容性封装，使用bind,on,delegate进行事件绑定，删除使用unbind,off,undelegate进行事件解绑。 ==

原生JS绑定事件

1.行内绑定
基本语法：
<标签 属性列表 事件=”事件的处理程序” />

<input type=’button’ onclick=’display()’ />

2.动态绑定
基本语法：
dom对象.事件 = 事件的处理程序（通常是一个匿名函数）

document.getElementById("btn").onclick=function(){}

在行内绑定中其this并不是指向当前正在操作的dom对象,而是指向全局window对象！
动态绑定中其this指向了当前正在操作的DOM对象。

3.addEventListener是JS原生的绑定事件函数

element=document.getElementById("id")
element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
function	必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶执行。false- false- 默认。事件句柄在冒泡阶段执行

您可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件。
使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

// 添加 <div> 事件句柄 
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 事件句柄 
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
以下实例演示了跨浏览器的解决方法：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

jQuery事件处理

在Javascript中，操作的大多数都是dom对象，获取方式都是通过document.的形式，这样代码过于冗余，所以为了解决这个问题，jQuery封装一个函数，专门用于获取dom对象。

<script>
	function $(id){
		return document.getElememtById(id);
	}
	window.onload=function(){
		$('btn').onclick = function(){
			alert('hello');
		}
	}
</script>

*以下"selector"可以是’#id’,也可以是’.class’
1.click(),dblclick(),focus(),change(),hover(),submit(),mousedown(),mouseover(),keydown(),keypress()等。

$("selector").click(function(event){ 
	alert($(this))
})

• event表示当前事件对象，该对象已经过jQuery封装标准化处理。
• 参数内的this表示触发事件的当前DOM元素。
• 如果函数的返回值为false，可以阻止事件冒泡和元素的默认事件行为。

2.bind(),delegate(),on()等方法是通过传入指定事件名称的字符串来区分事件类型的

$("selector").bind('click',function(event){ 
	alert($(this))
})
$("selector").on('dblclick',function(event){ 
	alert($(this))
})
$(document).delegate('selector','click',function(event){ 
	alert($(this))
})

3.手动触发指定的事件

$("selector").trigger('click')
$("selector").bind('click',triggerHandler)
function handler( event, arg1, arg2 ){
	var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件，额外的函数参数为:' + arg1 + ', ' + arg2;
}

4.解除元素上绑定的事件

$("selector").unbind('click')
$("selector").off('dblclick')
$(document).delegate('selector','click')

jquery 1.7之后，统一用on来注册事件

.click() 方法是 .on( “click”, handler )的一个简写, 可以用 .off( “click” ).来解绑。

$("p").click( function( event ) {
});
$("p").on( "click", function( event ) {
});

bind和on

//jQuery 1.4.3+
$("p").bind( "click", function( event ) {
});
//jQuery 1.7+
$("p").on( "click", function( event ) {
});

delegate和on

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );