1、$(function(){}); 和 window.οnlοad=function(){} 的区别

他们分别是在什么时候触发？

1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。

2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序？

1、jQuery 页面加载完成之后先执行

2、原生 js 的页面加载完成之后

他们执行的次数？

1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。

2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

jQuery 中其他的事件处理方法：

click() 它可以绑定单击事件，以及触发单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 可以给元素一次性绑定一个或多个事件。

one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。

unbind() 跟 bind 方法相反的操作，解除事件的绑定

live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

$(function(){
   	//*1.通常绑定事件的方式	// $("h5").click(function () {//传function是绑定事件	// 	alert("h5单击事件 == click方法绑定")	// });	// $("button").click(function () {
   	// 	$("h5").click();//不传function是触发事件。	// });	//给元素绑定事件  	//jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })	//绑定事件可以链式操作	$(".head").click(function(){
   		$(".content").toggle();	}).mouseover(function(){
   		$(".content").toggle();	});	//2.jQuery提供的绑定方式：bind()函数	// $("h5").bind("click mouseover mouseout",function () {
   	// 	console.log("这是bind绑定的事件");	// });	//*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来	//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法	//bind(事件字符串,回调函数),后来添加的元素不会绑定事件	//使用bind()绑定多个事件   type可以接受多个事件类型，使用空格分割多个事件	/* $(".head").bind("click mouseover",function(){
   		$(".content").toggle();	}); */	// unbind解绑，要是括号里面什么都不写表示移除所事件	$("h5").unbind("click mouseover");	//3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来	//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法/* 	$(".head").one("click mouseover",function(){		$(".content").toggle();	}); */	//4.live方法会为现在及以后添加的元素都绑定上相应的事件/**	$(".head").live("click",function(){		$(".content").toggle();	});		$("#panel").before("什么是jQuery?
");*/});

2、事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递

//冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发//解决冒泡问题：return false;//给span绑定一个单击响应函数$("span").click(function(){
   	alert("我是span的单击响应函数");	return false;});//给id为content的div绑定一个单击响应函数$("#content").click(function(){
   	alert("我是div的单击响应函数");	return false;});//给body绑定一个单击响应函数$("body").click(function(){
   	//alert("我是body的单击响应函数");});
   
    	外层div元素	
    内层span元素	外层div元素

3、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代码获取 事件对象$(function () {
   	// $("#areaDiv").click(function (event) {
   	// 	console.log(event);	// });	//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。	$("#areaDiv").bind("mouseover mouseout",function (event) {
   		if (event.type == "mouseover") {
   			console.log("鼠标移入");		} else if (event.type == "mouseout") {
   			console.log("鼠标移出");		}	});});

转载地址：http://mouki.baihongyu.com/

你可能感兴趣的文章