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

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

답변

<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>

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

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

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

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

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

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

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

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

div.onclick

function onclick(event) {
  alert(event)
}

function anonymous() {

}