匿名函数和简单事件的案例

匿名函数

匿名函数

1.匿名函数和自定义函数最大的区别是是否有函数名。
2.因为没有函数名称，所以只能被调用一次。
3.通常用于只希望事件被调用一次时使用。
如下 是基本的 加载（onload）事件
on+事件类型：表示指向事件的处理程序

window.onload=function(){
				alert('页面加载事件触发了');  //代码在触发时  解析并执行该事件类型
			}

将上面的匿名函数通过自定义函数转换为自定义函数

window.onload=zdy;   //事件触发时通过调用下面 函数名 函数名 函数名的 并执行
//注释：在调用自定义函数时   通过调自定义的函数名来进行事件绑定   被调用函数内有处理程序体  所以不能加括号
function zdy(){     // //被事件调用为自定义函数时 ，该函数名相当于变量名，
                alert('新的加载事件触发执行了')
            }		

所以 通过事件绑定函数时，可以自己调用被调函数 简称自调
以下也是自调的一种方法

  (function (){    //  该方法是通过给自己整体加括号（）把自身整体当作函数名来调用
             	alert('立即执行')
             })();

点击事件小案例
问题：点击不同按钮给不同的div切换不同的的样式

分析：
1 创建页面结构 （按钮和div）
2 获取页面的元素
3 给获取的按钮分别添加点击事件
4 给不同事件添加不同的处理程序（不同的样式）
注：该事件是在body里面写，head里写需要通过window.onload事件先加载body内的页面元素 具体如上

     <!-- 1 创建页面结构  （按钮和div）--> 
        <input type="button" id="nu1" value="样式一" />
		<input type="button" id="nu2" value="样式二" />
		<div class="div_1" id="div1"></div>
		<div class="div_2" id="div2"></div>
		<div class="div_3" id="div3"></div>
		<script type="text/javascript">
	// 2 获取页面的元素
			var but_1=document.getElementById('nu1');
			var but_2=document.getElementById('nu2');
			var alldiv=document.getElementsByTagName('div');
	// 3 给获取的按钮分别添加点击事件	
        	but_1.onclick=function(){
				for (var i=0;i<alldiv.length;i++) {      //通过for循环获得每个div
					alldiv[i].style.width=200+'px';
					alldiv[i].style.height=200+'px';
					alldiv[i].style.background='orchid';
					alldiv[i].style.marginBottom=20+'px';  
					alldiv[i].style.opacity=null;   //给空值是不让样式二的显示到样式一
					alldiv[i].style.boxShadow=null;
					alldiv[i].style.borderRadius=null;
				}
			}
	    	but_2.onclick=function(){
				for (var i=0;i<alldiv.length;i++) {
					alldiv[i].style.width=200+'px';
					alldiv[i].style.height=200+'px';
					alldiv[i].style.background='orange';
					alldiv[i].style.opacity='0.3';  //透明度
					alldiv[i].style.marginBottom=20+'px';
					alldiv[i].style.borderRadius='50%';//圆角边框
					alldiv[i].style.boxShadow='0 0 30px green';//阴影
				}
			}		
		</script>