801笔记（return；事件）

函数返回值return

return返回结果

将函数内部处理后的结果返回到调用该函数的地方（需要变量接收）

在函数里面定义的变量，在函数外面是无法直接使用的**，会报错not defined

function fn(){
    var a=10;   //在函数中定义的变量a
    console.log(a)
}
fn();   //函数里的a是可以使用的
console.log(a)   //函数外的a会报错

如果就是需要在函数外面使用函数里面定义的变量的值，需要在函数中通过return把要使用的变量值返回出去

function fn(){
    var a=10;   //在函数中定义的变量a
    console.log(a)
    return a;  //返回的不是a这个变量，而是a的值
}
fn();   //函数里的a是可以使用的
console.log(a)   //只有返回的变量值，没有变量，这里也是报错的，还需要在外面接收函数的返回值

如何接收变量的返回值？-----需要用一个变量接收调用函数里的返回值

function fn(){
    var a=10;   //在函数中定义的变量a
    console.log(a)
    return a;  //返回的不是a这个变量，而是a的值
}
var aa=fn()  //调用函数
console.log(aa); //aa里存放的就是函数的返回值

返回值的应用：实现对值的多种处理

function sum(a,b){
    console.log(a+b);
}
sum(23,45)

//这个函数现在只能实现在控制台输出结果，已经限制死了，但是我们想能在页面打印结果，或者能可以进行下一步运算
改写如下↓↓↓

function sum(a,b){
    return(a+b);
}
var s=sum(23,45);
//则以下操作都可以实现
console.log(s);
document.write(s);
alert(s);
console.log(s+100);

return退出函数

函数中写了return，return后面的语句不再执行

function fn(){
    return 5;
    console.log(89);
}
console.log(fn());    //函数调用，同时这里输出fn()的返回值

//需要注意，这里控制台打印的结果只有5，没有89

function fn(){
    console.log(89);
    return 5;
}
console.log(fn());    //函数调用，同时这里输出fn()的返回值
//但是如果我们把return的位置放到后面，我们可以同时得到89和5两个结果

函数总结

1、没有参数没有返回值的函数，直接调用就可以执行

function fn(){
    console.log('hello world')
}
fn()

2、有参数没有返回值的函数，给实参执行就可以

function sum(a,b){
    console.log(a+b)
}
sum(34,56)

3、无参数有返回值的函数

第一种方式

function fn1(){
    var a =10,b='hello';
    return a+b;
}
console.log(fn1())   //先调用函数，再输出函数的返回值（console.log）
//输出结果是 10hello

----------------------------

function fn1(){
    var a =10,b='hello';
    console.log('123');
    return a+b;
}
console.log(fn1())    //先调用函数，再输出函数的返回值（console.log）
//输出的结果是123  10hello ---- 因为函数是先调用的，所以123正常输出，然后输出返回值

第二种方式

function fn1(){
    var a=10,b='hello';
    console.log('123');
    return a+b;
}
var s =fn1()    //调用函数，并把函数的返回值赋值给变量s，后面继续操作变量s就可以
console.log(s)

4、有参数有返回值的函数

function fn2(a,b){
    return a+b;
}
var ss =fn2(34,56)  //调用函数，并把函数的返回值赋值给变量ss，后面继续操作变量ss就可以
console.log(ss)

补充事项

• console.log(sumFn)和console.log(sumFn())输出的区别

function sumFn(){
    console.log(123);
}
console.log(sumFn);    //这里sumFn没有写括号，输入的是函数名，输出的是整个函数，函数不调用
console.log(sumFn());    //这里是函数调用，还要输出函数的返回值

• 没有return的函数打印返回值的话是undefined

function sumFn(){
    console.log(123);
}
console.log(sumFn());  //这个函数没有写return返回值，所以输出得到的是undefined

事件

事件：鼠标或键盘的动作，比如：点击事件、双击事件、移入事件、移出事件、按下事件、弹起事件、获取焦点、失去焦点... ...

事件驱动：监听动作 onclick（点击）, ondblclick（双击）,onmouseover（鼠标移入），onmouseout（鼠标移出）, onmousemove（鼠标移动），onmousedown（鼠标按下），onmouseup（鼠标弹起），onblur... ...

事件处理程序：事件触发后所调用的函数

语法：

对象.事件驱动=事件处理程序
如：
document.onclick=function(){
    
}
------------------------
<script>
//事件对象 通过id获取操作的元素对象
//document.getElementById('id')     //id的值要写在引号里面
var oDiv=document.getElementById('box') ;
//给对象添加点击事件
oDiv.onclick=function(){
    alert('hehe');
}
/*oDiv就是我们事件监听的对象
click是点击事件
onclick是事件驱动
function()在这里是事件处理程序
*/
</script>

当js写在元素对象前面的时候，为了能够获取到对象，需要添加一个加载事件：window.onload=function(){
    
} 
//将页面中所有的内容（文本、标签、图片、音频、视频等所有的信息全部加载完成，才调用事件处理程序