jquery语法知识（事件对象）_jquery e.currenttarget-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59329828/article/details/135745572

事件对象

1、event.currentTarget 事件的监听者

2、event.target 事件的目标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			p{
				width: 100px;
				height: 60px;
				background-color: red;
			}
		</style>
	</head>
	<body>		
	<div>
	<p>click me </p>		
	</div>

	</body>
	<script>
	$(function(){
		$("div").on("click",function(e){
			console.log($(e.currentTarget));
			console.log($(e.target));
		})
	})
	</script>
</html>

效果

    $(function(){
       $("div").on("click",function(e){
           console.log($(e.currentTarget)); //div 事件的监听者
           console.log($(e.target)); //p 事件的目标
           console.log($(this));
       })
   })

3、event.delegateTarget 事件的委托者

绑定了当前正在调用jQuery事件处理器的元素，也就是说表示的是当前事件的委托者

   <script>
   $(function(){
       $("div").on("click","p",function(e){
           console.log($(this).html());
       })
   })
   </script>

用on实现一个事件委托的效果

    <script>
   $(function(){
       $("div").on("click","p",function(e){
           console.log($(this).html());
           console.log($(e.delegateTarget)); //指向当前事件的委托者，从代码中可以看到是div
       })
   })
   </script>

给事件委托者添加样式

   $(function(){
       $("div").on("click","p",function(e){
           console.log($(this).html());
           ($(e.delegateTarget)).css("border","1px solid red");
       })
   })
   </script>

4、event.pageX

X是鼠标相对于文档左边缘的位置

5、event.pageY

Y是鼠标相对于文档上边缘的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			#log{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>		
	<div id ="log">
	<p>click me </p>		
	</div>

	</body>
	<script>
	$(function(){
		$("#log").on("mousemove",function(e){
			console.log("pagex="+e.pageX+"pagey="+e.pageY)
		})
		})
	</script>
</html>

效果

6、event.type 当前事件类型

   <script>
   $(function(){
       $("#log").on("mousemove",function(e){
           console.log("pagex="+e.pageX+"pagey="+e.pageY)
           alert(e.type);
       })
       })
   </script>

7、event.preventDefault() 阻止默认事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>		
	<a href="http://www.baidu.com"></a>
	</body>
	<script>
	$(function(){
		$("a").click(function(e){
			e.preventDefault();
			alert("hahah");
		})
		})
	</script>
</html>

会发现点击后没有跳转到百度页面