JavaScript事件处理与函数定义核心要点

作者:拾光

时间:2026-10-28

浏览:406

本文详解JavaScript中点击超链接触发事件的两种写法,对比#与javascript:void(0)在防刷新及死链场景下的区别。深入解析函数定义的规范,包括大括号位置、返回值处理及无重载特性。介绍匿名函数的三种创建方式,并通过prototype扩展String对象方法,最后说明页面加载完成后再注册事件的必要性。

文章目录

单击超链接通常会触发相应的事件。

超链接点击事件与防刷新处理

1. 使用a标签的onclick属性

代码示例:<a href="#" onclick="js代码">

这种写法存在一个明显的弊端:点击链接后页面会刷新一次,导致滚动条回到页面顶端。

如果希望点击链接时不刷新页面,该如何实现呢?

参考以下代码:

<a href="javascript:void(0)" onclick="js代码">

2. #与javascript:void(0)的区别

当超链接为“死链”时,使用#与javascript:void(0)会有不同的表现。

void(0)返回的是undefined,即没有用的值,不会跳转到任何地方,因此没有实际意义。

而使用#会刷新一次当前页面。

3. 或者,使用a标签的href属性

代码示例:<a href="javascript: js代码 ">

只有在超链接的href属性中嵌入JavaScript代码时,才需要添加“javascript:”前缀。

这是因为这并非事件处理,而是将“javascript:”视为一种网络协议(类似于http:、ftp:、thunder://、ed2k:、mailto:等),交由JavaScript解析引擎进行处理。

JavaScript函数定义规范

关于方法的特别强调

1. 不要另起一行

在JavaScript中编写大括号时,通常直接跟在关键字后面,而不要另起一行。

原因是JavaScript会在语句末尾自动添加分号。如果将大括号另起一行,return语句后会自动插入分号,导致返回值变为undefined。

2. 不需要声明返回值类型

JavaScript函数定义以function开头,不需要声明返回值类型和参数类型。

与C#和Java不同,JavaScript不要求所有代码路径都有返回值,没有返回值时默认为undefined。

3. 没有方法重载

JavaScript中不存在方法重载机制。

方法中传递的参数称为命名参数。

当用户调用一个计算多个数之和的方法时,如何获取方法中实际有多少个参数呢?

请使用arguments对象!

匿名函数的创建方式

匿名函数

1. 方式一

代码如下:

var f1=function(p1,p2){ return p1+p2; };//将函数赋值给一个变量

匿名函数无法直接调用,只能赋值给一个变量。由于这是赋值语句,后面需要加分号。

应用场景:

代码如下:

document.getElementById(‘btn').onclick=function(){}

2. 方式二

代码如下:

(function(p1,p2){alert(p1+p2);})(20,30);

3. 方式三

代码如下:

var m1=new Function(“p1”,”p2”,”p3”,”return p1+p2+p3”);
alert(m1(1,2,3));这种方式性能较低。

这种匿名函数的用法在jQuery中非常常见。

原型扩展方法

扩展方法prototype

通过类对象的prototype属性来设置扩展方法。

扩展方法的声明必须在使用扩展方法之前执行。JavaScript函数没有专门的默认值语法,但可以不给参数传值,不传值的参数值为undefined,开发者需自行判断并赋予默认值。

代码如下:

var msg ='xiaoming@111.com';
String.prototype.isEmail = function(){
return this.indexof('@')!= -1 ?true:false;
};
alert(msg.isEmail);

页面事件注册

事件

1. 调用事件

超链接点击事件与防刷新处理

2. 注册事件

必须在页面加载完成后,才能给页面的元素注册事件。

因此可以使用 onload = function(){

//在这里注册事件

};

超链接点击事件与防刷新处理

页面加载事件

代码如下:

<script type="text/javascript">
//刷新
//location.reload();
onload=function(){
alert("页面加载了");
          };
onunload =function(){
alert("页面关闭了");
          };
onbeforeunload= function(){
alert("页面关闭之前触发");
          };
</script>

超链接点击事件与防刷新处理

以上就是本文的全部内容,希望能够让大家对JavaScript的事件和方法有更深入的认识。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章