首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在vanila JS上绑定DOM加载后创建的div并在上面添加事件?

在vanilla JS中,可以使用事件委托的方式来绑定DOM加载后创建的div并在上面添加事件。事件委托是一种将事件处理程序绑定到其父元素上,以便在子元素触发事件时捕获并处理事件的方法。

具体步骤如下:

  1. 在父元素上绑定事件处理程序,监听目标事件(例如click事件)。
  2. 在事件处理程序中,通过事件对象的target属性获取触发事件的元素。
  3. 判断该元素是否为目标div,如果是,则执行相应的操作。

以下是一个示例代码:

代码语言:txt
复制
// 获取父元素
const parentElement = document.getElementById('parent');

// 绑定事件处理程序
parentElement.addEventListener('click', function(event) {
  // 判断触发事件的元素是否为目标div
  if (event.target.matches('.dynamic-div')) {
    // 执行相应的操作
    console.log('点击了动态创建的div');
  }
});

// 动态创建div
const dynamicDiv = document.createElement('div');
dynamicDiv.classList.add('dynamic-div');
dynamicDiv.textContent = '动态创建的div';

// 将div添加到父元素中
parentElement.appendChild(dynamicDiv);

在上述示例中,我们通过事件委托的方式,在父元素上绑定了click事件处理程序。当点击父元素中的任何一个div时,事件会冒泡到父元素,并被父元素的事件处理程序捕获。然后我们通过判断触发事件的元素是否为目标div,来执行相应的操作。

这种方式的优势在于,无论何时动态创建的div被添加到父元素中,都可以正常地绑定事件,而不需要为每个div单独绑定事件处理程序。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,无法提供相关链接。但腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架核心概念与高级特性(2W字小白教程)

' // Vue实例中定义数据 } }); 在上面的代码中,我们引入了Vue.js并在HTML文件中创建了一个具有"Hello...然后,我们通过创建一个Vue实例,将数据message绑定DOM元素中插值语法{{ message }}。当Vue实例创建并运行时,"Hello World"将被渲染到页面上。...指令以响应式方式与Vue实例数据进行绑定,当数据发生变化时,相应DOM操作也会自动更新。 v-bind指令 v-bind指令用于将Vue实例数据绑定DOM元素属性。...-- 绑定src属性 --> v-on指令 v-on指令用于监听DOM事件并在事件触发时调用Vue实例中方法...Vue常用指令与事件 Vue中,指令(Directives)是特殊标签属性,用于添加特定行为和功能。指令以v-开头,并在属性值中使用表达式来动态绑定数据。

1.9K20

一天梳理完react面试高频知识点

key可以帮助 React跟踪循环创建列表中虚拟DOM元素,了解哪些元素已更改、添加或删除。每个绑定key虚拟DOM元素,兄弟元素之间都是独一无二。...但是,有一个办法可以把这个算法复杂度降低。那就是在生成一个节点列表时给每个节点添加一个key。这个key只需要在这一个节点列表中唯一,不需要全局唯一。...启动虛拟机cmd中输入 adb devices可以查看设备。我现在有一个button,要用react在上面绑定点击事件,要怎么做?...这个问题就设计到了数据持久化, 主要实现方式有以下几种:Redux: 将页面的数据存储redux中,重新加载页面时,获取Redux中数据;data.js: 使用webpack构建项目,可以建一个文件...,data.js,将数据保存data.js中,跳转页面获取;sessionStorge: 进入选择地址页面之前,componentWillUnMount时候,将数据存储到sessionStorage

