如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
当前回答
如前所述,你不能在DIV上使用onLoad事件,而是在body标签之前使用它。
但如果你有一个页脚文件,并将其包含在许多页面中。最好先检查你想要的div是否在显示的页面上,这样代码就不会在不包含该div的页面上执行,从而加快加载速度并为应用程序节省一些时间。
所以你需要给那个DIV一个ID,然后做:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
其他回答
你不能在div上添加事件onload,但你可以在文档加载时添加onkeydown并触发onkeydown事件
$(函数() { $(“.ccsdvCotentPS”).trigger(“onkeydown”); }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script> <div onkeydown=“setCss( );”> </div>'
首先回答你的问题:不,你不能,不能直接这样做,就像你想做的那样。 也许现在回答有点晚,但这是我的解决方案,没有jQuery,纯javascript。 它最初是用来在DOM加载后和在keyup上应用一个调整文本区域大小的函数。
同样地,你可以用它来做一些(所有)div或只有一个,如果指定的话,像这样:
document.addEventListener("DOMContentLoaded", function() {
var divs = document.querySelectorAll('div'); // all divs
var mydiv = document.getElementById('myDiv'); // only div#myDiv
divs.forEach( div => {
do_something_with_all_divs(div);
});
do_something_with_mydiv(mydiv);
});
如果你真的需要在DOM加载后加载div,例如在ajax调用之后,你可以使用一个非常有用的hack,这很容易理解,你会发现它…working with-elements-before-the- DOM -is-ready....它说“在DOM准备好之前”,但它以同样的方式出色地工作,在ajax插入或js- appendchild -任何div之后。下面是代码,根据我的需要做了一些小更改。
css
.loaded { // I use only class loaded instead of a nodename
animation-name: nodeReady;
animation-duration: 0.001s;
}
@keyframes nodeReady {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
javascript
document.addEventListener("animationstart", function(event) {
var e = event || window.event;
if (e.animationName == "nodeReady") {
e.target.classList.remove('loaded');
do_something_else();
}
}, false);
我们可以使用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>
当你从服务器加载一些html并将其插入DOM树时,你可以使用DOMSubtreeModified,但它已弃用-所以你可以使用MutationObserver或只是直接在loadElement函数中检测新内容,这样你就不需要等待DOM事件
var ignoreFirst=0; var observer = (new MutationObserver((m, ob)=> { if(ignoreFirst++>0) { console.log('Element add on', new Date()); } } )).observe(content, {childList: true, subtree:true }); // simulate element loading var tmp=1; function loadElement(name) { setTimeout(()=>{ console.log(`Element ${name} loaded`) content.innerHTML += `<div>My name is ${name}</div>`; },1500*tmp++) }; loadElement('Michael'); loadElement('Madonna'); loadElement('Shakira'); <div id="content"><div>
Onload事件,它只支持下面列出的几个标签。
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
这里是onload事件的引用