使用JavaScript实现事件的绑定并实现开合功能

JavaScript绑定点击事件一般使用onclick方法

方式一

首先随便写一个标签在标签中添加一个onclick属性让其等于JavaScript中的函数并给一个实参

JavaScript实现步骤：

1. 定义一个全局变量i并让其等于零
2. 定义一个函数体并给一个形参
3. 在函数体中使用if(i%2==0){偶数时执行内容}else{奇数时执行内容}进行开合操作
4. 当偶数时通过形参.style.css属性="属性值"进行更改其CSS样式
5. 当奇数时通过形参.style.css属性="属性值"进行更改其CSS样式
6. 在if判断语句外写一个变量名+=1使其一直循环，否则只能开启不能关闭

代码演示：  

<!--绑定方式一：-->
<div id="div1" onclick="changeColor(this);">点我</div>
<script>
	var i = 0;
	function changeColor(ths) {
        //判断奇偶数
        if (i%2==0){
            //偶数时将背景颜色改为绿色
            ths.style.backgroundColor="green";
        }else{
            //奇数时将背景颜色改为红色
            ths.style.backgroundColor="red";
        }
        //写一个变量名+=1使其一直循环，否则只能开启不能关闭
        i+=1;
    }
</script>

方式二

直接在html中随意写一个标签，并给一个id属性

JavaScript实现步骤：

1. 写一个script
2. 在script标签中使用dom获取id的方式查找到html页面中的指定id的标签，并将这个dom查找存放在一个变量中
3. 随意声明一个全局变量并让其等于零
4. 直接为dom查找到的标签的变量绑定点击事件--变量名.οnclick= function(){执行内容}
5. 在function函数体内使用if(全局变量%2==0){偶数时执行的内容}else{奇数时执行的内容}来进行判断奇偶数
6. 在if判断外写一个变量名+=1使其一直循环，否则只能开启不能关闭

代码演示：  

<!--绑定方式二：-->
<div id="div2">点我</div>
<script>
	//dom通过获取id的方式查找上面的标签，并将这个dom查找操作存放在一个变量中
	var dele = document.getElementById("div2")
	var a = 0;
    //为查找到的标签进行绑定点击事件
	dele.onclick = function (){
        //通过if判断奇偶数
        if (a%2==0){
            //偶数时执行的内容
            this.textContent="Hello";
        }else{
            //奇数时执行的内容
            this.textContent="点我";
        }
        //写一个变量名+=1使其一直循环，否则只能开启不能关闭
        a+=1;
	}
</script>

方式三

这个依赖于jquery，所以需要进行下载jquery-3.4.1版本的jquery文件

百度网盘分享链接---提取码：1t3e

百度网盘jquery文件分享链接https://pan.baidu.com/s/1-K2l-jBgk0Sa7ZtPuxhnLA?pwd=1t3e 提取码：1t3e下载完成后将其放入HTML工程文件夹中并在HTML文件中导入jquery文件

<script src="jquery-3.4.1.min.js"></script>

导入完成后随意写一个标签并给一个id属性，然后开始写JavaScript

JavaScript实现步骤：

1. 使用dom获取id的方式获取到你所创建的指定id的标签，并将dom操作存放在 一个变量中，为后续更改内容时使用
2. 声明一个全局变量并让其等于零
3. 然后通过$('id值').click()的方式来进行绑定点击事件，然后直接在click()里面声明一个匿名函数，在这个函数体中写需要执行的内容
4. 在函数体中使用if来进行判断奇偶数
5. if(变量名%2==0){偶数时执行内容}else{奇数时执行内容}
6. 然后在if判断外写一个变量名+=1使其一直循环，否则只能开启不能关闭

代码演示： 

<script src="jquery-3.4.1.min.js"></script>
<!--绑定方式三：-->
<div id="div3">点我</div>
<script>
	//使用dom获取id的方式获取到你所创建的指定id的标签，并将dom操作存放在 一个变量中，为后续更改内容时使用
	var three = document.getElementById("div3")
	//声明一个全局变量
	var d = 0;
    //通过$('id值').click()的方式来进行绑定点击事件，然后直接在click()里面声明一个匿名函数，在这个函数体中写需要执行的内容
	$('#div3').click(function () {
        //使用if判断奇偶数
        if (d%2==0){
            //偶数时执行内容
            three.textContent="开启";
        }else{
            //奇数时执行内容
            three.textContent="关闭";
        }
        //写一个变量名+=1使其一直循环，否则只能开启不能关闭
        d+=1;
    })
</script>

 效果对比：