js---javascript 函数与事件(创建三种函数的方式、事件绑定、常用事件小例子)

前端入门笔记之js(15)

在ECMAScript中函数有以下几种创建方式

第一种
function 函数名称(参数列表){
函数体;
return 返回值 //可以不返回
}

第二种
var 函数名称=function(参数列表){
函数体;
}

第三种：【了解，不用】
Var 函数名称=new Function(参数列表,函数体);

案例：

函数注意事项：

问题1:如果我们在调用函数时，使用add(1,2,3,4)是否会出现问题哪?
如果是在java中我们这样调用一定会有问题的，但是对于javascript来说，是不会有问题的。
简单的说，也就是函数调用时传递的参数不一定要与函数声明时的参数个数一致。

问题2:如果调用时传递的参数与函数定义时参数个数不一致，那么我们在函数中如果获取多余的参数哪?
在javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。

全局函数介绍

事件介绍
事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.
常见事件:

事件绑定
在javascript中事件经常与函数一起使用，那么我们介绍一下怎样将一个事件与函数绑定到一起，简单说，就是某个事件被触发后，函数如果被调用。
事件的三要素：事件、事件源、响应行为

onclick事件

Onchange事件

onfoucus:获得焦点的事件和onblur:失去焦点的事件

onmouseover:鼠标悬浮的事件和onmouseout:鼠标离开的事件

onload:加载完毕的事件【注意】
等到页面加载完毕在执行onload事件所指向的函数

this关键字

阻止事件默认行为
不让a标签跳转,IE可以选择IE的版本来测试,如果不想跳转，可直接在onclick 写return false

<!-- event:固定事件 -->
<a href="http://www.baidu.com" οnclick="fun(event)">点击我</a>
<script type="text/javascript">
	阻止事件的默认行为
	//IE web技术：window.event.returnValue = false;
	//W3c web技术: 传递过来的事件对象.preventDefault();
	function fun(e) {
		if(e && e.preventDefault){
			alert("w3c");
			e.preventDefault();
		}else{
			alert("IE");
			window.event.returnValue = false;
		}
	}
</script>

阻止事件的传播
IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();

<script type="text/javascript">
	//阻止事件传递,黄色的不传递给红色的
	function fun1(e) {
		alert("yellow");
		if(e && e.stopPropagation){
			alert("w3c");
			e.stopPropagation();
		}else{
			alert("IE");
			window.event.cancelBubble = true;
		}
	}
	function fun2() {
		alert("red");
	}
</script>

<div style="width: 200px;height: 200px;background-color: red" οnclick="fun2()">
	<div style="width: 100px;height: 100px;background-color: yellow" οnclick="fun1(event)"></div>
</div>