JavaScript onClick()事件教程及示例

onClick() 事件在JavaScript中非常流行。onClick事件仅用于在单击指定的HTML元素时触发操作、执行代码或调用函数。这个HTML元素通常是一个按钮,但也可以是ahead、iframe、label元素等。 onClick() 所有主要浏览器都支持该活动,如Google Chrome、Microsoft Edge、internetexplorer、Mozilla Firefox、Opera和Safari。

k2凯图 event冲锋衣十周年限量纪念款三层压胶面料款登雪山冲锋衣
| 月销量25件
券后499-30=469元
原价¥499

淘口令:

¥rTDgXqMFS3T¥
 

onClick()语法

onClick事件具有非常简单的语法,其中将分配操作、JavaScript代码或函数。

  • `ELEMENT`是附加给定onclick事件的HTML元素。元素通常是一个按钮或类似类型的元素,用户可以在其中单击它。
  • `SCRIPT`是一个JavaScript代码,可以是一个或多个语句,也可以是一个函数调用。

用onClick()调用函数

我们将从一个非常流行的例子开始,在这个例子中,我们将用onClick()事件调用一个已经定义的函数。函数名为 Say_Hello() 它只会打印一个敬礼。我们只提供onClick()事件的函数名。

在onClick()中运行代码

onClick()事件也可以直接运行JavaScript代码,而无需调用任何函数。此代码可以是单个语句或多个语句。在本例中,我们将运行alert函数并进行一些计算。

如果要在onClick()事件中使用多个语句,则必须使用 ; . 但如果只有一个说法 ; 在我们可以使用或不使用的地方是可选的。

相关文章: JavaScript“Uncaught TypeError:Cannot set property“…”of null”错误解决方案

为onClick()函数提供参数

我们还可以为onClick()事件调用的函数提供一些参数。我们将只调用函数并将参数放在括号内。在本例中,我们将为 Say_Hello() 功能。

使用HTML DOM对象设置onClick()事件

到目前为止,我们已经为onClick()事件使用了一种简单的元素属性方式。我们还可以使用htmldom为click事件的特定HTML元素设置函数或代码。我们将设置元素DOM对象 onclick 属性。在下面的示例中,我们将设置 Say_Hello() 通过使用htmldom为button元素提供函数。

使用HTML DOM对象删除onClick()事件

我们还可以使用HTMLDOM对象删除onClick()事件赋值。我们只需将元素的onclick属性设置为null对象,这将删除现有的赋值。在本例中,我们将删除 mybutton HTML元素onClick()事件,如下所示。

document.getElementById("mybutton").onclick="";

使用addEventListener()函数设置onClick()事件

一些HTML元素提供 addEventListener() 函数,以便向给定的HTML元素添加事件。我们将只获取HTML元素的对象并使用 addEventListener() 具有事件名称和可以分配的代码的函数。onClick()事件命名为 click 对于addEventListerner()。我们还将提供一些JavaScript代码或函数 Say_Hello() 功能。

使用addEventListener()删除onClick()事件  功能

我们也可以使用 addEvenListener() 函数以删除现有的单击事件代码或函数。我们将为下面的代码或函数参数清空字符串。

document.getElementById("mybutton").addEventListener("click","");
© 版权声明
THE END
喜欢就支持一下吧,技术咨询可以联系QQ407933975
点赞0
分享