인라인 자바 스크립트 (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 크래프트가 걸려 렌더링 속도가 약간 느려집니다. 이것은 참조의 지역성 개념과 비슷하지만 캐시 미스 대신 버그와 코드 팽창을 살펴보고 있습니다.

거의 정확하지만 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)
}

...의 비표준 name속성은 div.onclick입니다 "onclick".

따라서 이것이 익명인지 아닌지는 귀하의 "익명"에 대한 정의에 달려 있습니다. 빈 문자열이있는 var foo = new Function()곳 과 비교하고 다음과 같은 것을 생성합니다.foo.namefoo.toString()

function anonymous() {

}