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中的仿面向对象，因为js中不像其他语言，不存在面向对象语言的相关特性2011-05-05
下面小编就为大家带来一篇再谈javascript常见错误及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了js获取域名的方法,涉及window.location中常见方法的使用技巧,需要的朋友可以参考下2015-01-01
IE事件对象（The Internet Explorer Event Object）
不同于DOM事件对象，基于Event Handler授权这种方式，IE事件对象可以用不同的方式进行访问。当一个事件Handler通过DOM 0 级的方式被授权，则这个事件对象将作为window对象的属性而存在2012-06-06
这篇文章主要介绍了微信小程序 行的删除和增加操作实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null，以及对象变量的指针（地址值），这篇文章主要介绍了JS堆栈内存的运行机制,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了JavaScript实现轮播图效果，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-10-10
下面小编就为大家带来一篇原生javascript实现的一个简单动画效果。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
本篇文章主要介绍了JS如何实现在页面上快速定位（锚点跳转问题），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
如何判断对象是否为空是我们在开发过程中经常遇到的问题,今天我们将讨论几种常用的方法,以及如何在不同的场景中使用它们,接下来、一起看看吧,对你肯定有帮助2024-01-01
最新评论