网站首页 > 基础教程 正文
javascript 中的点击事件,可以通过多种不同的添加方式来实现。下面介绍三种 javascript 中添加点击事件的示例代码,个人可以根据自己的项目需要选择不同的实现方式。
js添加点击事件的代码
<!--html代码--> <button id="mochu">我是按钮</button> <script> var btn = document.getElementById('mochu'); btn.onclick = function(){ alert('飞鸟慕鱼博客'); }; </script>
addEventListener() 方法添加点击事件
html DOM 中的 addEventListener() 方法可以向指定元素添加事件的句柄。它常用的为两个参数,一个为事件名称,另一个为事件触发的函数。
语法:
element.addEventListener(event, function)
示例代码:
<script> var btn = document.getElementById('mochu'); btn.addEventListener('click', function () { alert('http://www.feiniaomy.com') }, false); </script>
DIV元素中直接加入点击事件
可以直接在DIV元素中添加 onclick 事件以及要执行的函数。
此种方法与第一种方法类似,只是代码的书写方式不同而已。
<!--html代码--> <button onclick="a()">点击我</button> <script> function a(){ alert('我是弹出的内容'); } </script>
猜你喜欢
- 2024-11-19 小程序Kbone开发教程基础篇02-使用kbone-ui实现一个按钮
- 2024-11-19 比less/sass更便捷的新一代CSS编写方式
- 2024-11-19 带图标和按钮切换特效的垂直导航菜单的html页面源码
- 2024-11-19 HTML 也能开发桌面软件之 NW.js 中的 Window 窗体类
- 2024-11-19 JavaFX - CSS
- 2024-11-19 「按键精灵」旋转验证
- 2024-11-19 冷门的HTML - tabindex 的作用
- 2024-11-19 CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式
- 2024-11-19 零基础教你学前端——35、表单 input 控件中的按钮
- 2024-11-19 daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库
- 最近发表
- 标签列表
-
- jsp (69)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- linux命令大全 (65)
- pythonif (86)
- location.href (69)
- dockerexec (65)
- tail-f (79)
- queryselectorall (63)
- location.search (79)
- bootstrap教程 (74)
- deletesql (62)
- linuxgzip (68)
- 字符串连接 (73)
- html标签 (69)
- c++初始化列表 (64)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)