click事件在什么时候出发_JavaScript事件详解

最新推荐文章于 2024-04-28 12:24:08 发布
最新推荐文章于 2024-04-28 12:24:08 发布
阅读量424 收藏
点赞数
文章标签： click事件在什么时候出发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33778479/article/details/112274162
版权

JavaScript 事件解析

事件和事件绑定

event reference

事件：
浏览器赋予元素天生默认的一些行为，不论是否绑定相关的方法，只要进行相应的行为操作了，那么一定会触发相应的事件

事件绑定：
给元素的某一个事件行为绑定方法，目的是行为触发时可以做点自己想做的事

DOM0事件绑定

element.onevent = function () {
  // doSomething
}

// 取消事件绑定
// 在绑定事件之前，其对应的属性值也是null
element.onevent = null // 将属性值指向空对象指针，取消对之前函数对应的引用

原理：给DOM元素的某一个私有事件属性赋值为函数。当用户触发这个事件行为,js引擎会帮助我们执行绑定的方法并传入事件对象(element.onevent(event))。

根据DOM0事件绑定的原理，我们可以得到以下结论：

  • 不是所有的事件类型都支持这种绑定方式，元素有onxxx属性时，才能给其绑定方法(例如：DOMContentLoaded事件就不支持这种绑定方案)
  • 只能给当前元素的某一个事件行为绑定一个事件处理函数(在为对象的属性赋值为新函数的时候，会取消对之前函数地址的引用)

DOM2事件绑定：

element.addEventListener(type, listener, useCapture)
element.removeEventListener(type, listener, useCapter)

原理：基于原型链查找机制，找到EventTarget.prototype上的addEventListener方法执行。

它的实现类似于发布订阅模式，会将对应事件的事件监听器函数放入一个数组中，在该事件触发时，将数组中的函数一次执行。所以这种事件绑定方式支持对同一个事件绑定多个事件监听器

事件对象

DOM event 接口

浏览器会在事件执行时，为我们绑定的事件执行函数传入一个参数，该参数就是事件对象

事件对象的常用属性属性和方法：

  • currentTarget: 绑定事件的元素
  • eventPhase: 指示事件流正在处理哪个阶段
  • target: 触发事件的元素
  • type: 事件的类型(不区分大小写)
  • preventDefault: 取消事件(阻止浏览器默认行为)
  • stopPropagation: 停止事件冒泡

常用的事件对象有以下几种：

  • 鼠标事件对象：MouseEvent
  • 键盘事件对象: KeyboardEvent
  • 触摸事件对象：TouchEvent
  • 拖拽事件对象：DragEvent

需要注意的是，每次事件触发时传递的事件对象都是相同的: 

let object = null;
const box = document.getElementById('box');

box.onclick = function (event) {
  console.log('event', event);
  object = event;
};

box.addEventListener('click', function (event) {
  console.log('isEqual1', event === object); // true
});

document.addEventListener('click', function (event) {
  console.log('isEqual2', event === object); // true
});

阻止浏览器默认行为

Browser default actions

在JavaScript中，许多事件将会自动导致浏览器执行特定的行为，比如：

  • 点击a链接
  • 点击form提交按钮
  • 在文本上按下鼠标按钮并且移动鼠标选择文本
  • 在页面中右键鼠标出现选项菜单

阻止浏览器默认行为一般有俩种方法：

  1. 在事件处理函数中return false
  2. 在事件处理函数中调用事件对象的preventDefault方法

这里我们先看一下a标签的例子。a标签通常具有的行为如下：

  • 跳转页面
  • 锚点定位

阻止a标签的默认行为：

<a href="javascript:;">跳转</a>

也可以为a标签绑定点击事件，在点击事件中阻止默认行为： 

const aLink = document.getElementById('a');
aLink.onclick = function(e) {
  // return false
  e.preventDefault();
}

input输入框能输入内容也是浏览器的一种默认行为，我们限制用户最多只能输入18位：

<body>
<input class="input" type="text">
<script>
  const input = document.getElementsByClassName('input')[0];
  input.addEventListener('keydown', function (e) {
    // const value = e.target.value;
    // const value = this.value
    const whiteList = [13, 8, 37, 38, 39, 40];
    if (this.value.length >= 10 && !whiteList.includes(e.keyCode)) {
      e.preventDefault();
    }
  });
