인라인 자바 스크립트 (HTML)는 어떻게 작동합니까?

인라인 자바 스크립트 (HTML)는 어떻게 작동합니까?

---

나는 이것이 나쁜 습관이라는 것을 알고 있습니다. 가능하면 이와 같은 코드를 작성하지 마십시오.

물론 인라인 Javascript의 영리한 스 니펫이 문제를 신속하게 해결할 수있는 상황에서는 항상 자신을 찾을 수 있습니다.

이와 같은 내용을 작성할 때 발생하는 일 (및 잠재적 인 함정)을 완전히 이해하기 위해이 쿼리를 추구하고 있습니다.

<a href="#" onclick="alert('Hi')">Click Me</a>

내가 말할 수있는 한 이것은 기능적으로 동일합니다.

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

이것으로부터 외삽하면 attribute에 지정된 문자열 onclick이 요소의 클릭 핸들러에 지정된 익명 함수 내에 삽입 된 것 같습니다 . 이것이 사실입니까?

다음과 같은 일을 시작하기 때문에 :

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

어느 것이 효과가 있습니까? 그러나 나는 이것이 얼마나 많은 해킹인지 모른다. 반환되는 명백한 기능이 없기 때문에 의심스러워 보입니다!

왜 이런 짓을 하겠니, 스티브? 인라인 JS는 나쁜 습관입니다!

솔직히 말하면 페이지의 한 섹션을 수정하기 위해 세 가지 다른 코드 섹션을 편집하는 데 지쳤습니다. 특히 어떤 것이 프로토 타입을 작성하여 전혀 작동하지 않는지 특히 그렇습니다. 이 HTML 요소와 관련이있는 코드를 요소 내 에서 바로 정의하는 것이 훨씬 더 쉽고 때로는 의미가 있습니다 . ) 페이지의 나머지 부분에 신비한 JS 및 CSS cruft가 없어 렌더링 속도가 약간 느려집니다. 이것은 참조의 지역성 개념과 비슷하지만 캐시 미스 대신 버그와 코드 팽창을 살펴보고 있습니다.

---

거의 정확하지만 this인라인 코드에 제공된 값을 설명하지 않았습니다 .

<a href="#" onclick="alert(this)">Click Me</a>

실제로 더 가깝습니다.

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

인라인 이벤트 핸들러 this는 이벤트 대상과 동일하게 설정 됩니다. 인라인 스크립트에서 익명 함수를 사용할 수도 있습니다

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

---

가지고있을 때 브라우저가하는 일

<a onclick="alert('Hi');" ... >

"onclick"의 실제 값을 다음과 같이 효과적으로 설정하는 것입니다.

new Function("event", "alert('Hi');");

즉, "이벤트"매개 변수를 예상하는 함수를 만듭니다. (IE는 그렇지 않습니다. 단순한 단순 익명 함수와 비슷합니다.)

---

이벤트 핸들러 속성에 대해 많은 나쁜 습관 이 발생 하는 것 같습니다 . 나쁜 관행은 가장 적절한 곳에서 사용 가능한 기능을 알고 사용하지 않습니다. 이벤트 속성은 완전한 W3C 문서화 표준이며 이에 대한 나쁜 관행은 없습니다. 인라인 스타일을 배치하는 것과 다르지 않습니다. 인라인 스타일은 W3C 문서화되어 있으며 시간에 유용합니다. 스크립트 태그로 묶었는지 여부에 관계없이 동일한 방식으로 해석됩니다.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

---

질문에 대답하는 가장 좋은 방법 은 실제 질문을 보는 것입니다.

<a id="test" onclick="alert('test')"> test </a> ​

js에서

var test = document.getElementById('test');
console.log( test.onclick ); 

에서 볼 수 있듯이 console크롬을 사용하는 경우 IE에서는 약간 다르지만 전달 된 이벤트 객체와 함께 익명 함수를 인쇄합니다.

function onclick(event) {
   alert('test')
}

인라인 이벤트 핸들러에 대한 귀하의 의견에 동의합니다. 예, 작성하기는 쉽지만 여러 위치에서 코드를 변경해야한다는 요점에 동의하지 않습니다. 코드를 잘 구성하면이 작업을 수행 할 필요가 없습니다.

---

반환되는 명백한 기능이 없기 때문에 의심스러워 보입니다!

객체의 click 이벤트에 첨부 된 익명 함수입니다.

왜 이러는거야, 스티브?

왜 지구상에서 당신은 doi ..... 아시다시피, 당신이 언급했듯이, 그것은 실제로 널리 나쁜 연습을 채택합니다 :)

---

콘솔에서 이것을 시도하십시오 :

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

Chrome에서는 다음과 같이 표시됩니다.

function onclick(event) {
  alert(event)
}

...and the non-standard name property of div.onclick is "onclick".

So, whether or not this is anonymous depends your definition of "anonymous." Compare with something like var foo = new Function(), where foo.name is an empty string, and foo.toString() will produce something like

function anonymous() {

}

참고URL : https://stackoverflow.com/questions/10607847/how-does-inline-javascript-in-html-work