JS绑定事件的3种方法举例示范(简单易懂)
更新时间：2023年11月29日 08:36:55 作者：远近高低各不同
在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如事件绑定、事件监听、事件委托（事件代理）等,这篇文章主要给大家介绍了关于JS绑定事件的3种方法,需要的朋友可以参考下
前言
相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？
让我为大家介绍三种绑定事件的方法吧！
以下都是用点击事件(click)来做示范
一、行内绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 第一种方法,行内绑定事件,取一个函数名称 -->
<button onclick="fun()">点击</button>
</body>
<script>
// 第一种方法
function fun() {
console.log(1);
}
</script>
</html>
二、使用on绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>点击</button>
</body>
<script>
// 第二种方法
// 先获取button元素
let but = document.querySelector("button")
// 使用on的方法绑定
but.onclick = function(){
console.log(1);
}
</script>
</html>
三、使用事件监听的形式绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>点击</button>
</body>
<script>
// 第三种方法
// 先获取button元素
let but = document.querySelector("button")
// 使用addEventListener
but.addEventListener("click",function(){
console.log(1);
})
</script>
</html>
代码总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件的三种方法</title>
</head>
<body>
<!-- 第一种方法,行内绑定事件,取一个函数名称 -->
<!-- <button οnclick="fun()">点击</button> -->
<button>点击</button>
</body>
<script>
// 第一种方法
// function fun() {
// console.log(1);
// }
// .......................
// 第二种方法
// 先获取button元素
// let but = document.querySelector("button")
// 使用on的方法绑定
// but.onclick = function(){
// console.log(1);
// }
// ...........................
// 第三种方法
// 先获取button元素
// let but = document.querySelector("button")
// 使用addEventListener
// but.addEventListener("click",function(){
// console.log(1);
// })
</script>
</html>总结
到此这篇关于JS绑定事件的3种方法的文章就介绍到这了,更多相关JS绑定事件方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
随机颜色和颜色格式是我们在开发中经常要用到的一个小功能，网上相关的资料也很多，想着有必要总结一下自己的经验。所以这篇文章主要介绍了JS实现随机颜色的3种方法与颜色格式的转化,需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了js实现按钮颜色渐变动画效果的方法,涉及javascript鼠标事件及页面表单元素样式的动态操作技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript构造函数原理及实现流程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
JavaScript Window 打开新窗口(window.location.href、windo
本文主要介绍了JavaScript Window 打开新窗口的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
在本篇文章里小编给各位分享的是关于判断“命令按钮”是否被鼠标单击的相关知识点内容，有需要的朋友们参考下。2019-07-07
下面小编就为大家带来一篇javascript浏览器用户代理检测脚本实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
JavaScript解构赋值为我们提供了很多方便,但是用法比较多,本文就来梳理一下,下面这篇文章主要给大家介绍了关于JavaScript解构赋值的实用技巧指南,需要的朋友可以参考下2022-01-01
Firefox下提示illegal character并出现乱码的原因
Firefox下提示illegal character并出现乱码的问题，时间是是因为编码的问题导致。2010-03-03
TypeError document.getElementById(...) is null错误原因
这篇文章主要介绍了TypeError document.getElementById(...) is null错误原因,这是很容易犯的一个低级错误,需要的朋友可以参考下2015-05-05
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。本文将利用OpenLayer实现自定义坐标点的绘制，感兴趣的可以了解一下2022-04-04
最新评论