如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
当前回答
由于onload事件仅在少数元素上受支持,因此必须使用另一种方法。
你可以使用MutationObserver:
const trackElement = element => { let present = false; const checkIfPresent = () => { if (document.body.contains(element)) { if (!present) { console.log('in DOM:', element); } present = true; } else if (present) { present = false; console.log('Not in DOM'); } }; const observer = new MutationObserver(checkIfPresent); observer.observe(document.body, { childList: true }); checkIfPresent(); return observer; }; const element = document.querySelector('#element'); const add = () => document.body.appendChild(element); const remove = () => element.remove(); trackElement(element); <button onclick="add()">Add</button> <button onclick="remove()">Remove</button> <div id="element">Element</div>
其他回答
我们可以使用MutationObserver来有效地解决这个问题,添加下面的示例代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#second{
position: absolute;
width: 100px;
height: 100px;
background-color: #a1a1a1;
}
</style>
</head>
<body>
<div id="first"></div>
<script>
var callthis = function(element){
element.setAttribute("tabIndex",0);
element.focus();
element.onkeydown = handler;
function handler(){
alert("called")
}
}
var observer = new WebKitMutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++)
if(mutation.addedNodes[i].id === "second"){
callthis(mutation.addedNodes[i]);
}
})
});
observer.observe(document.getElementById("first"), { childList: true });
var ele = document.createElement('div');
ele.id = "second"
document.getElementById("first").appendChild(ele);
</script>
</body>
</html>
试试这个。
. getelementbyid (" div ")。onload = alert("This is a div."); <div id="div">Hello World</div>
试试这个。你需要移除。从oQuickReply.swap()使函数工作。
. getelementbyid (" div ")。onload = oQuickReplyswap(); 函数oQuickReplyswap() { 警报(“Hello World”); } < div id = " div " > < / div >
您可以如下所示附加一个事件侦听器。当选择器#my-id的div完全加载到DOM时,它就会触发。
$(document).on('EventName', '#my-id', function() {
// do something
});
在本例中,EventName可以是'load'或'click'
https://api.jquery.com/on/#on-events-selector-data-handler
我需要在插入一段html(模板实例)之后运行一些初始化代码,当然我无法访问操作模板和修改DOM的代码。通过插入html元素(通常是<div>)来对DOM进行任何部分修改,也适用同样的想法。
前一段时间,我做了一个黑客与一个几乎不可见的<img>包含在<div>的onload事件,但发现一个作用域,空风格也会做:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>
更新(2017年7月15日)- IE上一个版本不支持<style> onload。Edge确实支持它,但一些用户认为这是一个不同的浏览器,并坚持使用IE。<img>元素似乎在所有浏览器上都能更好地工作。
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>
为了最小化图像的视觉影响和资源使用,可以使用内联src来保持图像的小而透明。
关于使用<script>,我觉得我需要做的一个评论是,确定脚本靠近哪个<div>是多么困难,特别是在模板中,你不能在模板生成的每个实例中都有相同的id。我想答案可能是文件。但这不是普遍支持的。<script>元素不能可靠地确定自己的DOM位置;引用“this”指向主窗口,没有任何帮助。
我认为有必要满足于使用<img>元素,尽管它很愚蠢。这可能是DOM/javascript框架中的一个漏洞,需要加以弥补。
不,你不能。使其工作的最简单的方法是将函数调用直接放在元素之后
例子:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...
或者-甚至更好-就在</body>前面:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>
...因此它不会阻止以下内容的加载。