jQuery 事件操作

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值