onClick()시맨틱에는 좋지 않기 때문에 HTML에서 와 같은 JavaScript 이벤트를 사용 하는 것은 나쁜 습관 이라고 여러 번 들었습니다 . 단점은 무엇이며 다음 코드를 수정하는 방법을 알고 싶습니다.
<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>답변
눈 에 거슬리지 않는 Javascript 에 대해 이야기하고있을 것입니다 .
<a href="#" id="someLink">link</a>중앙 자바 스크립트 파일의 논리는 다음과 같습니다.
$('#someLink').click(function(){
popup('/map/', 300, 300, 'map');
return false;
});장점은
- 동작 (자바 스크립트)과 프레젠테이션 (HTML)이 분리됨
- 언어의 혼합 없음
- 브라우저 간 문제를 대부분 처리 할 수있는 jQuery와 같은 자바 스크립트 프레임 워크를 사용하고 있습니다.
- 코드 복제없이 한 번에 많은 HTML 요소에 동작을 추가 할 수 있습니다
답변
jQuery를 사용하는 경우 :
HTML :
<a id="openMap" href="/map/">link</a>JS :
$(document).ready(function() {
$("#openMap").click(function(){
popup('/map/', 300, 300, 'map');
return false;
});
});이것은 여전히 JS없이 작동하거나 사용자가 링크를 클릭하면 이점이 있습니다.
또한 다음과 같이 다시 작성하여 일반 팝업을 처리 할 수 있습니다.
HTML :
<a class="popup" href="/map/">link</a>JS :
$(document).ready(function() {
$(".popup").click(function(){
popup($(this).attr("href"), 300, 300, 'map');
return false;
});
});이렇게하면 팝업 클래스에 팝업을 제공하여 모든 링크에 팝업을 추가 할 수 있습니다.
이 아이디어는 다음과 같이 더 확장 될 수 있습니다.
HTML :
<a class="popup" data-width="300" data-height="300" href="/map/">link</a>JS :
$(document).ready(function() {
$(".popup").click(function(){
popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
return false;
});
});이제 onclick 항목을 작성하지 않고도 전체 사이트에서 많은 팝업에 동일한 비트 코드를 사용할 수 있습니다! 재사용성에 대한 예!
또한 나중에 팝업이 나쁜 습관이고 (그것들입니다!) 라이트 박스 스타일의 모달 창으로 바꾸고 싶다면 다음과 같이 변경할 수 있습니다.
popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');에
myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');전체 사이트의 모든 팝업이 이제 완전히 다르게 작동합니다. 팝업에서 수행 할 작업을 결정하는 기능 감지를 수행하거나 사용자 기본 설정을 저장하여 허용 여부를 결정할 수도 있습니다. 인라인을 클릭하면 큰 복사 및 붙여 넣기 작업이 필요합니다.
답변
매우 큰 JavaScript 응용 프로그램으로 인해 프로그래머는 전역 범위를 오염시키지 않기 위해 더 많은 코드 캡슐화를 사용하고 있습니다. HTML 요소에서 onClick 조치에 함수를 사용하려면 전역 범위에 있어야합니다.
다음과 같은 JS 파일을 보았을 것입니다 …
(function(){
...[some code]
}());이들은 즉시 호출되는 함수 표현식 (IIFE)이며 그 안에 선언 된 함수는 내부 범위 내에 만 존재합니다.
function doSomething(){}IIFE 내에서 선언 한 경우 doSomething()HTML 페이지에서 요소의 onClick 조치를 수행하면 오류가 발생합니다.
반면에 해당 IIFE 내에서 해당 요소에 대한 eventListener를 작성 doSomething()하고 리스너가 click 이벤트를 감지 할 때 호출 하면 리스너로 인해 doSomething()IIFE의 범위를 공유하는 것이 좋습니다 .
코드가 최소한 인 웹 응용 프로그램의 경우에는 중요하지 않습니다. 그러나 유지 관리가 가능한 큰 코드베이스를 작성하려는 경우 onclick=""피해야 할 습관입니다.
답변
여러 가지 이유로 좋지 않습니다.
- 코드와 마크 업을 혼합
- 이 방법으로 작성된 코드는 통과
eval - 그리고 글로벌 범위에서 실행
가장 간단한 방법은 요소에 name속성 을 추가하는 것입니다 <a>.
document.myelement.onclick = function() {
window.popup('/map/', 300, 300, 'map');
return false;
};현대적인 모범 사례는 id이름 대신 대신 을 사용하는 것이지만 여러 기능을 단일 이벤트에 바인딩 할 수 있기 때문에 addEventListener()대신 사용하는 것이 좋습니다 onclick.
답변
몇 가지 이유가 있습니다.
-
HTML과 클라이언트 쪽 스크립트와 같이 마크 업을 분리하는 것이 유지 관리에 도움이된다는 것을 알았습니다. 예를 들어 jQuery를 사용하면 프로그래밍 방식으로 이벤트 핸들러를 쉽게 추가 할 수 있습니다.
-
제공하는 예제는 자바 스크립트를 지원하지 않거나 자바 스크립트가 꺼져있는 모든 사용자 에이전트에서 중단됩니다. 점진적 향상 의 개념은
/map/자바 스크립트가없는 사용자 에이전트 에 대한 간단한 하이퍼 링크를 장려 한 다음 자바 스크립트를 지원하는 사용자 에이전트에 대해 클릭 핸들러를 문법적으로 추가하는 것입니다.
예를 들면 다음과 같습니다.
마크 업 :
<a id="example" href="/map/">link</a>자바 스크립트 :
$(document).ready(function(){
$("#example").click(function(){
popup('/map/', 300, 300, 'map');
return false;
});
})답변
개정
눈 에 잘 띄지 않는 JavaScript 접근 방식은 PAST에서 우수했습니다. 특히 HTML의 이벤트 핸들러 바인드는 나쁜 습관으로 간주되었습니다 (주로 YiddishNinjaonclick events run in the global scope and may cause unexpected error 가 언급 한 내용 )
하나…
현재이 접근법은 약간 구식이며 업데이트가 필요한 것 같습니다. 누군가가 전문 프론트 엔드 개발자가되고 크고 복잡한 응용 프로그램을 작성하려면 Angular, Vue.js 등과 같은 프레임 워크를 사용해야합니다. 그러나 프레임 워크는 일반적으로 이벤트 핸들러가 바인딩되는 HTML 템플릿 을 사용하거나 사용하도록 허용합니다. html 템플릿 코드에서 직접 사용하면 매우 편리하고 명확하며 효과적입니다. 예를 들어 각도 템플릿에서는 일반적으로 사람들이 작성합니다.
<button (click)="someAction()">Click Me</button> 원시 js / html에서 이와 동등한 것은
<button onclick="someAction()">Click Me</button>차이점은 원시 js onclick이벤트가 전역 범위에서 실행 된다는 것입니다 . 그러나 프레임 워크는 캡슐화를 제공합니다.
문제가 어디에 있습니까?
문제는 항상 html-onclick이 나쁘고 항상 사용하는 초보자 프로그래머 btn.addEventListener("onclick", ... )가 템플릿이있는 일부 프레임 워크를 사용 하려고 할 때 ( 결점addEventListener 이 있습니다 -DOM 을 동적으로 사용하여 DOM을 업데이트하면 innerHTML=(꽤 빠릅니다 ) 이벤트를 느슨하게합니다) 핸들러는 그런 식으로 바인딩됩니다). 그런 다음 프레임 워크 사용법에 대한 나쁜 습관이나 잘못된 접근 방식에 직면하게됩니다. 프레임 워크를 주로 사용하지 않고 템플릿 부분에 초점을 맞추지 않기 때문에 프레임 워크를 매우 나쁜 방식으로 사용합니다. 암호). 이 습관을 바꾸려면 많은 시간을 잃게 될 것입니다 (아마도 행운과 선생님이 필요할 것입니다).
제 생각에는 제 학생들과의 경험을 바탕으로 처음에 html-handlers-bind를 사용하면 더 좋습니다. 내가 말했듯이 핸들러는 글로벌 범위에서 호출되는 것이 사실이지만이 단계 학생들은 일반적으로 제어하기 쉬운 작은 응용 프로그램을 만듭니다. 더 큰 응용 프로그램을 작성하려면 일부 프레임 워크를 선택합니다.
그래서 뭘 할건데?
Unobtrusive JavaScript 접근 방식을 업데이트하고 html에서 바인드 이벤트 핸들러 (결국 간단한 매개 변수로)를 허용 할 수 있습니다 (그러나 바인드 핸들러 만-OP 쿼리와 같이 onclick에 로직을 넣지 않음). 원시 js / html에 대한 제 의견으로는 이것이 허용되어야합니다.
<button onclick="someAction(3)">Click Me</button>또는
function popup(num,str,event) {
let re=new RegExp(str);
// ...
event.preventDefault();
console.log("link was clicked");
}<a href="https://example.com" onclick="popup(300,'map',event)">link</a>그러나 아래 예는 허용되지 않아야합니다.
<button onclick="console.log('xx'); someAction(); return true">Click Me</button>
<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>현실은 변하고 우리의 관점도
답변
그것은 A의 새 “라는 패러다임 겸손한 자바 스크립트 “. 현재의 “웹 표준”은 기능과 표현을 분리한다고 말합니다.
실제로는 “나쁜 습관”이 아니며 대부분의 새로운 표준에서는 인라인 JavaScript 대신 이벤트 리스너를 사용하기를 원합니다.
또한 이것은 개인적인 일 일 수도 있지만 이벤트 리스너를 사용할 때, 특히 실행하려는 JavaScript 문이 두 개 이상인 경우 훨씬 쉽게 읽을 수 있다고 생각합니다.