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绑定事件方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Google Map Api和GOOGLE Search Api整合实现代码
将GOOGLE MAP API 和 GOOGLE Search API 进行整合，我用面向对象的方式写了一个类，通过传一个经纬度进去，自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等，反过来标到地图上，并可在任意容器内显示。2009-07-07
下面小编就为大家带来一篇js print打印网页指定区域内容的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文通过实例代码给大家介绍了JS中定位 position 的使用，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-08-08
本文是小编给大家特意整理的关于js数组方法的知识，非常实用，在面试笔试题中经常用得到，有需要的朋友可以参考下2016-07-07
大家浏览网页的时候，见到过图片跟随鼠标移动的js特效，效果非常好，是怎么实现的呢，实现这个功能很简单，感兴趣的朋友一起看看吧2015-11-11
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥,最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作2012-11-11
本文主要介绍了jsonp跨域请求的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
光标定位，想必大家有所了解吧，在本文将为大家介绍的是通过自定义函数来实现标签元素的定位，感兴趣的朋友可以了解下2013-09-09
这篇文章主要介绍了原生javascript实现自动更新的时间日期的相关资料，对实现代码进行详细分析，感兴趣的朋友可以参考一下2016-02-02
JScript面向事件驱动的编程...2007-01-01
最新评论