1、使用原生JS动态为动态创建的对象绑定事件

1-1、创建一个function，用来兼容IE8以下浏览器添加事件

function addEvent( el, type, fun) {
if ( el. addEventListener) {
el. addEventListener( type, fun, false);
} else if ( el. attachEvent()) {
el. attachEvent( ' on ' + type, fun, false);
} else {
return false;
}
}

1-2、使用JS创建对象，调用上面的方法

function append() {
var add = document. querySelector( " #add ");
add. addEventListener( ' click ', function () {
var body = document. querySelector( " body ");
var btn = document. createElement( ' button ');
btn. type = ' button ';
btn. innerHTML = " 确定 ";
btn. setAttribute( ' class ', ' btnClick ');
body. appendChild( btn);
addEvent( btn, ' click ', function () {
console. log( this. className);
});
});
}
append();

2、使用原生JS动态为动态创建的对象绑定事件

首先要明白浏览器在加载页面的时候是按顺序来加载的，这样以来就很清楚了，js动态添加dom以后，这些dom并没有绑定事件，这个时候最简单的一个办法就是：将绑定事件的方法封装到一个函数A中，在动态添加完dom以后立即执行一次函数A即可。

需要注意的是，在你可能同时需要添加许多的dom，不要添加一个就执行一次函数A，这样会增加浏览器的负载，你需要在所有dom添加完以后在执行函数A，例如你用一个for循环遍历dom组合并拼接成一个字符串，然后添加到某个父级dom里面，这个时候你需要在循环外添加一次就可以了。

function getClass( classname) {
return document. getElementsByClassName( classname);
}
getClass( ' btn ')[ 0]. onclick = function () {
addDom();
}
// 将点击事件封装为函数
function funA() {
for ( var i = 0; i < getClass( ' innerDiv '). length; i ++) {
getClass( ' innerDiv ')[ i]. onclick = function () {
alert( this. innerText);
}
}
}
// 将添加dom封装为函数
function addDom() {
var oldHtml = '';
for ( var j = 0; j < 6; j ++) {
oldHtml += ' <div class="innerDiv"> ' + j + ' </div> '
}
getClass( ' outerDiv ')[ 0]. innerHTML = oldHtml;
funA();
}
// 如果将函数A放在这里就不会起作用的
// funA();

2种js动态绑定事件方法相关推荐

  1. js动态绑定事件方法

    1.给对象绑定事件 var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); ...

  2. jQuery动态绑定事件或者原生js动态绑定事件

    说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...

  3. VUE v-for中 动态绑定事件方法

    今天做了一个菜单权限的功能,需要根据后台返回的菜单内容在前台用VUE展示,并且点击不同菜单按钮可以进入到不同的页面,所以这里要动态绑定不同的事件方法 一开始尝试过在v-on:click里直接写方法名的 ...

  4. 【js】三种JS截取字符串方法

    JS提供三个截取字符串的方法,分别是:slice(),substring()和substr() 使用一个参数 var stmp = "rcinn.cn";stmp.slice(3) ...

  5. 三种JS截取字符串方法

    转载: https://www.cnblogs.com/zccfun/p/6054533.html JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们 ...

  6. 三种JS截取字符串方法 slice(),substring()和substr()

    JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一 ...

  7. js 动态绑定事件 on click 完美解决绑定不成功

    动态绑定坑了多少人..... //绑定   $("ol").on("click","li a",function(){ ...   }) / ...

  8. html 点击事件阻止冒泡,js阻止事件冒泡的两种方法

    本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下 一.冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...

  9. js两种移除事件的方法

    在js的学习中,为元素添加事件是非常常见的 那么,下面我带大家了解一下js中移除事件的两种方法 <!DOCTYPE html> <html><head><me ...

最新文章

  1. Exchange2003-2010迁移系列之四，配置第一台Exchange CAS/HUB服务器
  2. 批量单变量求解 office wps 单变量求解比较
  3. Linux下的Nano命令
  4. Kotlin代码检查在美团的探索与实践
  5. 使用POI技术简单的将数据库中的数据读取出为Excel文件
  6. 如何保证进程间同步工作_冬季建房如何保证混凝土浇筑效果好，做好养护工作...
  7. 体验VSTS源代码管理之一
  8. 第九节: EF的性能篇(二) 之 Z.EntityFramework.Extensions程序集解决EF的性能问题
  9. Filter的基本用法一
  10. 中国机载预警雷达市场趋势报告、技术动态创新及市场预测
  11. Mozart Update 1(杯具额…)
  12. 有学问，还是牛逼啊！
  13. swift. 扩展类添加属性_IOS_Swift中用到extension的一些基本的扩展功能讲解，现有的类，结构或枚举类型的 - phpStudy...
  14. 微信小程序：事件传参
  15. 如何求解单边z变换_用单边Z变换解差分方程.ppt
  16. Effective C++ item 6
  17. 更换持续集成工具，从 Travis 到 Github Actions
  18. 2016届毕业设计（论文） 基本规范及档案袋封面填写要求
  19. 《指数基金投资指南》读书笔记_2022002
  20. Python与GIS

热门文章

  1. Java删除文件夹和文件（最经典普通的写法）
  2. PH15-7Mo是什么？
  3. 【IUI 2020】人在回路机器学习——Human-in-the-Loop AI in Government: A Case Study
  4. Android NFC开发概述
  5. 十一、MYSQL数据库备份还原
  6. Win11如果在桌面右击新建没有文本文档
  7. 代码规范：规范你我他
  8. GANerated Hands for Real-Time 3D Hand Tracking from Monocular RGB
  9. JS实现TTS语音播报
  10. 全面介绍144芯超高密度光纤配线箱！