JS | 通过委派事件的多个Table之间的切换

目录

1、什么是event?

2、e.target是什么？

3、注册事件

---

之前我们用【排他思想】做了一个Tab切换的小案例，那么如果我们的需要不只是只有一个table呢？我们应该怎么做？今天我们就来看一下。

我们先把HTML结构给大家展现出来：

    <div class="tab">
		<div class="nav">
			<a href="javascript:;" class="hover">公司新闻a>
			<a href="javascript:;">公司动态a>
			<a href="javascript:;">行业新闻a>
		div>
 
		<div class="nav_con">
			<div>公司新闻-showdiv>
			<div>公司动态-showdiv>
			<div>行业新闻-showdiv>
		div>
	div>
	<br /><br />
	
	<div class="tab">
		<div class="nav">
			<a href="javascript:;" class="hover">大学a>
			<a href="javascript:;">中学a>
			<a href="javascript:;">小学a>
		div>
 
		<div class="nav_con">
			<div>大学内容div>
			<div>中学内容div>
			<div>小学内容div>
		div>
	div>
	
	<div class="tab">
		<div class="nav">
			<a href="javascript:;" class="hover">大学a>
			<a href="javascript:;">中学a>
			<a href="javascript:;">小学a>
		div>
 
		<div class="nav_con">
			<div>大学内容div>
			<div>中学内容div>
			<div>小学内容div>
		div>
	div>

 今天我们用到的方法是事件委派，那么就会涉及到【event.target】和注册事件的新的方式，所以我们先来介绍一下【e.target】以及【注册事件】：

1、什么是event?

1. event就是一个事件对象，写到我们侦听函数的小括号里面，当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。
3. 事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息等。
4. 这个事件对象我们可以自己命名，比如：event、evt、e等
5. 事件对象也有兼容性问题（ie678），通过window.event兼容性的写法【e=e || window.event】。

2、e.target是什么？

常见事件对象的属性和方法： 

 e.target返回的是触发事件的对象（元素），我们之前学的 this 返回的是绑定事件的对象（元素），如果在没有冒泡事件的情况下，两者的返回对象是一样的，那么它们的区别是啥呢？

区别：e.target点击了那个元素，就返回那个元素，this哪个元素绑定了这个点击事件，那么就返回谁。

3、注册事件

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式（今天要介绍的） 

 

铺垫好了，我们来看一下JS：

 每一行代码有什么用，我都备注好了，应该还算详细。我们来看运行一下是什么样的：

 

先获取所有table的长度，通过循环绑定事件，这样不管我们添加多少个table都不会有影响。今天的内容就这么多了，拜比~