[jQuery] 选择器和事件

jQuery选择器

属性选择器

p1

<span style="font-size:24px;"></span><pre name="code" class="html" style="font-size: 24px;">$(document).ready(function(){
	$("button").click(function(){
		$("p").text("你好aaaa123");
	});
});

类选择器

p1

$(document).ready(function(){
	$("button").click(function(){
		$(".pclass").text("你好aaaa123");
	});
});

id选择器

p1

$(document).ready(function(){
	$("button").click(function(){
		$("#pclass").text("你好aaaa123");
	});
});

jQuery事件

经常使用事件方法

$(document).ready(function(){
	//$("button").click(function(){   <span style="white-space:pre">	</span>点击隐藏
	//$("button").dblclick(function(){<span style="white-space:pre">	</span>双击隐藏
	//$("button").mouseenter(function(){<span style="white-space:pre">	</span>鼠标进入隐藏
	$("button").mouseleave(function(){<span style="white-space:pre">	</span>鼠标移开隐藏
		$(this).hide();
	});
});

绑定事件

<span style="font-size:24px;">$(document).ready(function(){

$("#clickMeBtn").bind("click",clickHandler1);
$("#clickMeBtn").bind("click",clickHandler2);
});

function clickHandler1(e){
	console.log("clickHandler1");
}
function clickHandler2(e){
	console.log("clickHandler2");
}</span>

运行打印两行。没有问题。

解除绑定事件

(官方推荐使用on和offkeyword。事实上bind和unbind底层也是调用的on和off方法。一样，可是on和offkeyword在1.7版本号之后才有)

$(document).ready(function(){
$("#clickMeBtn").on("click",clickHandler1);
$("#clickMeBtn").on("click",clickHandler2);
$("#clickMeBtn").off("click",clickHandler2);
});

function clickHandler1(e){
	console.log("clickHandler1");
}
function clickHandler2(e){
	console.log("clickHandler2");
}

仅仅打印出来事件1了。

事件的目标

js代码

$(document).ready(function(){
	$("body").bind("click",bodyHandler);
	$("div").bind("click",divHandler);
});

function bodyHandler(event){
	console.log(event);
}
function divHandler(event){
	console.log(event);
}

HTML代码

 <body>
	<div style="width:300px;height:300px;background-color:aqua">
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
	</ul>
	</div>
 </body>

点击div后，div的事件是

同一时候该事件也触发了body的点击

并且点击一次出来两个点击事件：

发生了事件冒泡。

事件的目标并不同。currentTarget指向body是由于给body设置的监听事件。而target是div是由于，是div触发的点击事件。这是事件冒泡。

对于当前div和父级body。假设仅仅想让div响应点击事件，能够阻止事件冒泡

事件的冒泡

在网上找到一段解释时间冒泡的：

在一个对象上触发某类事件（比方单击onclick事件），假设此对象定义了此事件的处理程序。那么此事件就会调用这个处理程序，假设未定义此事件处理程序或者事件返回true。那么这个事件会向这个对象的父级对象传播。从里到外，直至它被处理（父级对象全部同类事件都将被激活），或者它到达了对象层次的最顶层。即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，假设地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉。比方从市级到省级，直至到中央法院。终于使你的案件得以处理。

jQuery防止事件冒泡的方法：

1、event.stopPropagation();阻止父级的冒泡事假

2、event.stopImmediatePropagation();阻止全部冒泡事件

<span style="font-size:24px;">function divHandler(event){
	console.log(event);
	event.stopPropagation();
}</span>

这样。控制台仅仅打印了div的响应事件，没有body的。

event.stopImmediatePropagation()也非常好理解。阻止全部的事件冒泡。

自己定义事件

HTML文件

 <head>
  <meta charset="UTF-8">
	<script src = "jquery-2.1.4.min.js"></script>
	<script src = "CustomEvent.js"></script>
  <title>Document</title>
 </head>
 <body>
  <button id="ClickMeBtn">ClickMe</button>
 </body>

JS文件

<span style="font-size:24px;">var ClickMeBtn;
$(document).ready(function(){
	ClickMeBtn = $("#ClickMeBtn");
	ClickMeBtn.click(function(){
		var e = jQuery.Event("MyEvent");
		ClickMeBtn.trigger(e);
	});

	$(ClickMeBtn).bind("MyEvent",function(event){
		console.log(event);
	})
});</span>

控制台：新类型的事件MyEvent

posted on 2017-05-26 13:55 yutingliuyl 阅读(407) 评论(0) 编辑收藏举报