JavaScript基础04

                                    JavaScript基础04
 开发工具与关键技术：Visual Studio2015 与JavaScript  作者：北道海棠   撰写时间：2019.04.24

今天了解的是JavaScript的函数的基本用法和JavaScript事件的绑定。
一． 函数
它类似于定义一个方法，必须要通过调用才能发挥作用，不调用则不执行。在JavaScript函数中要区分大小写，它的关键词function必须是小写的，在调用时名称大小写必须要与方法名称大小写一致，否则无效。
JavaScript函数的基本格式为：

function   X(“X”为自定义函数名称) （[ 参数1，参数2，、、、、、]）{
                        代码块；
              [return(返回函数指定值) [变量或值]；]   // return，变量或值可写可不写
            }

在这里你可以发送任意多的参数，由逗号 (，) 分隔：当参数和变量达到两个或以上的时，变量和参数必须要以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推，如下：

function myFunction(name1,name2) {
alert("大哥叫" + name1 + " 二哥叫" + name2);
}
myFunction(大明,小明)；

注：当您声明函数时，请把参数作为变量来声明：
除了以上基本格式外还有以下五种基本格式。
1.1 没有参数也没有返回值的函数（最基本的结构）

function funName1（）{
console.log(“函数funName1没有参数也没有返回值。”)；
}
     FunName1( );//调用函数

一般在不需要返回函数的情况下使用。
1.2 有参数没有返回值的函数

function funName2（parml）{
console.log(“函数funName2有一个参数parml=”+parml+”，没有返回值。”)；
}
   FunName2(23);//调用函数 可赋值可不赋,其中值可以是具体值也可以是字符串或对象

注：JavaScript函数的形参与C#的形参要区分开来，在JavaScript函数中它的形参不需要指定类型，也不需要用var来声明，而在C#中则需要。
1.3 没有参数有返回值的函数

 function funName3（）{
 return“函数funName3没有参数有返回值。”；
   或   var str = “函数funName3没有参数有返回值。”
           return str;
 }
     var val1 funName3( );//调用函数
      console.log(val1);//在浏览器的控制台查看输出

1.4 有参数有返回值的函数

function add（a，b）{
return a + b;
}
     var val2 = add(3，5);
      console.log(val2);//在浏览器的控制台查看输出

1.5 使用 return; 退出函数
我们有时希望函数将值返回调用，这时通过使用 return 语句就可以实现，在使用 return 语句时，函数会停止执行，并返回指定的值；但当你仅仅希望退出函数时 ，也可使用 return 语句，且返回值是可选的 如下：

function myFunction(a,b)
{
if (a>b)
         {
            return;  //返回  undefined
          }
return a+b  
 }
var val = myFunction(3，2)；//如果a大于b,则执行上面的代码将退出函数,并不会计算a和b的总和。
        console.log(val);

二．事件
事件就是浏览器窗口中发生的一些特定的交互瞬间。JavaScript的事件的捕获和冒泡过程如下图左边， 右边图为事件常用事件（图片来源于老师授课文档）

JavaScript事件有三种写法：（1）直接在元素的某个事件里面调用一个函数，

例：     <button onclick="btnClick()">按钮1</button> //在HTML中
           function btnClick() {  //在script中
                           alert("在元素中直接绑定"); }

（2）在script里通过元素id拿到元素，然后给它绑定某个事件，这相当于一个方法，比较常用；

      <button id="btn3">按钮3</button>//在HTML中
                //在script中获取元素    
             var btn3 = document.getElementById("btn3");
                //绑定事件
             btn3.onclick = function () {
             alert("在JavaScript代码中绑定"); }     

（3）使用事件监听绑定事件，一般不常用。
添加监听 ：element.addEventListener(event, function, useCapture)
event : （必需）事件名，支持所有 DOM事件 。 function：（必需）指定要事件触发时执行的函数。 useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。 false，冒泡。默认false，不写默认false。
移除监听（参数必须和添加时一致才可以移除），
element.removeEventListener(event, function, useCapture)

写法：  <button id="btn4">按钮4</button>//在HTML中
          在script中获取元素
        var btn4 = document.getElementById("btn4");
        function btnClick2() {
            alert("使用事件监听绑定事件"); }
        //添加监听
        btn4.addEventListener("click", btnClick2, false);
        //移除监听
        btn4.removeEventListener("click", btnClick2, false);

如需了解更多事件请查看"HTML DOM 事件"