JavaScript笔记-注册(绑定)事件的两种方式

最新推荐文章于 2022-04-15 23:31:00 发布

Green8y0

最新推荐文章于 2022-04-15 23:31:00 发布

阅读量202

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/init_8y0/article/details/114680615

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
一、用法
二、代码
三、实机演示
总结

前言

JavaScript的学习笔记-注册(绑定)事件的两种方式

1.传统方式

2.方法监听方式

一、用法

1.传统方式

<body>
	<!--1.第一种-->
	<button onclick="alert('传统方式注册事件')"></button>
	
	<script>
		// 2.第二种
		btn.onclick = function() {}
	</script>
</body>

2.方法监听方式

引用自菜鸟教程: https://www.runoob.com/jsref/met-element-addeventlistener.html

element.addEventListener(event, function[, useCapture])

参数	描述
event	必填项，字符串；指定事件名事件名不使用"on"前缀例如，使用"click"，而不是"onclick"
function	必填项，事件触发时执行的函数
useCapture	可选项，布尔值； true-事件在DOM事件流的捕获阶段执行 false-事件在DOM事件流的冒泡阶段执行

二、代码

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册事件的两种方式</title>
</head>
<body>
  <button class="btn1">传统方式注册事件</button>
  <button class="btn2">方法监听方式注册事件</button>
  <script>
    // 1.传统方式(注册事件的唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数)
    let btn1 = document.querySelector('.btn1')
    btn1.onclick = function () {
      console.log('传统方式注册事件1')
    }
    // 会覆盖上面的函数
    btn1.onclick = function () {
      console.log('传统方式注册事件2')
    }

    // 2.方法监听方式(后注册的处理函数不会覆盖前面注册的处理函数)
    let btn2 = document.querySelector('.btn2')
    btn2.addEventListener('click', function () {
      console.log('方法监听方式注册事件1')
    })
    // 不会覆盖上面的函数
    btn2.addEventListener('click', function () {
      console.log('方法监听方式注册事件2')
    })
  </script>
</body>
</html>

三、实机演示

在这里插入图片描述

总结

记录JavaScript的两种注册(绑定)事件的方式

Green8y0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记-注册(绑定)事件的两种方式

文章目录前言一、用法二、代码三、实机演示总结前言JavaScript的学习笔记-注册(绑定)事件的两种方式1.传统方式2.方法监听方式一、用法1.传统方式<body>  <button onclick="alert('传统方式注册事件')"></button> <script> // 2.第二种 btn.onclick = function() {} </script>
复制链接

扫一扫