给js动态创建的对象绑定事件

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

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

function addEvent(el, type, fn) { 
  if(el.addEventListener){
  el.addEventListener(type,fn,false)
  }else if(el.attachEvent()){
  el.attachEvent(‘on‘ + type,fn,false)
  }else{
  return false
}
}

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

function append(){
  var body=document.getElementsByTagName(‘body‘)[0];
  var btn=document.createElement(‘button‘);
  btn.type=‘button‘

  btn.innerHTML=‘确定‘

  addEvent(btn,‘click‘,function(){
  console.log(this.tagName)  //结果:BUTTON
})
body.appendChild(btn);
}

append() //执行append方法

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

  var btn = document.createElement(‘button‘)
  $(btn).attr("type","button")
  $(btn).html(‘确定‘)
  $(btn).click(function(){
    console.log(this.tagName)  //结果:BUTTON
  })
  $("body").append(btn)

时间: 2024-10-12 12:44:27

给js动态创建的对象绑定事件的相关文章

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

js 动态创建don对象学习

html部分 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <!--<link href="css.css" type="text/css"

js动态添加的html绑定事件

使用场景:网站上ul里面的li数据需要从后台数据查询出来即通过js添加数据.然后监听点击li点击事件. 添加数据代码: for(var i = 0; i < table.length; i++) { if(i === 0) { beforid = "role" + i; allrolestr += "<li class=\"roleli\" onclick=\"getroleclick(this)\" style=\&quo

js动态创建类对象

1.定义函数,函数中定义类对象 f1=function(){ //定义类 function Pannel(name){ this.name = name; this.print = function(){ console.info(this.name); }; } //扩展类方法成员 Pannel.prototype.show = function(){ alert(this.name); } //返回类 return Pannel; } 2.执行函数,获得类 Pannel = f1(); 3.

使用addeventlistener为js动态创建的元素添加事件监听

点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul></ul> <script type="text/javascript"> var num = 1; var u=document.querySelector("ul"); function addFunction(){ var l=docume

Jquery给动态生成的对象绑定事件

$(document).on("blur", ".Text1", function () { var index = this.id.replace('txtStandard', '') var item = $("#items" + index).html(); //获取验收项目 var productType = $("#Select1").val(); //产品类别 var fid = $("#FID"

用JS动态创建SVG元素并绑定事件

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("load", function () {

如何用js为动态生成的元素绑定事件

今天在开发项目的时候,需要为用js动态生成的元素绑定一个click事件,但是在页面加载之前,这个元素不存在,没法获取这个元素,然后为其添加事件.查阅jquery api 发现可以用on()事件(注意:新版本的jquery已经把live()去除,现在用on()),为动态生产的元素绑定事件,然后触发该事件执行.比如下面一个例子: 假设我们要给div动态添加的span绑定click事件形成如下结果 x //做法如下: ("#choose_result").on("click&quo

基于jquery的表格动态创建,自动绑定,自动获取值

最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表格.如下所示: 在实现过程中,开发人员经常采用如下方式来实现: 1)          在前台,通过js生成表格行的html字符串,然后通过jquery的after方法加到表格底部. 2)          在后台,读取数据库,然后生成表格的html字符串,然后传递给前台渲染 3)