如何给js动态创建的dom添加事件

如何给js动态创建的dom添加事件,第1张

 function addElementDiv(obj) {

var parent = document.getElementById(obj)

//添加 div

var div = document.createElement("div")

//设置 div 属性,如 id

div.setAttribute("id", "newDiv")

div.innerHTML = "js 动态添加div"

parent.appendChild(div)

div.bind('click', function(event) {

alert("我已被动态绑定事件")

})

})

}

在页面加载结束后,浏览器会通过js为dom元素添加事件。原生的js中使用 window.onload 方法在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行 *** 纵并调用执行它所绑定的函数。

那么它和window.onload有何不同呢?

window.onload是在网页中所有元素 加上所有资源 ++完全加++载到浏览器后才执行。

而$(document).ready()中绑定的事件是在 dom完全就绪 时就可以被调用,此时对于jQuery来说都是可以被访问的(关联的资源可能并没有被加载完毕)。

举个例子来说,在$(document).ready()中定义了图片的宽高,但由于此时图片还没有被加载完毕,此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load ()方法。

load()方法会在元素的onload事件中绑定一个处理函数,如果该处理函数绑定给window对象,则会在所有资源加载完毕后触发,如果load绑定在元素上则会在该元素加载完毕后触发。

既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢?

window.onload事件 每次只能保存对一个函数的引用 ,他会覆盖掉之前的函数,所以不能再现有行为上添加新的行为。如果引用了多个js文件,每个都需要window.onload方法就导致编码复杂。

使用$(document).ready()方法能够很好地解决这种问题,每次调用$document.ready()方法都会在现有行为上追加新的行为,这些行为会根据注册顺序依次执行。

1.

直接在Dom元素上

onclick某个js函数等等

2.document.getElementById()

,document.getElementByName()等等

3.$("#id").click()

,$(".class").click()

等等

去看看jquery吧,会明白的。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11722839.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存