Sự khác biệt giữa các phương pháp đặt mã JavaScript khác nhau trong <a> là gì?

Question 1

Tôi đã thấy các phương pháp đặt mã JavaScript vào <a>thẻ sau đây:

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>

Tôi hiểu ý tưởng cố gắng đặt một URL hợp lệ thay vì chỉ mã JavaScript, đề phòng trường hợp người dùng chưa bật JavaScript. Nhưng với mục đích của cuộc thảo luận này, tôi cần giả sử JavaScript đã được bật (họ không thể đăng nhập nếu không có nó).

Cá nhân tôi thích tùy chọn 2 vì nó cho phép bạn xem những gì sẽ được chạy – đặc biệt hữu ích khi gỡ lỗi trong đó có các tham số được truyền cho hàm. Tôi đã sử dụng nó một chút và không tìm thấy sự cố trình duyệt.

Tôi đã đọc rằng mọi người đề xuất 4, bởi vì nó cung cấp cho người dùng một liên kết thực để theo dõi, nhưng thực sự, # không phải là "thực". Nó sẽ hoàn toàn không đi đâu cả.

Có cái nào không được hỗ trợ hoặc thực sự không tốt, khi bạn biết người dùng đã bật JavaScript?

Câu hỏi liên quan: Href cho các liên kết JavaScript: “#” hoặc “javascript: void (0)”? .

Question 2

Tôi khá thích bài viết Các phương pháp hay nhất về Javascript của Matt Kruse . Trong đó, ông nói rằng việc sử dụng hrefphần này để thực thi mã JavaScript là một ý tưởng tồi. Mặc dù bạn đã tuyên bố rằng người dùng của mình phải bật JavaScript, không có lý do gì bạn không thể có một trang HTML đơn giản mà tất cả các liên kết JavaScript của bạn có thể trỏ đến cho hrefphần của họ trong trường hợp ai đó tắt JavaScript sau khi đăng nhập. Tôi thực sự khuyến khích bạn vẫn cho phép cơ chế dự phòng này. Những thứ như thế này sẽ tuân thủ "các phương pháp hay nhất" và hoàn thành mục tiêu của bạn:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

Question 3

Tại sao bạn làm điều này khi bạn có thể sử dụng addEventListener/ attachEvent? Nếu không có- hreftương đương, không sử dụng an <a>, sử dụng a <button>và tạo kiểu cho phù hợp.

Question 4

Bạn quên một phương pháp khác:

5: <a href="#" id="myLink">Link</a>

Với mã JavaScript:

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

Tôi không thể bình luận về tùy chọn nào có hỗ trợ tốt nhất hoặc tùy chọn nào là tốt nhất về mặt ngữ nghĩa, nhưng tôi chỉ nói rằng tôi thích phong cách này hơn vì nó tách nội dung của bạn khỏi mã JavaScript của bạn. Nó giữ tất cả mã JavaScript lại với nhau, dễ bảo trì hơn nhiều (đặc biệt nếu bạn đang áp dụng điều này cho nhiều liên kết) và bạn thậm chí có thể đặt nó vào một tệp bên ngoài, sau đó có thể được đóng gói để giảm kích thước tệp và lưu vào bộ nhớ cache của trình duyệt khách.

Question 5

<a href="#" onClick="DoSomething(); return false;">link</a>

Tôi sẽ làm điều này, hoặc:

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

Tuỳ thuộc vào tình hình. Đối với các ứng dụng lớn hơn, ứng dụng thứ hai là tốt nhất vì sau đó nó hợp nhất mã sự kiện của bạn.

Question 6

Phương pháp # 2 có lỗi cú pháp trong FF3 và IE7. Tôi thích phương pháp # 1 và # 3 hơn, vì # 4 làm bẩn URI bằng '#' mặc dù ít gây ra việc nhập hơn ... Rõ ràng, như được lưu ý bởi các phản hồi khác, giải pháp tốt nhất là tách html khỏi xử lý sự kiện.

Question 7

Một điểm khác biệt mà tôi nhận thấy giữa điều này:

<a class="actor" href="javascript:act1()">Click me</a>

và điều này:

<a class="actor" onclick="act1();">Click me</a>

đó là nếu trong cả hai trường hợp bạn có:

<script>$('.actor').click(act2);</script>

thì đối với ví dụ đầu tiên, act2sẽ chạy trước act1và trong ví dụ thứ hai, nó sẽ theo chiều ngược lại.

Question 8

Chỉ các trình duyệt hiện đại

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

Qua trình duyệt

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

Bạn có thể chạy điều này trước khi tài liệu sẵn sàng, nhấp vào các nút sẽ hoạt động vì chúng tôi đính kèm sự kiện vào tài liệu.

Nguồn: