正文
JS和jQuery中的事件总结（一）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
学而时习之，小白现在天天写页面，基础知识还是要恶补的。
进入正题，什么是事件（此处单独对jQuery、JS）？就是JS和Html之间的交互时呢，用户和浏览器操作页面时的动作（其实是为引发的效果的执行操作），此处注明，这是楼主自己的理解哈。
1.页面加载事件
JS提供了一个
window.onload
它的执行时机呢，是页面完全加载完毕后，包括页面上的文件、图片等完全加载到浏览器后才开始执行；
另外，此方法仅能保存对一个函数的引用，会自动的用后面的覆盖前面的。看个例子：
function A(){ alert('我是A');}function B(){ alert('我是B');}window.onload=A;window.onload=B;
浏览器的弹框仅仅一个“我是B”；
解决办法也是有的，毕竟JS还是挺牛的：
window.onload=function(){ A(); B();}
这样两个弹框就按顺序统统出来了。
等同于jQuery中的
$(window).load()
使用的方法呢：
window.onload=function(){ //代码}$(window).load(function(){ //代码});
因为他的执行时机问题，若是网页图片数量多，或者网速拖拖，乖乖隆地咚，代码预计会有奇特的现象（这个要看写的什么了）。为此，jQuery有种更好的方法：
$(document).ready()
他呢，执行时机就是在 DOM载入就绪时进行执行，注意啦，是就绪时，此时图片可能还没完全下载到浏览器呢。
更方便的是，jQuery还提供了它的简写方式：
$().ready(function(){});和$(function(){});
并且它最大的特点在于，使用它时，行为函数不会出现JS的覆盖问题，它是在现有行为的基础上，进行行为函数追加的：
function A(){ alert('我是A');}function B(){ alert('我是B');}$(function(){ A();});$(function() { B();});
这可是两个框都按照顺序弹出的，和JS的第二种写在一起的方法是一样的效果。
2.绑定事件
在文档加载完成后，打算为某些元素绑定事件，完成某些特定的操作，有个很好的办法 bind().
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。参数
type,[data],function(eventObject) 这个是v1.0
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false 这个是V1.4.3
type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
false: 将第三个参数设置为false会使默认的动作失效。
events 这个是V1.4
一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例
当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){ alert( $(this).text() );});
同时绑定多个事件类型:
$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered');});
对于其中的toggleClass，楼主要多说一句：toggle()具有切换状态的功能。
同时绑定多个事件类型/处理程序:
$("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");}});
你可以在事件处理之前传递一些附加的数据:
function handler(event) { alert(event.data.foo);}$("p").bind("click", {foo: "bar"}, handler);
通过返回false来取消默认的行为并阻止事件起泡:
$("form").bind("submit", function() { returnfalse; });
其实，这种方式呢，等同于在对事件同事调用了 stopPrapagation()和 preventDefault();
通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){ event.preventDefault();});
楼主要提醒一句：事件处理函数执行完毕后，事件对象就被销毁了。
通过使用 stopPropagation() 方法只阻止当前事件起泡。
$("form").bind("submit", function(event){ event.stopPropagation();});
未完继续。。。
type,[data],function(eventObject) 这个是v1.0
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false 这个是V1.4.3
type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
false: 将第三个参数设置为false会使默认的动作失效。
events 这个是V1.4
一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例
当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){ alert( $(this).text() );});
同时绑定多个事件类型:
$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered');});
对于其中的toggleClass，楼主要多说一句：toggle()具有切换状态的功能。
同时绑定多个事件类型/处理程序:
$("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");}});
你可以在事件处理之前传递一些附加的数据:
function handler(event) { alert(event.data.foo);}$("p").bind("click", {foo: "bar"}, handler);
通过返回false来取消默认的行为并阻止事件起泡:
$("form").bind("submit", function() { returnfalse; });
其实，这种方式呢，等同于在对事件同事调用了 stopPrapagation()和 preventDefault();
通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){ event.preventDefault();});
楼主要提醒一句：事件处理函数执行完毕后，事件对象就被销毁了。
通过使用 stopPropagation() 方法只阻止当前事件起泡。
$("form").bind("submit", function(event){ event.stopPropagation();});
未完继续。。。
