前端：浅析JavaScript和jQuery区别 -- 事件

JavaScript：

1、事件汇总

• 窗口事件

事件	说明
onload	页面或图片加载完成时
onunload	用户离开页面时
onscroll	元素滚动时

• 表单元素事件

事件	说明
onchange	框内容改变时
onsubmit	点击提交按钮时
onreset	重新点击鼠标按键时
onselect	文本被选择时
onblur	元素失去焦点时
onfocus	当元素获取焦点时

• 键盘事件

事件	说明
onkeydown	按下键盘按键时
onkeypress	按下或按住键盘按键时
onkeyup	放开键盘按键时

• 鼠标事件

事件	说明
onclick	鼠标点击一个对象时
ondblclick	鼠标双击一个对象时
onmousedown	鼠标被按下时
onmousemove	鼠标被移动时
onmouseout	鼠标离开元素时
onmouseover	鼠标经过元素时
onmouseup	释放鼠标按键时

• 其他

事件	说明
onresize	当窗口或框架被重新定义尺寸时
onabort	图片下载被打断时
onerror	当加载文档或图片时发生错误时

2、事件绑定

在标签中绑定：   event="function(param1,param2,...)"  

<input type="file" name="hruser_files" onchange="upload_file()"/>

• 在js代码中绑定：   element.event=function

document.getElementById('i2').onclick=f2 

• 在js代码中绑定：   element.addEventListener(event, function)

            注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

document.getElementById("i3").addEventListener("click", f2)

注意：上面的后两种绑定事件发生在“标签出现之后”，所以应该把script标签写在body标签里面的最后面。

 

 

 

jQuery：

1、事件汇总

和原生js去掉前缀on基本一样。jQuery不支持form元素的reset事件。

• 窗口事件

事件	说明
load	页面或图片加载完成时
unload	用户离开页面时
scroll	滚动文档的可视部分时

• 表单元素事件

事件	说明
change	框内容改变时
submit	点击提交按钮时
select	文本被选择时
blur	元素失去焦点时
focus	当元素获取焦点时

• 键盘事件

事件	说明
keydown	按下键盘按键时
keypress	按下或按住键盘按键时
keyup	放开键盘按键时

• 鼠标事件

事件	说明
click	鼠标点击一个对象时
dblclick	鼠标双击一个对象时
mousedown	鼠标被按下时
onmousemove	鼠标被移动时
mouseout	鼠标离开元素时
mouseover	鼠标经过元素时
mouseup	释放鼠标按键时

• 其他

事件	说明
resize	当窗口或框架被重新定义尺寸时
abort	图片下载被打断时
error	当加载文档或图片时发生错误时

 

2、事件绑定(bind、live、delegate、on)

四中使用方式基本一致，bind只针对已经存在的元素进行事件绑定，后三者支持未来新添加元素绑定。

• bind（)     

$(selector).bind("event",[data],function)   

$(selector).bind("event1 event2 event3...",[data],function) 

$(selector).bind({event1：function1，event2：function2，event3：function3，...}) 

$("button").bind("click",function(){
  $("p").slideToggle();
});

$("button").bind("click",functionName);

$("button").bind("click mouseout",functionName);

$("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });

 

• 着重介绍on（）

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

$(selector).on(event,childSelector,data,function)

event	必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（事件委托，针对未来的元素。且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

 $(document).on("click",function(){
    console.log('this is paragraph');
 });

$(document).on("click mouseover",function(){
    console.log('this is paragraph');
 });

$(document).on(
    "click":function(){console.log('this is paragraph');
    "mouseover":function(){console.log('this is paragraph');
    "mouseout":function(){console.log('this is paragraph');
 });