JavaScript之函数

一.函数初认识

 1.函数类型
     function(){} -->匿名函数
     function 函数名(){}-->命名函数
 2.函数不调用就不会执行
 3.函数的调用方式
    ①.事件调用
    ②.直接调用

二.函数调用的两种方式

第一种事件调用之:通过匿名函数进行事件调用

li[i].onclick=function()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName('li');
  for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
          alert('阔落要加冰,学习要走心');
      }    
  }
</script>

点击效果:

第一种时间调用之:通过命名函数进行事件调用:

li[i].onclick=onclickMe;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName('li');
  for(var i=0;i<li.length;i++){
     li[i].onclick=onclickMe;
     function onclickMe(){
         alert('阔落要加冰,学习要走心');
     }
  }
</script>

点击效果:

 

第二种直接调用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName('li');
  for(var i=0;i<li.length;i++){
    li[i].onclick=onclickMe();
  }
  function onclickMe(){
         alert('阔落要加冰,爱我要走心');
     }
</script>

效果(直接出现三次显示,无需点击,这就是直接调用,只要格式正确,直接执行函数体代码):

posted @ 2019-01-06 16:17  静心*尽力  阅读(126)  评论(0)  编辑  收藏  举报