如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></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>
其他回答
我有同样的问题，并试图让一个Div加载一个滚动脚本，使用onload或load。我发现的问题是，它总是在Div打开之前工作，而不是在Div打开期间或之后，所以它不会真正工作。
然后我想出了这个方法。
<body>
<span onmouseover="window.scrollTo(0, document.body.scrollHeight);"
onmouseout="window.scrollTo(0, document.body.scrollHeight);">
<div id="">
</div>
<a href="" onclick="window.scrollTo(0, document.body.scrollHeight);">Link to open Div</a>
</span>
</body>
I placed the Div inside a Span and gave the Span two events, a mouseover and a mouseout. Then below that Div, I placed a link to open the Div, and gave that link an event for onclick. All events the exact same, to make the page scroll down to bottom of page. Now when the button to open the Div is clicked, the page will jump down part way, and the Div will open above the button, causing the mouseover and mouseout events to help push the scroll down script. Then any movement of the mouse at that point will push the script one last time.
在2019年11月，我正在寻找一种方法来创建一个(假设的)onparse EventListener <元素>不采取onload。
(假设的)onparse EventListener必须能够在元素被解析时监听。
第三次尝试(最终解决方案)
我对下面的Second Attempt非常满意，但我突然想到，通过创建一个量身定制的事件，我可以让代码更短更简单:
let parseEvent = new Event('parse');
这是目前最好的解决方案。
下面的例子:
创建一个定制的解析事件 声明一个函数(可以在window中运行)。Onload或任何时间): 查找文档中包含data-onparse属性的任何元素 将解析EventListener附加到每个这些元素 将解析事件分派给每个元素以执行回调
工作的例子:
// Create (homemade) parse event let parseEvent = new Event('parse'); // Create Initialising Function which can be run at any time const initialiseParseableElements = () => { // Get all the elements which need to respond to an onparse event let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]'); // Attach Event Listeners and Dispatch Events elementsWithParseEventListener.forEach((elementWithParseEventListener) => { elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false); elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse; elementWithParseEventListener.removeAttribute('data-onparse'); elementWithParseEventListener.dispatchEvent(parseEvent); }); } // Callback function for the Parse Event Listener const updateParseEventTarget = (e) => { switch (e.target.dataset.onparsed) { case ('update-1') : e.target.textContent = 'My First Updated Heading'; break; case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break; case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break; case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <code><div></code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break; } } // Run Initialising Function initialiseParseableElements(); let dynamicHeading = document.createElement('h3'); dynamicHeading.textContent = 'Heading Text'; dynamicHeading.dataset.onparse = 'update-3'; setTimeout(() => { // Add new element to page after time delay document.body.appendChild(dynamicHeading); // Re-run Initialising Function initialiseParseableElements(); }, 3000); div { width: 300px; height: 40px; padding: 12px; border: 1px solid rgb(191, 191, 191); } h3 { position: absolute; top: 0; right: 0; } <h2 data-onparse="update-1">My Heading</h2> <h2 data-onparse="update-2">My Heading</h2> <div data-onparse="run-oQuickReply.swap()"> This div hasn't yet loaded and nothing will happen. </div>
第二次尝试
下面的第一次尝试(基于@JohnWilliams的聪明的空图像Hack)使用了硬编码的<img />并成功了。
我认为应该可以完全删除硬编码的<img />，只在检测后动态插入它，在一个需要触发onparse事件的元素中，像这样的属性:
data-onparse="run-oQuickReply.swap()"
事实证明，这确实非常有效。
下面的例子:
查找文档中包含data-onparse属性的任何元素 动态生成<img src />并将其添加到文档中，紧跟在每个元素之后 当呈现引擎解析每个<img src />时，触发onerror EventListener 执行回调并从文档中删除动态生成的<img src />
工作的例子:
// Get all the elements which need to respond to an onparse event let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]'); // Dynamically create and position an empty <img> after each of those elements elementsWithParseEventListener.forEach((elementWithParseEventListener) => { let emptyImage = document.createElement('img'); emptyImage.src = ''; elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling); }); // Get all the empty images let parseEventTriggers = document.querySelectorAll('img[src=""]'); // Callback function for the EventListener below const updateParseEventTarget = (e) => { let parseEventTarget = e.target.previousElementSibling; switch (parseEventTarget.dataset.onparse) { case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break; case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break; case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <code><div></code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break; } // Remove empty image e.target.remove(); } // Add onerror EventListener to all the empty images parseEventTriggers.forEach((parseEventTrigger) => { parseEventTrigger.addEventListener('error', updateParseEventTarget, false); }); div { width: 300px; height: 40px; padding: 12px; border: 1px solid rgb(191, 191, 191); } <h2 data-onparse="update-1">My Heading</h2> <h2 data-onparse="update-2">My Heading</h2> <div data-onparse="run-oQuickReply.swap()"> This div hasn't yet loaded and nothing will happen. </div>
第一次尝试
我可以建立在@JohnWilliams的<img src>黑客(在这个页面上，从2017年开始)——这是，到目前为止，我遇到的最好的方法。
下面的例子:
当呈现引擎解析<img src />时触发onerror EventListener 执行回调并从文档中删除<img src />
工作的例子:
let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger'); const updateHeading = (e) => { let myHeading = e.target.previousElementSibling; if (true) { // <= CONDITION HERE myHeading.textContent = 'My Updated Heading'; } // Modern alternative to document.body.removeChild(e.target); e.target.remove(); } myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false); <h2>My Heading</h2> <img id="my-heading-load-event-trigger" src />
当你从服务器加载一些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>
利用身体。通过属性(<body onload="myFn()“>…”)或者用Javascript绑定一个事件。这在jQuery中非常常见:
$(document).ready(function() {
doSomething($('#myDiv'));
});
这里有一个对我有用的技巧， 你只需要把你的div放在一个body元素中
身体< > <！——这里有些代码——> <body onload="alert('Hello World')"> < div > < / div > < /身体> <！——其他代码行——> < /身体>
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
