js中事件传递两种方式:冒泡与捕获。

一文大白话讲清楚javascript事件、事件模型、事件冒泡和捕获以及事件代理委托 一文讲大白话清楚javascript事件、事件模型以、事件冒泡和捕获以及事件代理委托 阅读详情

冒泡:内部元素的事件会先被触发,然后再触发外部元素

触发:外部元素的事件会先被触发,然后才会触发内部元素

1.addEventListener(event, function, useCapture);

document.getElementById("myDiv").addEventListener("click", myFunction, true);

注释:

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

useCapture默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

2.removeEventListener() 移除事件

document.getElementById("myDiv").removeEventListener("click", myFunction);

https://www.cnblogs.com/baiyangyuanzi/p/6627401.html

https://www.cnblogs.com/christineqing/p/7607113.html

快速玩转 Llama2!机器学习 PAI 最佳实践(一)—低代码 Lora 微调及部署 本实践将采用阿里云机器学习平台PAI-快速开始模块针对 Llama-2-7b-chat 进行开发。PAI-快速开始支持基于开源模型的低代码训练、布署和推理全流程,适合想要快速开箱体验预训练模型的开发者。 阅读详情

相关推荐

RK3568+XS9922B+Android11双模视频输入:CVBS与AHD兼容驱动开发实战

本文详细介绍了基于RK3568平台和XS9922B解码芯片,在Android11系统上开发支持CVBS与AHD双模视频输入的兼容驱动实战。内容涵盖硬件选型、内核驱动框架分析、双模信号自动识别与配置、视频通道切换实现及图像质量优化等关键技术点,为车载监控等需要兼容新旧摄像头的项目提供完整解决方案。

js777的博客 377

【前端面试】何为事件监听?

事件监听 addEventListener()方法,用于向指定元素添加事件句柄,它可以更简单的控制事件,语法为 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型(如 “click” 或 “mousedown”) 第二个参数是事件触发后调用的函数 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的 事件传递有两种方式,冒泡和捕获 事件传递定义了元素事件触发的顺序,如果你将P元素插入到div元素中,用

Milk~每天分享一点点,技术进步一点点 563

yolov5部署之七步完成tensorRT模型推理加速

目录前言step 1. 下载yolov5源码以及tensorrtx源码,并将yolov5s.pt转为.wts模型step 2. 确定并下载自己准备使用的CUDA版本。step 3. 根据自己的CUDA版本下载对应版本的cuDNN以及TensorRTstep 4. 根据自己使用的VS版本下载对应版本的OpenCVstep 5. 安装CUDAstep 6. 安装cuDNN、TensorRT以及验证TensorRT是否安装成功 前言     前段时间研究了Pytorch的环境配置,之后便从github上下载了yo

Christo的博客 4万+

冒泡传递和捕获传递

冒泡传递 当事件发生的时候,结构上存在有嵌套关系的元素,从内层到外层传递事件。在设置时,将addEventListener的第三个参数设置为false。例如: <body> <div class="a" style="background-color: red;"> <div class="b" style="background-color: green;"> <div class="c" style="background-color: bl

Cheris_LT的博客 434

OpenSceneGraph编译、安装、开发环境

详细描述WIndows 10下使用Visual Studio 2019编译OpenSceneGraph 3.6.5的操作流程

国产CAx(CAD/CAE/CAM)软件研发 8770

3DMax高效建模与人工智能:一场颠覆传统创作的效率革命

AI与3DMax的结合,不仅是工具效率的升级,更是一场创作范式的革命。从“手动雕刻”到“智能共生”,设计师的角色正从执行者转向决策者。正如网友所言:“AI不是替代人类,而是赋予凡人以神笔。”在这场变革中,唯有拥抱技术、深耕创意,方能在数字艺术的浪潮中立于潮头。参考文献与工具推荐技术原理:火星时代资讯《人工智能和三维建模》工具实测:哔哩哔哩《tyDiffusion 3dsMax应用》9、Tripo AI官网教育案例:原创论文《人工智能技术介入三维动画课程建设》

m0_46478534的博客 3009

事件冒泡机制

事件的传递:标准事件流

YY的博客 1397

国产麒麟系统下用Rider开发C#桌面应用:从环境配置到Avalonia UI实战

