$( function(){} ); 和 window.onload = function(){} 的区别:
触发时机:
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
2、原生 js 的页面加载完成之后,除了要等浏览器内核解析完标签创建好 DOM 对象,还要等标签显示时需要的内容加载完成。
触发顺序:
1、jQuery 页面加载完成之后先执行。
2、原生 js 的页面加载完成之后。
执行的次数:
1、原生 js 的页面加载完成之后,只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的 function 函数,依次顺序全部执行。
jQuery 中其他的事件处理方法:
1.click() 它可以绑定单击事件,以及触发单击事件。
click()传function是绑定事件,不传是触发事件。
2.mouseover() 鼠标移入事件。
3.mouseout() 鼠标移出事件。
4.bind() 可以给元素一次性绑定一个或多个事件。
5.one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
6.unbind() 跟 bind 方法相反的操作,解除事件的绑定。
7.live() 用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效。
此时后面添加的h5标签也有单击事件。
$("h5").live("click",function (){
alert("live绑定,h5单击事件");
});
$("<h5>什么是jQuery?</h5>").appendTo($("#panel"));
事件的冒泡 :
事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。
span是div的子元素。此时点击span,span事件和div事件都会响应。
$("#content").click(function (){
alert("div");
});
$("span").click(function (){
alert("span");
});
那么如何阻止事件冒泡:
在子元素事件函数体内,return false; 可以阻止事件的冒泡传递。
$("#content").click(function (){
alert("div");
});
$("span").click(function (){
alert("span");
return false;
});
javaScript 事件对象:
是封装有触发的事件信息的一个 javascript 对象。 我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取 javascript 事件对象:
在给元素绑定事件的时候,在事件的 function( event ) 参数列表中添加一个参数,这个参数名,我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。
1.原生 javascript 获取 事件对象:
window.onload = function (){
document.getElementById("areaDiv").onclick = function (event){
console.log(event);
}
}
2.jQuery 代码获取 事件对象:
$("#areaDiv").click(function (event){
console.log(event);
});
3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件:
$(function (){
$("#showMsg").bind("mouseover mouseout",function (event){
if(event.type == "mouseover"){
console.log("鼠标移入");
}else{
console.log("鼠标移出");
}
});
});
图片跟随:
$(function(){
//给小的图片绑定事件
$("#small").bind("mouseover mouseout mousemove",function (event){
if (event.type == "mouseover"){
$("#showBig").show();
}else if (event.type == "mouseout"){
$("#showBig").hide();
}else if (event.type == "mousemove"){
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
}
});
});