学而时习之,小白现在天天写页面,基础知识还是要恶补的。
进入正题,什么是事件(此处单独对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.οnlοad=function(){
  A();
  B();    
} 
 
这样两个弹框就按顺序统统出来了。
等同于jQuery中的
 
 
$(window).load()
 
 
使用的方法呢:
 
 
window.οnlοad=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();
}); 
  
未完继续。。。
 
 
 
 
 
                     
            
        













 
                    

 
                 
                    