学而时习之,小白现在天天写页面,基础知识还是要恶补的。
进入正题,什么是事件(此处单独对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(); });
未完继续。。。