== 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 );