</script>
</body>
这里只是为了学习对应的知识点而模拟的场景，实际上我们可以使用原生的 maxLength属性

上边的代码在input中输入的内容长度超过10位后，将阻止浏览器的默认行为，导致input无法输入。但是我们的input框在此时应该还可以进行移动光标、通过enter键提交、通过backspace键删除内容，我们通过其对应的keyCode值来进行过滤。

当然，浏览器中的默认行为还有很多,这里我们只是列举了一些而已，当大家遇到的时候都可以使用上边提到的方法阻止其默认行为

事件传播机制

Event dispatch and DOM event flow

这是w3c中事件传播机制的一张图，大家可以结合例子进行理解

de9cc96cb7e1e2e8a3a1b90ec149ce78.png

下面是一个关于事件冒泡和捕获的例子：

// addEventListener进行事件监听可以控制事件传播阶段
// addEventListener的第三个参数可以控制支持冒泡(false)还是捕获(true),默认是支持冒泡(false)
window.addEventListener('click', function (e) {
  console.log('window');
});
document.documentElement.addEventListener('click', function (e) {
  console.log('html');
});
document.body.addEventListener('click', function (e) {
  console.log('body');
});
outer.addEventListener('click', function (e) {
  console.log('outer');
});
inner.addEventListener('click', function (e) {
  console.log('inner');
});
center.addEventListener('click', function (e) {
  console.log('center');
});

// center -> inner -> outer -> body -> window

window.addEventListener('click', function (e) {
  console.log('window');
}, true);
document.documentElement.addEventListener('click', function (e) {
  console.log('html');
}, true);
document.body.addEventListener('click', function (e) {
  console.log('body');
}, true);
outer.addEventListener('click', function (e) {
  console.log('outer');
}, true);
inner.addEventListener('click', function (e) {
  console.log('inner');
}, true);
center.addEventListener('click', function (e) {
  console.log('center');
}, true);

// window -> html -> body -> outer -> inner -> center

我们画图分析一下上边代码中事件的传播机制：

014e631b0d5ab2df23ae874b5990ba53.png

需要注意的是：

  • 通过onxxx绑定的事件方法，只能在目标阶段和冒泡阶段执行
  • 通过addEventListener绑定的事件方法，我们可以通过第三个参数(默认为false支持冒泡)控制在捕获(true)或冒泡(false)阶段执行

事件传播分为三个阶段： 冒泡阶段(bubble phase): 事件对象逆向向上传播回目标元素的祖先元素，从父亲开始，最终到达Window 目标阶段(target phase): 事件对象已经抵达事件目标元素，为这个阶段注册的事件监听被调用 * 捕获阶段(capture phase): 事件正在被目标元素的祖先对象所处理，这个处理过程从Window开始，一直到目标元素的父元素

我们可以通过事件对象从Event.prototype原型上继承的eventPhase属性来判断当前事件所处的阶段：

4e4e97e887c21c14ce7c25faf0e86f00.png

mouseover和mouseenter的区别

mouseout和 mouseleave同理

mouseover和mouseenter的区别有以下2点： mouseover支持事件冒泡，mouseenter不支持事件冒泡 mouseover从子元素进入父元素的时候，会触发父元素的mouseover事件，而mouseenter并不会

我们通过一个例子来学习俩者的区别并理解事件传播过程：

<body>
<select name="" id="select">
  <option value="over">mouseover</option>
  <option value="enter">mouseenter</option>
</select>
<div class="outer">
  <div class="inner">
  </div>
</div>
<script>
  const $ = (selector) => document.querySelector(selector);
  const outer = $('.outer'), inner = $('.inner'), select = $('#select');
  const elements = [outer, inner];
  const eventMap = { over: ['mouseover', 'mouseout'], enter: ['mouseenter', 'mouseleave'] };
  // over或者enter,根据下拉框进行切换
  let type = 'over';
  // 事件监听函数
  const listener = function (e) {
    const className = e.currentTarget.className;
    console.log(`${className}-${e.type}`);
  };
  // 为outer和inner元素绑定事件
  const bindListeners = function () {
    elements.map(item => {
      eventMap[type].map(event => {
        item.addEventListener(event, listener);
      });
    });
  };

  // 移除对应type所绑定的事件
  const removeListeners = function () {
    elements.map(item => {
      eventMap[type].map(event => {
        item.removeEventListener(event, listener);
      });
    });
  };

  // 初始化事件绑定
  bindListeners();
  select.addEventListener('change', function (e) {
    // 切换select时，先移除对应的事件
    removeListeners();
    // 更改type值
    type = e.target.value;
    // 为对应type的元素绑定事件
    bindListeners();
  });
