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) 为每个匹配元素的特定事件绑定事件处理函数。

参数

$("p").bind("click", function(){
  alert( $(this).text() );
});

$(‘#foo‘).bind(‘mouseenter mouseleave‘, function() {
  $(this).toggleClass(‘entered‘);
});

$("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);

$("form").bind("submit", function(event){
  event.preventDefault();
});

$("form").bind("submit", function(event){
  event.stopPropagation();
});

JS和jQuery中的事件总结（一）

标签：

原文地址：http://www.cnblogs.com/ericli-ericli/p/5467639.html