에 JavaScript 코드를 넣는 다른 방법의 차이점은 무엇입니까?
<a>태그 에 JavaScript 코드를 넣는 다음과 같은 방법을 보았습니다 .
function DoSomething() { ... return false; }
<a href="javascript:;" onClick="return DoSomething();">link</a><a href="javascript:DoSomething();">link</a><a href="javascript:void(0);" onClick="return DoSomething();">link</a><a href="#" onClick="return DoSomething();">link</a>
사용자가 JavaScript를 활성화하지 않는 경우에 대비하여 JavaScript 코드 대신 유효한 URL을 제안하는 아이디어를 이해합니다. 그러나이 토론의 목적을 JavaScript가 활성화되어 가정 위해합니다 (자바 펼쳐야하는 로그인 할 수 없음).
저는 개인적으로 옵션 2를 좋아합니다.이 옵션을 사용하면 실행될 수있는 항목을 볼 수 있습니다. 특히 함수에 전달되는 매개 변수가있는 곳을 이용할 때 유용합니다. 나는 그것을 사용하여 많이 사용합니다.
사용자에게 따라갈 수있는 실제 링크를 제공하기 때문에 사람들이 4를 추천합니다. 실제로 #은 "진짜"가 아닙니다. 그것은 절대로 어디에도 가지 않을 것입니다.
사용자가 JavaScript를 활성화하는 것을 지원하지 않는 것이 정말 나쁜 것이 있습니까?
관련 질문 : JavaScript 링크에 대한 Href : "#"또는 "javascript : void (0)"? .
Matt Kruse의 Javascript 모범 사례 가이드를 아주 좋아 합니다. 여기에서 그는 href섹션을 사용하여 JavaScript 코드를 실행하는 것이 좋지 않다고 생각합니다. 사용자가 자바 스크립트를 활성화해야한다는 점은 거기에 href로그인 후 누군가 자바 스크립트를 끄는 경우 모든 자바 스크립트 링크가 해당 섹션을 가리킬 수있는 간단한 HTML 페이지를 수 없습니다 . 이 폴백을 계속해서 허용 해 주시기 바랍니다. 이와 같은 것이 "모범 사례"를 준수하고 목표를 달성합니다.
<a href="javascriptrequired.html" onclick="doSomething(); return false;">go</a>
addEventListener/ 를 사용할 수 있는데 왜 이렇게 attachEvent하시겠습니까? href동등 항목이 없으면를 사용하지 말고 <a>사용하고를 <button>그에 따라 스타일을 지정하십시오.
다른 방법을 잊었습니다.
5: <a href="#" id="myLink">Link</a>
JavaScript 코드 사용 :
document.getElementById('myLink').onclick = function() {
// Do stuff.
};
어떤 옵션이 가장 잘 지원되는 스타일 또는 어떤 의미가 가장 좋은지에 스타일이 어떤 의미가 있는지,이 JavaScript 코드에서 콘텐츠를 분리하기 때문에이 스타일을 선호하는 말할 것입니다. 모든 JavaScript 코드를 함께 유지 관리가 훨씬 더 많은 (직이를 링크에 적용하는 경우), 파일 크기를 따라서 크기를 위해 압축하고 클라이언트 브라우저에서 캐시 할 수있는 외부 파일에 넣을 수도 있습니다.
<a href="#" onClick="DoSomething(); return false;">link</a>
나는 할 것이다.
<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
DoSomething();
return false;
};
상황에 따라. 더 큰 앱의 경우 이벤트 코드를 통합하기 때문에 두 번째가 가장 좋습니다.
방법 # 2에는 FF3 및 IE7에 구문 오류가 있습니다. 나는 방법 # 1과 # 3을 선호한다. 왜냐하면 # 4는 덜 타이핑을하지만 URI를 '#'로 더럽 히기 때문이다. 분명히 다른 응답에서 언급했듯이, 가장 좋은 해결책은 이벤트 처리와 별도의 HTML이다.
나는 이것 사이에 한 가지 차이점을 발견했습니다.
<a class="actor" href="javascript:act1()">Click me</a>
이 :
<a class="actor" onclick="act1();">Click me</a>
두 경우 모두 다음과 같은 경우입니다.
<script>$('.actor').click(act2);</script>
그런 다음 첫 번째 예의 경우 act2이전에 실행 act1되고 두 번째 예에서는 반대 방향이됩니다.
최신 브라우저 만
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
var hasClass = function(el,className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}
doc.addEventListener('click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault();
doSomething.call(e.target, e);
}
});
})(document);
function doSomething(event){
console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">
</body>
</html>
크로스 브라우저
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
var cb_addEventListener = function(obj, evt, fnc) {
// W3C model
if (obj.addEventListener) {
obj.addEventListener(evt, fnc, false);
return true;
}
// Microsoft model
else if (obj.attachEvent) {
return obj.attachEvent('on' + evt, fnc);
}
// Browser don't support W3C or MSFT model, go on with traditional
else {
evt = 'on'+evt;
if(typeof obj[evt] === 'function'){
// Object already has a function on traditional
// Let's wrap it with our own function inside another function
fnc = (function(f1,f2){
return function(){
f1.apply(this,arguments);
f2.apply(this,arguments);
}
})(obj[evt], fnc);
}
obj[evt] = fnc;
return true;
}
return false;
};
var hasClass = function(el,className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}
cb_addEventListener(doc, 'click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
doSomething.call(e.target, e);
}
});
})(document);
function doSomething(event){
console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">
</body>
</html>
문서가 준비하기 전에 말하기 수 있습니다. 이벤트를 문서에 첨부하기 때문에 버튼을 클릭하면 작동합니다.
출처 :
'IT' 카테고리의 다른 글
| Java 8의 예외 유형 추론의 독특한 기능 (0) | 2020.09.25 |
|---|---|
| std :: stack이 기본적으로 std :: deque를 사용하는 이유는 무엇입니까? (0) | 2020.09.25 |
| XIB 파일을 연 후 Xcode 6.3이 멈추거나 중단됨 (0) | 2020.09.25 |
| C / C ++ 프로젝트에 Maven 사용 (0) | 2020.09.25 |
| 생성자에 매개 변수가있을 때 Moq로 모의 (0) | 2020.09.25 |