</script>
</body>

这里是在线例子:mouseover-mouseenter-differ

我们分析一下从最左侧划入最右侧，俩个事件的触发过程

mouseover:

  • 鼠标移入outer元素，触发outer的mouseover事件
  • 鼠标从outer移入inner时，首先触发outer的mouseout事件。之后移入inner，触发inner的mouseover事件，由于事件冒泡机制，触发outer的mouseover事件
  • 鼠标移出inner时，首先触发inner的mouseout事件，由于冒泡机制，会触发outer的mouseout事件。之后移入outer触发outer的mouseover事件
  • 鼠标移出outer，触发outer的mouseout事件

打印结果如下：

// 鼠标移入outer
// outer-mouseover

// 鼠标从outer移入inner
// outer-mouseout -> inner-mouseover -> outer-mouseover

// 鼠标从inner移入outer
// inner-mouseout -> outer-mouseout -> outer-mouseover

// 鼠标移出outer
// outer-mouseout

mouseenter: 鼠标进入outer，触发outer的mouseenter事件 鼠标从outer离开进入inner，触发inner的mouseenter事件，此事件不会冒泡 鼠标从inner离开进入outer，触发inner的mouseleave事件，此事件不会冒泡 鼠标从outer离开，触发outer的mouseleave事件

打印结果如下：

// 鼠标进入outer
// outer-mouseenter

// 鼠标从outer进入inner
// inner-mouseenter

// 鼠标从inner进入outer
// inner-mouseleave

// 鼠标离开outer
// outer-mouseleave

事件委托

How JavaScript Event Delegation Works

关于事件委托，mdn的介绍如下：

利用事件的冒泡机制，如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个节点单独设置事件监听器

一个很好的例子是一系列列表项，如果你想让每个列表点击时弹出一条信息，您可以将click单击事件监听器设置在父元素ul上，它将会冒泡到列表项上。

以下内容翻译自How JavaScript Event Delegation Works

在JavaScript世界中事件代理是热门话题之一，这是有充分理由的。事件代理允许你避免为所有指定的节点添加事件监听器，而是为它们的父元素添加事件监听器。这个事件监听器会分析事件冒泡用来在子元素中找到一个匹配项。基础概念相当地简单，但是许多人不理解事件委托是如何工作的。接下来让我们解释一下事件代理是如何工作的并且提供一个基础的事件委托的原生JavaScript的例子。

比如说我们有一个拥有一些子元素的父元素ul:

<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>

在每一个子元素被点击的时候，我们需要有一些事情发生。你可以为每一个li元素添加一个单独的事件监听器，但是如果li元素被频繁地从列表中移除和添加会怎么样呢？添加和移除事件监听器将会是一个噩梦，尤其是在你的应用内的不同位置添加和移除代码。更好的解决方法是为父元素ul添加一个事件监听器。但是如果你为父元素添加了事件监听器，你将如何知道哪一个元素被点击呢？

简单的：当事件冒泡到ul元素时，你可以检查事件对象的target属性来获得真实点击节点的引用。这里是一个用来举例说明事件委托非常基础的JavaScript代码片段：

// 获取元素，添加事件监听器
document.getElementById('parent-list').addEventListener('click', function (e) {
  // e.target 是被点击的元素
  // 如果它是一个列表项
  if (e.target && e.target.nodeName === 'LI') {
    // 找到点击的列表项，输出id
    console.log('List item', e.target.id.replace('post-', ''), 'was clicked');
  }
});

通过为父元素添加一个事件监听器开始。当事件监听器被触发的时候，检查事件元素来确保它是响应元素的类型。如果它是一个LI元素的话，我们便得到了我们需要的元素。如果它不是我们想要的元素，事件将会被忽略。这个例子特别简单--直接比较UL和LI即可。让我们尝试一些更困难的。如果说我们有一个拥有许多子元素的父DIV,但是我们关心的只有拥有classA类名的A标签：

