6.1 Javascript:事件与回调函数

最新推荐文章于 2023-10-06 22:50:40 发布

置顶 WeAreZero

最新推荐文章于 2023-10-06 22:50:40 发布

阅读量2.6k

点赞数 1

分类专栏： JavaScript笔记文章标签： javascript 函数回调函数事件事件处理器

本文链接：https://blog.csdn.net/WeAreZero/article/details/50881032

版权

JavaScript笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

事件

当页面要发生一些事情或做一些事情时，我们称其为事件。事件是网页自带的属性，如click、mousemove、load等。
响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。

回调函数

调函数，，指一个函数A被作为参数传递给另一个函数B，回调函数A会在函数B内被调用(或执行)。回调函数的本质是一种模式，因此回调函数也被称为回调模式。在这里，函数A被称为回调函数

深度理解

函数也只不过是个值，要么返回一个值，要么为空值
所以把它当成一个数据来处理即可

例：

另一种声明函数的方式

var showName=function(name){//函数名称即为变量名称
    alert("Your name is "+name+", your number is "+outValue());
    //在这里，函数主体outValue即是变量值
    //采用这种表达方式时，又称为函数字面量
    }
//当函数主体单独出现而没有名称时，被称为函数字面量

var name=showName;
通过这句代码，可以看出，函数可以像变更般操纵
说白了，函数只是一个值引用到函数主体的变量

函数的调用与引用

调用函数：
var value=outValue()；//outValue()为调用一个函数（也是函数字面量）
引用函数
var value=showName;//其实，showName是指向一个函数主体的引用

事件，回调，与HTML属性

回调函数最常用于处理事件

利用Html属性联结回调函数与事件

<body onload="showName();">
    <img src="..." onclick="showImage()"/>
</body>

onload是Html标签的属性，它的作用是把showName()函数与onload事件联结
onclick是Html标签的属性，它的作用是把showImage()函数与onclick事件联结

利用函数引用，分离Html与Javascript代码

使用函数引用设定回调函数
window.οnclick=showName;
onclick是window对象的属性，showName为函数引用
当onlick事件被触发后，将执行showName引用所指向的函数
这些代码完全可以在Javascript中书写代码，使得Html与Jvavascript代码分离

通过函数字面量来传递参数

使用函数字面量作为函数引用，而后从函数字面量内调用相应的回调函数

function helloName(name)
{
    //输出“Hello WeAreZero”的带参函数
    alert("Hello "+name);
    }
window.onclick=function(evt)//函数字面量function()作为函数引用指派给onclick事件
{
    //在这里，函数字面量function(evt)完成了对helloName()的调用
    helloName("WeAreZero");
    }

在这里，函数字面量是一个没有名字的函数，所以又叫匿名函数
evt参数将事件对象作为参数传递给事件入事件处理器，但在这里没有用到evt参数

总结

将事件与函数联结，并实现Html代码与Javascript代码分离，不仅利于代码直观性与维护，而且函数会使你Javascript的本领更上一层楼！

WeAreZero

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
6.1 Javascript:事件与回调函数

事件当页面要发生一些事情或做一些事情时，我们称其为事件。事件是网页自带的属性，如click、mousemove、load等。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。回调函数调函数，，指一个函数A被作为参数传递给另一个函数B，回调函数A会在函数B内被调用(或执行)。回调函数的本质是一种模式，因此回调函数也被称为回调模式。在这里，函数A被称为回调函数深度理解函数也只不过是个值，要么
复制链接

扫一扫