JavaScript的事件入门

最新推荐文章于 2024-08-27 21:01:56 发布

哈喽朋友

最新推荐文章于 2024-08-27 21:01:56 发布

阅读量151

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/txzlmh/article/details/107098927

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

事件所简单一点就是你想做一件什么事情，比如你肚子饿了，要吃饭，那你肚子饿就是驱动（事件），触发了要吃饭的代码块（函数）。

这里先讲一个单击事件onclick ,所谓单击事件即你用鼠标点击它，就可以触发某一代码块的功能，先记着它，后面说怎么用的。

函数的语法

function add()
{
    // 执行代码
}

如上，即为一个代码块， function是JavaScript的函数关键字，有了它才能叫做函数，add为函数名想要去什么名就取什么名，不过最好按照驼峰命名法或是其他的命名规则来命名，可以让别人一眼就看出这个函数是干什么的最好。

无参函数

所谓无参函数，就是不需要传入参数的函数（如果不知道什么是参数可以百度）。

<script>    
   function output() {
        //循环十次
        for (var i = 0; i < 10; i++) {
            //在页面上打印出来
            document.write("hello word<br/>")
        }
    }
    //调用函数
    output();
</script>

效果

在这里插入图片描述

如上即为一个简单的函数

除了document.write的打印方式还有如下

alert("hello word!");           //弹出框显示
console.log("hello word!");     // 在浏览器控制台显示

在写项目是，经常的打印拿到的数据，及检测数据是否出错

有参函数

所谓有参函数即是有参数传入的函数

<script>
    function output(n){
        for (var i = 0; i < n; i++) {
            document.write("hello word<br/>")
        }
    }
	//调用方法并传入参数
    output(5);
</script>

在这里插入图片描述

如上n为参数，而在调用该函数时output(5); 将5传到了n那里，所有上面的代码有n的都会被赋值成5，所有for循环也就循环了5次

有参有返回值的函数

所谓有返回值，就是时在调用该函数后会有一个结果出来，就好比你去检查，就有一个检查的结果,这里有个关键字return,用来返回结果的

<script>
    function add(num1,num2){
        return num1 + num2;
    }
	//传入参数后值返回用sun接收
    var sun = add(20,34);
    //将值打印出来
    document.write(sun);
</script>

在这里插入图片描述

如上函数，当传入参数后进行相加的操作num1 + num2，也就是20+34，然后通过return关键字饭后，给函数调用者add(20,34),可以定义一个变量来接收返回的值。

如上就是函数的几种形式，但是一般前端不会这样用，前端是将函数和HTML元素绑定成一个事件，或者用函数来处理某些数据等等，反正就是不会简单的打印，不过基本的形式就和上面差不多。

对于HTML元素与单击事件的绑定有两种，一种是内联，一种是外联

<body>
    <button onclick="add()">内联</button>
    <button id="id1">外联</button>
</body>
<script>
    function add() {
        //弹出个提示框
        alert("内联")
    }
    
    window.onload = function () {
        //获取id名为id1的HTML元素
        var ad = document.getElementById("id1");
        //绑定单击事件
        ad.onclick = function () {
            alert("外联");
        }
    }

</script>

如上通过onclick="add()"来调用函数，是先绑定了单击事件onclick当有鼠标点击该HTML元素是，它会调用到add()函数来处理点击后的动作。

如上只用到id的就是外联，window.onload是当整个页面加载完成后，才会加载该函数，以保证document.getElementById能拿到id为id1的HTML元素，拿到该HTML元素后，绑定单击事件，用来触发函数。

如上的种方式都可以是用，可以混合使用也可以单独使用，总之那个便于后期代码的维护那还是外联，不过内联可以让你很快的定位到调用了哪一个函数。

哈喽朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的事件入门

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。事件所简单一点就是你想做一件什么事情，比如你肚子饿了，要吃饭，那你肚子饿就是驱动（事件），触发了要吃饭的代码块（函数）。这里先讲一个单击事件onclick ,所谓单击事件即你用鼠标点击它，就可以触发某一代码块的功能，先记着它，后面说怎么用的。函数的语法function add(){ // 执行代码}如上，即为一个代码块， function是JavaScript的函数关键字，有了它才能叫做函数，add为函数名想要去什么名就取什
复制链接

扫一扫

专栏目录