onload요소에 이벤트를 어떻게 추가 합니까?

사용해도 되나요:

<div onload="oQuickReply.swap();" ></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>

... 따라서 다음 내용이로드되는 것을 차단하지 않습니다.

onload이벤트에만 사용할 수 있습니다 document(body)자체, 프레임, 이미지, 스크립트. 즉, 본문 및 / 또는 각 외부 리소스 에만 연결할 수 있습니다 . div는 외부 리소스가 아니며 본문의 일부로로드되므로 onload이벤트가 적용되지 않습니다.

onerror를 사용하고 src를 사용하지 않고 IMG 요소에서 일부 j를 자동으로 트리거 할 수 있습니다.

<img src onerror='alert()'>

onload 이벤트는 아래 나열된 것과 같은 몇 가지 태그 만 지원합니다.

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

다음은 onload 이벤트에 대한 참조입니다.

이 시도! 그리고 div에서 트리거를 두 번 사용하지 마십시오!

div 태그 전에 호출 할 함수를 정의 할 수 있습니다.

$(function(){
    $('div[onload]').trigger('onload');
});

데모 : jsfiddle

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');

이것은 아직 최고의 솔루션입니다.

아래 예 :

1. 맞춤형 제작 parse Event
2. 다음과 같은 기능 ( window.onload언제든지 언제든지 실행할 수 있음)을 선언합니다 .
   • 속성을 포함하는 문서에서 요소를 찾습니다. data-onparse
   • parse 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>&lt;div&gt;</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()"

실제로 이것은 매우 잘 작동합니다.

아래 예 :

1. 속성을 포함하는 문서에서 요소를 찾습니다. data-onparse
2. <img src />각 요소 바로 다음에 동적으로 생성 하여 문서에 추가
3. 발사 onerror EventListener 렌더링 엔진이 각을 구문 분석 할 때<img src />
4. 문서에서 동적으로 생성 된 것을 실행 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>&lt;div&gt;</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에서이 페이지) -이고, 지금까지 내가 가지고있는 가장 좋은 방법은 건너.

아래 예 :

1. onerror EventListener렌더링 엔진이 구문 분석 할 때 발생<img src />
2. 을 실행 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')
})

참조 : http://developer.yahoo.com/yui/3/event/#onavailable

나는 자바 스크립트와 jquery를 배우고 모든 대답을 겪고 있었고 div 요소를로드하기 위해 javascript 함수를 호출 할 때 동일한 문제에 직면했습니다. 나는 시도했다$('<divid>').ready(function(){alert('test'}) 했고 그것은 나를 위해 일했다. jquery 선택기를 사용하는 방식으로 div 요소에서 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 이벤트를 기다릴 필요가 없습니다.

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>

아래와 같이 이벤트 리스너를 연결할 수 있습니다. 선택 #my-id기가 있는 div가 DOM에 완전히로드 될 때마다 트리거됩니다 .

$(document).on('EventName', '#my-id', function() {
 // do something
});

이 경우 EventName은 '로드'또는 '클릭'일 수 있습니다.

https://api.jquery.com/on/#on-events-selector-data-handler

속성 ( <body onload="myFn()"> ...)을 통해 또는 Javascript에서 이벤트를 바인딩 하여 body.onload 이벤트를 대신 사용하십시오 . 이것은 jQuery에서 매우 일반적입니다 .

$(document).ready(function() {
    doSomething($('#myDiv'));
});

이 시도.

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>

div에는 이벤트 onload를 추가 할 수 없지만 문서로드시 onkeydown을 추가하고 onkeydown 이벤트를 트리거 할 수 있습니다.

$(function ()
{
  $(".ccsdvCotentPS").trigger("onkeydown");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div  onkeydown="setCss( );"> </div>`