onload요소에 이벤트를 어떻게 추가 합니까?
사용해도 되나요:
<div onload="oQuickReply.swap();" ></div>이것을 위해?
div요소는 "로드"되지 않습니다.
답변:
아냐, 못해 작동시키는 가장 쉬운 방법은 요소 바로 뒤에 함수 호출을 넣는 것입니다.
예:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...또는 훨씬 더 나은 것 </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>... 따라서 다음 내용이로드되는 것을 차단하지 않습니다.
</body>. <div>자바 스크립트가 활성화 된 경우에만 숨기고 싶지만 "깜박임"은 피하십시오. 가시성 시간은 브라우저가 모든 인라인 / 외부 스크립트를로드 / 파싱하는 데 걸리는 시간에 따라 다릅니다.
onload
onload이벤트에만 사용할 수 있습니다 document(body)자체, 프레임, 이미지, 스크립트. 즉, 본문 및 / 또는 각 외부 리소스 에만 연결할 수 있습니다 . div는 외부 리소스가 아니며 본문의 일부로로드되므로 onload이벤트가 적용되지 않습니다.
onload가 아니므 <script>로 srcHTML 속성 없이는 작동하지 않습니다 (인라인 스크립트에서이 조언을 사용하려고 시도했지만 작동하지 않는 것으로 나타났습니다)
onload 이벤트는 아래 나열된 것과 같은 몇 가지 태그 만 지원합니다.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>다음은 onload 이벤트에 대한 참조입니다.
이 시도! 그리고 div에서 트리거를 두 번 사용하지 마십시오!
div 태그 전에 호출 할 함수를 정의 할 수 있습니다.
$(function(){
$('div[onload]').trigger('onload');
});데모 : jsfiddle
onload한 다음 해당 함수를 호출합니다. onload예를 들어 jsfiddle.net/mrszgbxh
div의로드 이벤트에서 함수를 호출하려는 경우 jQuery를 사용하지 않으려는 경우 (내 경우와 같이 충돌하기 때문에) 모든 HTML 코드 또는 함수 코드를 포함하여 작성한 다른 코드는 단순히 함수를 호출합니다.
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>또는
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>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>2019년 11월에서, 나는 (가상) 만드는 방법 찾고 있어요 onparse EventListener에 <elements>적용되지 않습니다 onload.
(가설 적) 요소가 구문 분석 될 때onparse EventListener 청취 할 수 있어야합니다 .
아래 의 두 번째 시도 에 매우 만족 했지만 맞춤 이벤트를 만들어 코드를 더 짧고 간단하게 만들 수 있다는 사실에 놀랐습니다.
let parseEvent = new Event('parse');이것은 아직 최고의 솔루션입니다.
아래 예 :
parse Eventwindow.onload언제든지 언제든지 실행할 수 있음)을 선언합니다 .
data-onparseparse EventListener각 요소에를 첨부합니다parse Event이들 요소의 각각은 실행하도록Callback작업 예 :
// 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'화려한 빈 이미지 핵 기반 )는 하드 코드 된<img /> 되고 작동했습니다.
나는 하드 코딩 된 코드를 <img />완전히 제거하고 onparse이벤트 를 발생시켜야하는 요소에서 다음과 같은 속성 을 감지 한 후에 만 동적으로 삽입 할 수 있어야한다고 생각했습니다 .
data-onparse="run-oQuickReply.swap()"실제로 이것은 매우 잘 작동합니다.
아래 예 :
data-onparse<img src />각 요소 바로 다음에 동적으로 생성 하여 문서에 추가onerror EventListener 렌더링 엔진이 각을 구문 분석 할 때<img src />Callback 하고 제거합니다.<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> (2,017에서이 페이지) -이고, 지금까지 내가 가지고있는 가장 좋은 방법은 건너.
아래 예 :
onerror EventListener렌더링 엔진이 구문 분석 할 때 발생<img src />Callback 하고 을 제거 <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 />iframe을 사용하고 숨 깁니다. iframe은 body 태그처럼 작동합니다.
<!DOCTYPE html>
<html>
<body>
<iframe style="display:none" onload="myFunction()" src="http://www.w3schools.com"></iframe>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>
</body>
</html>HTML 청크 (템플릿 인스턴스)가 삽입 된 후에 초기화 코드를 실행해야했으며 템플릿을 조작하고 DOM을 수정하는 코드에 액세스 할 수 없었습니다. html 요소를 삽입하여 DOM을 부분적으로 수정하는 경우에도 동일한 아이디어가 적용됩니다.<div> 됩니다.
얼마 전에,에 <img>포함 된 거의 보이지 않는 onload 이벤트로 해킹을 수행 <div>했지만 범위가 지정된 빈 스타일도 수행한다는 것을 알았습니다 .
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>업데이트 (2017 년 7 월 15 일)- <style>마지막 버전의 IE에서는 온로드가 지원되지 않습니다. Edge는이를 지원하지만 일부 사용자는이를 다른 브라우저로보고 IE를 사용합니다. 이 <img>요소는 모든 브라우저에서 더 잘 작동하는 것 같습니다.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>이미지의 시각적 영향과 리소스 사용을 최소화하려면 이미지를 작고 투명하게 유지하는 인라인 src를 사용하십시오.
내가 a를 사용하는 것에 대해해야한다고 생각하는 한 가지 의견 은 특히 템플릿이 생성하는 각 인스턴스에서 동일한 ID를 가질 수없는 템플릿에서 스크립트가 가까운 곳 <script>을 결정 하는 것이 얼마나 더 어렵다는 것입니다 <div>. 나는 대답이 document.currentScript 일 것이라고 생각했지만 이것이 보편적으로 지원되지는 않습니다. <script>요소는 확실하게 자신의 DOM 위치를 확인할 수 없습니다; 'this'에 대한 참조는 기본 창을 가리키며 도움이되지 않습니다.
나는 <img>구피에도 불구하고 요소 를 사용하기 위해 정착해야한다고 생각합니다 . 이것은 플러그를 사용할 수있는 DOM / javascript 프레임 워크의 구멍 일 수 있습니다.
때문에 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>나는 이런 종류의 일을 위해 YUI3 라이브러리를 정말로 좋아합니다.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onload.
모두 말했듯이 대신 DIV에서 onLoad 이벤트를 사용할 수 없지만 body 태그 앞에 사용할 수 있습니다.
그러나 바닥 글 파일이 하나 인 경우 여러 페이지에 포함시킬 수 있습니다. 원하는 div가 표시된 페이지에 있는지 먼저 확인하는 것이 좋습니다. 따라서 DIV가 포함되지 않은 페이지에서 코드가 실행되지 않아 더 빨리로드되고 응용 프로그램의 시간이 절약됩니다.
따라서 해당 DIV에 ID를 부여하고 다음을 수행해야합니다.
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}나는 같은 질문을했고 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>Div를 Span 안에 넣고 Span에게 mouseover와 mouseout이라는 두 가지 이벤트를주었습니다. 그런 다음 해당 Div 아래에 Div를 열 수있는 링크를 배치하고 해당 링크에 onclick 이벤트를주었습니다. 페이지를 아래로 스크롤하기 위해 모든 이벤트가 동일합니다. 이제 Div를 여는 버튼을 클릭하면 페이지가 약간 아래로 내려 가고 Div가 버튼 위로 열리므로 마우스 오버 및 마우스 아웃 이벤트가 스크롤 다운 스크립트를 푸시하는 데 도움이됩니다. 그런 다음 해당 시점에서 마우스를 움직이면 스크립트가 마지막으로 한 번 푸시됩니다.
다음과 같이로드 될 때까지 간격을 사용하여 확인할 수 있습니다 : https://codepen.io/pager/pen/MBgGGM
let checkonloadDoSomething = setInterval(() => {
let onloadDoSomething = document.getElementById("onloadDoSomething");
if (onloadDoSomething) {
onloadDoSomething.innerHTML="Loaded"
clearInterval(checkonloadDoSomething);
} else {`enter code here`
console.log("Waiting for onloadDoSomething to load");
}
}, 100);먼저 귀하의 질문에 대답하십시오. 아닙니다. 직접하고 싶지 않은 것은 아닙니다. 대답하기에는 약간 늦을 수 있지만 이것은 순수한 자바 스크립트 인 jQuery가없는 내 솔루션입니다. DOM이로드되고 키업 된 후에 텍스트 영역에 크기 조정 기능을 적용하기 위해 원래 작성되었습니다.
같은 방법으로 (모든) 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 호출 후 매우 유용한 해킹을 사용할 수 있습니다.이를 이해하면 쉽게 이해할 수 있습니다 ... 준비하기 전의 요소들 ... . 그것은 "DOM이 준비되기 전에"라고 말하지만 아약스 삽입 또는 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); }
}자바 스크립트
document.addEventListener("animationstart", function(event) {
var e = event || window.event;
if (e.animationName == "nodeReady") {
e.target.classList.remove('loaded');
do_something_else();
}
}, false);서버에서 HTML을로드하고 DOM 트리에 삽입하면 DOMSubtreeModified더 이상 사용되지 않지만 MutationObserverloadElement 함수 내에서 직접 새로운 내용을 사용 하거나 감지 할 수 있으므로 DOM 이벤트를 기다릴 필요가 없습니다.
아래와 같이 이벤트 리스너를 연결할 수 있습니다. 선택 #my-id기가 있는 div가 DOM에 완전히로드 될 때마다 트리거됩니다 .
$(document).on('EventName', '#my-id', function() {
// do something
});이 경우 EventName은 '로드'또는 '클릭'일 수 있습니다.
이 시도.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>이것도 시도하십시오. 당신은 제거 할 필요 .에서 oQuickReply.swap()함수 작업을 할 수 있습니다.
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}<div id="div"></div>alert("This is a div.");줄이 실행되고 결과 ( undefined)가에 할당 될 때 호출됩니다 div.onload. 완전히 무의미합니다.
body나은div