[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的事件是

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmxlc3MyMDE1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

同一时候该事件也触发了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的。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmxlc3MyMDE1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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