// 获取父div,添加事件监听器...
document.getElementById('myDiv').addEventListener('click',function(e) {
  // e.target 是点击元素
  if(e.target && e.target.matches('a.classA')) {
    console.log("Anchor element clicked")
  }
})

使用Element.matches API,我们可以判断元素是否匹配我们想要的目标。

如果元素可以被指定的 CSS选择器字符串选择到， Element.matches()方法返回 true;否则返回 false

由于大部分开发者为他们的DOM元素和事件处理使用JavaScript库，我推荐使用库提供的事件代理方法，因为他们有能力做高级的代理和元素识别。

希望这篇文章能够帮助你直观的理解事件委托背后的概念并且使你相信事件委托的力量。

锦宁
关注
详解javascript中的事件处理
10-23
在Web开发中，JavaScript的事件处理是实现用户交互的核心技术之一。事件，是指在浏览器环境中发生的各种各样的动作，例如用户的点击、按键、鼠标移动等。对于这些动作，我们可以编写相应的事件处理函数来进行响应。 ...
详解Javascript事件驱动编程
10-23
JavaScript的事件驱动编程是一种基于事件处理的编程范式，它的核心概念是程序不是一直主动运行，而是在等待某些事件发生（例如用户的点击、键盘输入等），在事件发生时触发预先编写好的函数来响应。 1. 事件驱动...
JavaScript click事件深入
精彩人生
03-02 527
获得事件 要获得事件对象（也即event对象），我们可以在事件响应函数中使用如下代码： function clickFunc(e){ var evt = e || window.event} 《ppk谈JavaScript》一书介绍了代码的原理：W3C标准兼容的浏览器，事件将会作为第一个参数被传入函数中，也就是上面函数的参数e；微软的IE中，事件将会被存储在全局变量window.event
click事件在什么时候出发_超全的js事件机制&事件委托
weixin_35879989的博客
12-28 348
超全的js事件机制&事件委托，想要理解js事件只需认真看完此篇即可~目录结构：什么是事件机制事件冒泡事件捕获DOM事件流事件委托误区在同一个对象上注册事件，并不一定按照注册顺序执行event.stopPropagation();就是阻止事件的冒泡return false;阻止默认行为拓展stopImmediatePropagation 的使用setCapture 和 releaseCapt...
3、vue.js v-on绑定事件 点击时间
qq_19484091的博客
04-28 1115
HTML 部分代码 <div id="div_id"> <!-- 点击方法 --> <button v-on:click="fangfa"></button> <!-- 内联语句 --> <button v-on:click="fangfa('111')"></button> <!-- 缩写...
时间绑定和事件监听！
weixin_30374009的博客
09-30 90
一般在网页上回有不少节点的数据是根据数据库进行更新的，这种节点都是由js代码控制动态生成的，那么绑定各种事件比如点击事件的代码块会比生成节点的代码块先执行，那后生成的节点就不会被绑定上事件，这时候需要用刀监听的方法； 比如 jQuery中$('el').click()这个方式就是事件绑定， 而$('el').on('click',function(){}) 就是事件监听； 转载于:https:/...
JavaScript学习笔记（十五）Event事件（上）_js onclick event
m0_59117112的博客
04-17 695
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。(img-J7ZgnLBn-1713334295958)]相对于浏览器窗口你点击的坐标点。
JavaScript onclick事件使用方法详解
11-20
JavaScript中的`onclick`事件是网页交互的核心组成部分，它允许开发者定义当用户点击DOM元素时执行的特定功能。本文将深入探讨`onclick`事件的工作原理、使用方法以及几个实用示例。 `onclick`事件是一个内联事件...
Vue的click事件防抖和节流处理详解
10-16
接着，我们看一下在Vue中如何实现click事件的防抖处理。在Vue的原型上，我们可以扩展$on方法，增加防抖的功能。具体实现时，我们需要用到JavaScript的闭包和setTimeout函数。我们将原有的事件处理函数包装起来，使用...
javaScript - Event
chang_jie_518的博客
05-16 326
DOM中存在大量的事件，现在我们将在事件模型中对事件进行充分的认识。并且如果我们想要得知一个事件被触发后的一些相关信息，比如：事件发生的元素、键盘按键的状态、鼠标的位置等等信息，那么就需要用到就要从Event对象下去获取这些信息12.01 - 事件模型事件接口on-*属性通过标签下的on-属性我们可以给DOM绑定事件示例代码&lt;!-- 标签属性 --&gt; &lt;div id="box" ...
onclick 事件
u013281994的博客
04-14 418
onclick 事件 onclick 事件会在对象被点击时发生。 请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。 ①onclick="javascript:window.location.href='URL'" 　　②onclick="location='URL'" 　　③onclick="window.l...
半小时带你全面理解 JavaScript 事件机制
weixin_43044226的博客
07-03 1057
简介 事件是由用户或浏览器本身发起的发生在浏览器中的动作。以下示例为发生在网站上的一些常见事件： 页面完成加载 用户点击按钮 用户将鼠标悬停在下拉菜单上 用户提交表单 用户按下键盘上的键 通过编写执行事件的JavaScript响应代码，开发人员可以向用户显示消息、验证数据、对按钮单击做出反应以及许多其他操作。 本文将介绍事件处理程序、事件侦听器和事件对象。还将介绍三种不同的方式来处理事件，以及一些最常见的事件。了解事件可以帮助开发人员为用户提供更具交互性
click事件和onclick事件的区别
laomadawei的博客
06-14 8071
1，click事件的api解释（jquery中）返回值:jQueryclick([[data],fn])概述触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。参数fnFunctionV1.0在每一个匹配元素的click事件中绑定的处理函数。[data],fnString,FunctionV1.4.3data:click([Data], fn) 可传入data供函...
前端JavaScript篇之常见事件
星辰迷上大海的博客
03-13 1475
JavaScript中的事件是指用户与网页元素交互时所触发的动作或者状态变化。这些事件可以包括点击、悬停、键盘输入、页面加载等。
JS事件处理程序中的event
csdssdn的博客
05-18 1031
目录 Event对象 获取event对象 隐藏在监听函数中的"event" event. preventDefault() event.stopPropagation() & event.stopImmediatePropagation() 1. event.stopPropagation() 方法 2. stopImmediatePropagation()方法 event.target & event.currentTarget 事件代理 Event对象 Event.
关于JS 事件冒泡和onclick,click,on()事件触发顺序
weixin_30889885的博客
06-30 578
今天在给JQgrid中的标签添加click事件的时候，发现一个问题。 JQgrid的table中，点击任何位置，都会勾选点击行的checkbox，而我希望在点击我的标签的时候，不要勾选checkbox。 查看JQgrid源码，发现它的click事件是绑定到了table上，然后判断事件点击目标，找到选中行给它勾选；而我的click事件是绑定到td里面的div中。 按照事件冒泡的触发顺序，应该是...
JavaScript中的点击事件
北辰
05-23 5100
1.自动触发一个元素的点击事件 $('#btn').click(); 2.为某个元素添加点击事件：推荐使用第一种 第一种方式：使用JQuery，为其绑定点击事件 <body> <p>我是苹果</p> <p>我是橘子</p> <p>我是菠萝</p> </body> ...
JavaScript学习笔记（十五）Event事件（上）_js onclick event(1)
最新发布
2401_84254087的博客
04-28 908
console.log(e.X轴坐标点信息)console.log(e.Y轴坐标点信息)相对于浏览器窗口你点击的坐标点。相对于页面你点击的坐标点。点击按键信息（了解）
js click事件 addEventListener 传参（event）
jingkai0714的博客
11-07 3033
就算是传参数在也不用在绑定事件的时候写（event） 注意这里是在vue中写的 所以有一个this指向问题 在箭头函数里 this指向的是document 这里赋值给that 在解绑的时候也不要写（event） 第三个参数是控制是否冒泡的 clickevent(event) { //const playbox = document.getElementsByClassName("PlayBox")[0]; //const boxindex = event.path.fin.
JavaScript鼠标事件详解：从mousedown到contextmenu
"这篇文档主要总结了JavaScript中的鼠标事件，包括了8个常见的鼠标事件，如mousedown、mouseup、click、dblclick、contextmenu、mouseover、mouseout以及mousemove，并通过示例代码解释了这些事件的用法和顺序关系。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值