js的基础知识

给元素添加事件监听器

addEventListener介绍

addEventListener() 方法用于向指定元素添加事件处理程序(事件句柄handler)。

参数1:事件名称必须。字符串,指定事件名。
注意: 不要使用 “on” 前缀。 例如,使用 click ,而不是使用 onclick。

参数2:function 必须。指定要事件触发时执行的函数。
注意:事件对象会作为第一个参数传入函数。

参数3:useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

true - 事件处理程序(事件句柄)在捕获阶段执行
false默认

addEventListener给元素绑定事件

var box = document.querySelector('.box'); 
//给元素添加一个事件监听器 (绑定事件处理程序)  
box.addEventListener('click',function(){
     console.log(666);
});
console.log(999);

事件流

事件流有三个阶段:

        1.捕获阶段
        2.目标阶段
        3.冒泡阶段。

事件对象

        行内式:

<div id="box" onclick="doClick()"></div>
<script>
      function doClick() {
        console.log(window.event);
      }
</script>

                注意:window的事件可以省略window

        addEventListener绑定事件获取事件对象

// 给一个按钮添加点击事件处理程序
const myButton = document.querySelector("#my-button");
 
myButton.addEventListener("click", function (event) {
  console.log(event.type); // 获取事件类型(click)
  console.log(event.target); // 获取目标元素(myButton)
});

相关推荐

  1. js基础知识

    2024-04-27 06:32:07       13 阅读
  2. js知识练习

    2024-04-27 06:32:07       11 阅读
  3. Node.js 和 Vue 区别基本知识科普

    2024-04-27 06:32:07       9 阅读
  4. 【Node.js】笔记整理 1 - 基础知识

    2024-04-27 06:32:07       38 阅读
  5. Node.js基础知识点(三)

    2024-04-27 06:32:07       27 阅读
  6. Node.js_基础知识(全局变量)

    2024-04-27 06:32:07       28 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-27 06:32:07       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-27 06:32:07       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-27 06:32:07       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-27 06:32:07       18 阅读

热门阅读

  1. 【动态规划】Leetcode 416. 分割等和子集【中等】

    2024-04-27 06:32:07       13 阅读
  2. Jsoup爬虫

    2024-04-27 06:32:07       13 阅读
  3. 快速使用之Log4j2日志框架

    2024-04-27 06:32:07       12 阅读
  4. Nginx(三): 项目实战之conf

    2024-04-27 06:32:07       12 阅读
  5. DNA序列k-mers哈希映射和相似序列查找

    2024-04-27 06:32:07       13 阅读