1.3K30
  • 【Java 进阶篇】JavaScript 与 HTML 结合方式

    1.3 异步和延迟加载 可以通过添加async或defer属性来改变脚本加载方式: async:脚本将异步加载,不会阻止HTML解析。脚本将在下载完成立即执行,不保证执行顺序。...-- 页面内容 --> 在上面的示例中,script1.js将立即异步加载,而script2.js将在HTML解析完毕按顺序执行。 2....HTML 事件处理 JavaScript与HTML结合一个关键方面是事件处理。事件处理使你能够对用户在网页交互作出响应。...onload:文档加载完成时触发。 你可以使用内联方式或外部文件方式添加事件处理程序。以下是一个使用内联方式示例: <!...; }); 在上面的示例中,我们使用addEventListener方法来绑定单击事件处理程序。 3.

    67340

    JavaScript之共享onload

    我们知道,当我们将JS代码脚本放到标签之间时,这是的js代码加载要先于DOM加载,而我们往往会在JS代码脚本中写一些获取DOM元素代码,而此时DOM是不完整, 所以我们通常解决方法是将函数放入到...window.onload里面去,window.load事件是网页加载完毕时会触发一个事件,如果将我们函数与之绑定,我们函数也会在页面加载完毕之后执行....id="target"> 这段代码浏览器执行时就会报错,aa is null;因为js获取id=targetdiv时,该div还没有加载完毕。...="Div1"> 这个时候任然会报错:dd id null;错误原因和上面一样; 解决办法有两个: 1、将需要绑定window.onload事件两个函数写到一个匿名函数里面...} else { //如果window.onload事件已经绑定了函数,则在原来基础,继续添加函数 window.onload

    80880

    JavaWeb Day11 Vue快速入门

    学习了 VUE ,部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢?...==之前我们是将关注点放在了 DOM 操作;而要了解 MVVM 思想,必须先聊聊 MVC 思想,如下图就是 MVC 思想图解 MVC 思想是没法进行双向绑定。...例如:v-if,v-for… 常用指令有: 指令 作用 v-bind 为HTML标签绑定属性值,如设置 href , css样式等 v-model 表单元素创建双向数据绑定 v-on 为HTML标签绑定事件...1.5.2 查询所有功能 brand.html 页面引入 vue js文件 创建 Vue 对象 Vue 对象中定义模型数据...id="app"> ,指定该 div 标签受 Vue 管理 将 body 标签中所有的内容拷贝作为上面 div 标签中 删除表格多余数据行,只留下一个 表格中数据行使用 v-for

    3.8K50

    jQuery

    原生DOM写法就是写JS代码,而以后我们多数都用jQuery来写,因为jQuery优势很多,看上面,并且查找标签方式有很多,比原生DOM丰富多,很便利,还有重要一点就是不需要考虑浏览器兼容性...script> //冒泡意思就是因为html可以嵌套,如果你给儿子标签绑定了点事件或者没有绑定点击事件,父级标签绑定了点击事件,那么你一点击子标签,不管子标签 有没有绑定事件,都会触发父级标签点击事件...})     pycharm一个功能: 事件委托     事件委托是通过事件冒泡原理,利用父标签去捕获子标签事件,将未来添加进来某些子标签自动绑定事件...示例:     表格中每一行编辑和删除按钮都能触发相应事件。回去完善一下咱们上面的那个作业吧,添加一行数据那个作业,然后我们在学习一下上面的那些绑定事件。...,所以写在body标签最下面是一种解决办法,还有一种办法就是window.onload=function(){js代码},等页面上所有的元素都加载完,执行这里面的js代码,还记得吗?

    8.9K20

    Vue 【前端面试题】

    beforeCreate(创建前) 在数据观测和初始化事件还未开始 created(创建) 完成数据观测,属性和方法运算,初始化事件,$el属性还没有显示出来 beforeMount(载入前) 挂载开始之前被调用...updated(更新由于数据更改导致虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM操作。...答:它可以总共分为8个阶段:创建前/, 载入前/,更新前/,销毁前/销毁。 第一次页面加载会触发哪几个钩子?...我们 vue 项目中主要使用 v-model 指令表单 input、textarea、select 等元素创建双向数据绑定,我们知道 v-model 本质不过是语法糖,v-model 在内部为不同输入元素使用不同属性并抛出不同事件...有没有使用过? Vue.js 是构建客户端应用程序框架。默认情况下,可以浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM

    3.3K21

    25个常规方法优化你jquery代码

    它节省了你服务器带宽,能够很快从Google内容分布网络(CDN)加载JS类库。更重要是,如果用户访问那些发布Google Code站点它会被缓存下来。 这样做很有意义。...如果你向DOM添加了新元素,尽管这些新元素被选择器所匹配,但是这些新元素并不会绑定事件处理(你同意我观点吗?),因此不会有事件发生。 ...当使用事件代理时,你能够事件DOM绑定仍然可以添加多个被匹配元素到其中,而它们同样能够正常工作。 13. 利用classes存储状态 这是html中存储信息最基本方法。...精简你HTML并在页面加载修改它 这个标题可能没有多大意思,但是这个技巧可能理顺你代码、减小代码体积和页面的下载时间、有助优化你搜索引擎。...有些时候你会注意到点击链接锚点会跳转到页面上部。  所有你要做就是阻止它默认行为,或者实际你可以把”return false;”添加到任何事件默认行为

    1.6K10

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    两者区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到);而 ng-bind 则是 Angular 渲染完毕将数据显示...angular 会因为这个事件回调函数什么都没做就不进行脏检查吗?不会。 然后:#span1 被隐藏掉了,会检查绑定在它上面的表达式吗?尽管用户看不到,但是 $scope....结构创建好,然后整体添加到主文档中,这个DOM变更就会一次完成,性能会提高很多。...避开了所谓 child scope 原型继承带来一些问题(原来别名ctrl就是定义$scope一个对象,这就是controller一个实例,所有JS中定义controller时绑定到this...无论定义controller时有没有直接依赖$scope,DOMscope是始终存在。即使使用controller as,双向绑定还是通过$scopewatch以及digest来实现

    7.8K40

    React教程(详细版)

    ,所以这里就能看出jsx好处了,其实babel将jsx转换代码就相对于用原生js那样,只不过这些不用你写,babel帮你转换 2.1.2、 关于创建虚拟dom 本质其实就是一个object...构造函数中this永远指向该组件实例对象,所以=右侧意思就是该组件实例对象自身此时还没有该方法,他就会去原型对象有没有,显然这里是有的,然后调用bind方法,该方法做两件事,一、创建一个新函数...①将自定义函数改为表达式+箭头函数形式(推荐) ②构造器中用bind()强制绑定this 3.3.2、 props props就是调用组件时候组件中添加属性传到组件内部去使用 简单demo...PropTypes from ‘prop-types’ 构造器问题 构造器仅用于以下两种情况: 通过this.state赋值对象来初始化内部state 为事件处理函数绑定实例(就是上面的this.changeWeather...第一次是将原先实例属性清空,传入是null,第二次再把当前节点传如赋值给组件实例input1属性,这个一般开发过程中无关紧要,所以大家知道下有这个情况就可以了,当然它也有解决办法:通过将ref回调函数定义成类绑定函数方式

    1.7K20

    :第二章 - 常见指令使用

    例如,在下面的例子中,我们模拟将网页加载速度变慢,此时就可以看见,页面最先开始会显示出插值表达式,只有 vue.js 加载完成,才会渲染成正确数据。...4、 v-on   传统前端开发中,当我们想对一个按钮绑定事件时,我们需要获取到这个按钮 dom 元素,再对这个获取到 dom 进行事件绑定。...我们学习 vue 过程中,我们可以秉持一个思想,对于 dom 操作,全部让 vue 替我们完成,我们只关注业务代码实现,因此,我们可以使用 vue 内置 v-on 指令来替我们完成事件绑定。...这里可以使用 window.vm 获取到 vue 实例,则是因为我们之前引入 vue.js ,会自动浏览器内存中创建 vue 对象,我们通过构造函数创建 vue 实例也就存在与浏览器内存里了。...我们知道,只有表单元素可以与用户进行交互,所以我们只能使用 v-model 指令表单控件或者组件创建双向绑定。对于组件双向绑定,我们也会在后面的学习中提到。

    1.2K10

    一个 Vue 页面的内存泄露分析

    ); }); 因为这里事件绑定形成了一个闭包,this/$photoList这两个变量一直没有被释放,this是指向ImageLazyLoader实例,而$photoList是指向DOM结点,当清除掉一页数据时候...同时事件执行过程合适时机自动把事件给解绑了,上面是判断如果所有的图片都展示出来了那么就没必要监听scroll事件了直接解绑了。这样就能解决内存泄露问题了,能够触发自动垃圾回收。...它会提示你是homework-web.vue这个文件有一个getScale函数绑定在了window上面,查看一下这个文件确实是有一个绑定: mounted () { window.addEventListener...最后div还剩下3个有distance: ? 其中两个是jq$.support.boxSizingReliable,是jq用来检测boxszing是否可用创建div: ?...DOM相关内存泄露通常也是因为闭包和事件绑定引起。绑了(全局)事件之后,不需要时候需要把它解绑。当然直接绑在div上面的可以直接把div删了,绑在它上面事件就自然解绑了。

    4K30

    jQuery

    jQuery基本使用 入口函数 // $('div').hide(); // 1.等着页面DOM加载完毕再去执行js代码...//DOM加载完成入口 }) jQuery顶级对象:$ `是jQuery 别称,代码中`和jQuery和等价,为了方便都是$。...}) 例如: $(“div”).click(function(){ //事件处理程序 }) ---- jQuery 事件处理 1.事件处理 on() 绑定事件匹配元素绑定一个或多个事件事件处理函数...; }); 注意:事件委派现在大多采用⬆️这种写法: 优势在于当动态创建元素时,可以动态自动为其绑定事件 例如:ol里添加li并动态绑定事件 $("ol").on("click", "li", function...(也可以把绑定事件on()改为one()表示事件只触发一次) $("p").off(); // 解绑p元素所有事件处理程序 $("p").off( "click"); // 解绑p元素上面的点击事件

    21.1K50

    React基础(7)-React中事件处理

    这个时候就需要用事件实现了 原生JS操作DOM中,往往有如下方式 内联方式(HTML中直接事件绑定) 直接绑定...那么本篇就是你想要知道 React中事件 React中事件绑定是直接写在JSX元素,不需要通过addEventListener事件委托方式进行监听 写法: JSX元素添加事件,通过...on*EventType这种内联方式添加,命名采用小驼峰式(camelCase)形式,而不是纯小写(原生HTML中对DOM元素绑定事件,事件类型是小写),无需调用addEventListener进行事件监听...,针对this绑定,将事件处理函数绑定到当前组件实例:以获取到父组件传来props 以下几种方式可以确保函数可以访问组件属性 构造函数中绑定 constructor中进行this坏境绑定,...,加载,实时搜索,对DOM元素频繁操作,请求资源加载等耗性能操作,可能导致界面卡顿,浏览器奔溃,页面空白等情况 而解决这一问题,正是函数节流与函数防抖 函数节流 定义: 节约(减少)触发事件处理函数频率

    8.4K41

    jquery 获取所有的标签

    ,页面加载完成,jQuery会获取所有的标签,然后将所有标签名称展示页面上中。...实际前端开发中,有时我们需要对页面上特定类型标签进行操作,比如添加样式、绑定事件等。通过使用jQuery获取所有标签,我们可以更灵活地处理页面中元素。...示例代码:获取所有的标签并添加点击事件以下示例中,我们将获取页面中所有的标签(即超链接标签)并为其添加一个点击事件,当用户点击某个超链接时,页面将弹出该超链接地址。...:' + link); }); }); 在上面的示例中,页面加载完成,jQuery会选取所有的标签,并为其添加一个点击事件...动态性: 可以通过DOM进行实时内容更新、添加、删除,使得页面内容可以根据用户交互或其他事件动态变化。平台无关性: DOM是与平台和编程语言无关API,可以各种环境和语言中使用。

    10610

    React学习(七)-React中事件处理

    这个时候就需要用事件实现了 原生JS操作DOM中,往往有如下方式 内联方式(HTML中直接事件绑定) 直接绑定...那么本篇就是你想要知道 React中事件 React中事件绑定是直接写在JSX元素,不需要通过addEventListener事件委托方式进行监听 写法: JSX元素添加事件,通过...on*EventType这种内联方式添加,命名采用小驼峰式(camelCase)形式,而不是纯小写(原生HTML中对DOM元素绑定事件,事件类型是小写),无需调用addEventListener进行事件监听...绑定,将事件处理函数绑定到当前组件实例:以获取到父组件传来props 以下几种方式可以确保函数可以访问组件属性 构造函数中绑定 constructor中进行this坏境绑定,初始化事件监听处理函数...,加载,实时搜索,对DOM元素频繁操作,请求资源加载等耗性能操作,可能导致界面卡顿,浏览器奔溃,页面空白等情况 而解决这一问题,正是函数节流与函数防抖 函数节流 定义: 节约(减少)触发事件处理函数频率

    7.4K40

    都快2020年,你还没听说过SvelteJS?

    组件被重渲染是因为Vitual DOM高效是建立diff算法,而要有diff一定要将组件重渲染才能知道组件新状态和旧状态有没有发生改变,从而才能计算出哪些DOM需要被更新。...,这时候我们试着改变输入框内容: 虽然输入框初始值是变量对应值,可是变量值并不会随着输入框改变而改变,也就是它们值没有”绑定起来“,要想实现双向数据绑定,我们可以给输入框添加一个监听事件...事件绑定 我们可以使用on关键字加事件名称给DOM添加事件监听器,以下代码将会监听input输入框input事件: ......代码更改完,你页面就可以录入新书并展示书列表了: 购物车功能 首先我们要为BookCard这个组件按钮添加一个点击事件:用户点击书本卡片按钮时候这本书会被加到购物车中。...React和Vue等框架自带runtime虽然会增加首屏加载bundle.js,可是当项目变得越来越大时候,框架runtimebundle.js里面占据比例也会越来越小,相反由于Svelte

    3.2K10

    Vue 使用中小技巧

    ,为了维护方便,我们自然希望子组件事件和状态由自己来维护,这样添加删除组件时候就不需要去父组件挨个修改 1.2 优化 这里使用了lodash节流throttle函数,也可以自己实现,这篇文章也有节流实现可以参考一下...mixin.js 中定义 resize 事件逻辑,且自动初始化,并在 destroyed 时候自动销毁事件~ 当然可以进一步优化一下,比如一个页面有多个图表的话,上面的实现就力有不逮了,这里需要重构一下...我们components文件夹添加一个叫 componentRegister .js文件,在这个文件里借助webpack动态将需要基础组件统统打包进来。...它可以通过 v-on="$listeners" 传入内部组件——创建更高层次组件时非常有用。...需要注意是,由于我们input并不是BaseInput这个组件根节点,而默认情况下父作用域不被认作 props特性绑定将会“回退”且作为普通 HTML 特性应用在子组件根元素

    1.2K10

    前端新宠 Svelte 带来哪些新思想?赶紧学起来!

    上面这几种情况,感觉多少都添加了点东西才能实现响应式数据功能(至少普通开发者开发时是这样)。...虽然现在 github Star 还不是很多,但也可以写些 demo 玩玩。 创建项目 开始之前,你需要在电脑安装 Node 环境。...JS output: Svelte 编译 JS 代码。 CSS output: Svelte 编译 CSS 代码。 REPL 界面右上角还有一个下载按钮。...暂无数据 {/each} 事件绑定 on:event 使用 on: 指令监听 DOM 事件,on: 后面跟随事件类型 语法: on:事件类型={事件名} 举个例子...但实际并非如此。上面的代码意思是 once 设定了只执行一次 toLearn 事件,并且只有一次 preventDefault 是有效

    4.2K20
    领券