本文详细介绍了在国产麒麟系统上使用JetBrains Rider开发C#桌面应用的完整流程,重点讲解了Avalonia UI框架的实战应用。从环境配置、Rider安装到Avalonia项目创建和UI开发技巧,全面覆盖了在非Windows环境下进行C#开发的关键步骤和优化建议,助力开发者高效构建跨平台桌面应用。

weixin_27791839的博客 387

jquery点击内联触发外层事件,event.stopPropagation()和event.preventDefault()

阻止事件冒泡

qq_45904018的博客 807

ARM Cortex平台NEON指令集优化实战指南

本文为ARM Cortex平台开发者提供了一份全面的NEON指令集优化实战指南。文章从NEON的SIMD架构原理讲起,详细介绍了开发环境搭建、NEON内联函数与自动向量化两种核心编程方法、关键数据类型与指令,并通过图像饱和运算、矩阵乘法等实战案例,深入解析了性能调优技巧与常见避坑指南,旨在帮助开发者充分释放ARM处理器的并行计算潜力。

weixin_29162439的博客 259

物联网Node-Red开发教程-第6章 HTTP与Web服务

本章摘要(147字): 本章系统讲解了Node-RED中的HTTP节点应用,重点包括: 三大核心HTTP节点功能:http in(接收请求)、http response(返回响应)、http request(调用外部API) 详细演示了REST API开发流程,包括路径参数(req.params)处理和响应构造 提供了创建Hello World API、传感器数据接口等实用示例 涵盖HTTP方法特性、状态码设置及响应头配置等关键知识点 通过流程图和JSON配置直观展示节点连接方式,帮助快速掌握Web服务开发

shihui2003的博客 264

捕获与冒泡

捕获与冒泡

m0_37224632的博客 339

我的AI个人公司成立:基于Skills与Qwen大模型的智能问答平台实战开发+龙虾团队

微学AI推出数字员工矩阵,包含10个核心AI角色(总经理、秘书、工程师等),每个角色具备专属技能模块。系统采用FastAPI+Vue3技术栈,核心功能包括:基于SkillLoader的动态技能管理(支持脚本执行和文档加载)、WebSocket流式输出、多轮对话上下文管理。通过模块化架构实现AI自驱协作,可自主完成从需求分析到开发落地的全流程。项目亮点在于声明式技能配置和实时交互能力,打破传统办公壁垒,提升工作效率。

微学AI的博客 1623

【Javascript】事件的冒泡与捕获传递方式

事件有冒泡和捕获两种传递方式,冒泡传递方式先触发内部元素的事件,后触发外部元素的事件,捕获传递方式则相反。以下是测试代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>冒泡与捕获</title> </head> <...

十一月的肖邦 754

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

JavaScript中添加事件句柄

添加事件句柄的好处:html和JavaScript分离,可读性更强 添加鼠标事件句柄的方法: document.getElementById("id").addEventListener("click",fucntionName) 去除鼠标事件句柄的方法: element.removeEventListener("mousemove", myFunction) ...

世间迷途小书童 345

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

js 事件冒泡和事件捕获

介绍: 事件传递有两种方式:冒泡与捕获。 事件冒泡 :内部元素的事件会先被触发,然后再触发外部元素 例: &lt;body&gt; &lt;div id="maopao" style="background-color:red;height:100px;width:100px;padding:30px"&gt; &lt;div class="ma...

技术的搬运工 367

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

javascript的事件冒泡和事件捕获

事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 元素插入到 元素中,用户点击 元素, 哪个元素的 "click" 事件先被触发呢? 在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: 元素的点击事件先触发,然后会触发 元素的点击事件。 在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: 元素的

wangweiscsdn的博客 327

JavaScript 事件处理模型:冒泡&捕获

JS事件处理模型:(1)事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素即自底向上。(2)事件捕获:结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素即自顶向下。(3)一个对象的一个事件类型绑定一个处理函数只能遵循一个事件模型,但是若一个对象的一个事件类型绑定两个处理函数,那么触发顺序:先捕获,后冒泡。(4)取消冒泡。(5)阻止默认事件: 默认事件为浏览器通过HTML标签或DOM元素提供的一些功能性的性的默认行为。

Yuki_yuhan的博客 2827

深入理解JavaScript的事件冒泡与事件捕获

JavaScript中提供了很多操作DOM的API。事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分,可以用来处理事件。对于这个问题,在实际开发中,并不是非常重要,因为在工作中我们基本上不会直接操作DOM,为了高效一般都是通过Vue、React这些框架,所以关于事件处理程序的一些坑直接就被避免了!!!但是,多了解一点是没有坏处的,毕竟面试会考~

金鳞踏雨 5691

事件冒泡和捕获

事件冒泡和捕获

weixin_58155690的博客 6615

js事件目标查找方式,事件代理,e.target与e.currentTarget的区别,阻止冒泡与捕获,取消默认事件一次搞懂,看这个就够了

文章目录EventTarget 事件目标的查找方式(冒泡与捕获)冒泡与捕获:冒泡事件捕获事件:addEventListener(type,listener,useCapture) 简单分析:参数useCapture详解:冒泡与捕获的顺序:代码演示:事件代理机制利用事件冒泡完成事件代理机制:关于事件对象的知识点:e.target与e.currentTarget的区别:阻止冒泡与捕获为什么要阻止冒泡或捕获?阻止冒泡或捕获的方法event.stopPropagation()阻止冒泡:event.stopPropa

m0_46217225的博客 5540

事件冒泡与事件捕获详解

事件流 概念 首先,我们来了解一下什么是事件流。 事件流:当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播, 这个过程称之为事件流。 (当页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程称为事件流。) 分类 事件流可分为冒泡型事件流、捕获型事件流。 (1)事件冒泡:微软公司提出的,事件由子元素传递到父元素的过程叫做冒泡(false)。 查找事件(事件响应)的顺序:文本节点–>元素节点—>body—>html—>document(例如点击事件

星河梦~的博客 5049

js中的事件冒泡,事件捕获,默认事件

js中的事件传递方式有两种: 冒泡 和 捕获。 事件冒泡 js中事件会以冒泡的形式由内到外的向上传递。由最内层点击元素向外扩散到最外层元素,激活外层注册的相应事件,这就是事件冒泡。 事件冒泡是js语言中事件的传递过程,传递方式,我们会需要用到它来做一下事情,但有时它的存在也会影响我们的操作。 使用:事件代理(事件委托) 什么是事件代理:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,使用父元素来代理多个子元素的事件。 这样做可以减少DOM操作,减少事件的注册步骤,提升性能

lwx931449660的博客 1870

解释一下JavaScript的事件冒泡和事件捕获

当我们在开发前端应用程序时,经常会涉及到事件处理。JavaScript中的事件处理机制包括事件冒泡和事件捕获,这两种机制在处理用户交互时起着至关重要的作用。

有我更精彩的博客 1223

一文通JavaScript事件处理及高级应用(事件冒泡捕获、冒泡与捕获的区别、事件委托)

JavaScript的事件处理机制是现代Web应用的核心之一。理解事件的基本用法、事件冒泡和捕获的区别、事件委托的概念及其性能优化策略,对于开发复杂交互性网站至关重要。本文将全面讨论事件处理、事件冒泡捕获、自定义事件以及事件委托等内容,并结合实际应用场景深入探讨这些机制的最佳实践。

开源AI 专属 UI——papyrai-ui。《千界明彻录》(故事形式构建元思维)——胡说小说。更多思辨内容在公众号。 1413

浅谈js的事件机制,事件冒泡、事件捕获、事件代理(事件委托)

当你点击粉色的时候,首先会触发蓝色,然后再触发粉色(虽然绑定了两个事件,但是由于使用了event.stopImmediatePropagation()方法,所以就不会触发粉色盒子的其他事件了)。至于绿色不触发,是由于为粉色添加了阻止事件传播,所以不会向外层继续传播事件,也就是说绿色的是不会触发的。当你点击粉色的时候,首先会触发蓝色,然后再触发粉色(绑定了两个事件,就会打印两条数据)。至于绿色不触发,是由于为粉色添加了阻止事件传播,所以不会向外层继续传播事件,也就是说绿色的是不会触发的。

ajaxsync 1457
上一篇: 回流与重绘
下一篇: 盒子模型
JerryQuary
博客等级 码龄9年 24粉丝 20原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值