Javascript nội tuyến (trong HTML) hoạt động như thế nào?

Tôi biết đây là thực hành xấu. Đừng viết mã như thế này nếu có thể.

Tất nhiên, chúng tôi sẽ luôn thấy mình trong các tình huống trong đó một đoạn mã Javascript thông minh có thể giải quyết vấn đề nhanh chóng.

Tôi đang theo đuổi truy vấn này vì muốn hiểu đầy đủ về những gì xảy ra (và những cạm bẫy tiềm ẩn) khi một cái gì đó như thế này được viết:

<a href="#" onclick="alert('Hi')">Click Me</a>

Theo như tôi có thể nói đây là chức năng giống như

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

Ngoại suy từ điều này có vẻ như chuỗi được gán cho thuộc tính onclickđược chèn trong một hàm ẩn danh được gán cho trình xử lý nhấp chuột của phần tử. Đây thực sự là trường hợp?

Bởi vì tôi đang bắt đầu làm những việc như thế này:

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

Mà hoạt động. Nhưng tôi không biết số tiền này là bao nhiêu. Có vẻ đáng ngờ vì không có chức năng rõ ràng đang được trả lại từ!

Bạn có thể hỏi, tại sao bạn làm điều này, Steve? Inline JS là thực hành xấu!

Thành thật mà nói, tôi mệt mỏi khi chỉnh sửa ba phần mã khác nhau chỉ để sửa đổi một phần của trang, đặc biệt là khi tôi chỉ tạo mẫu một cái gì đó để xem liệu nó có hoạt động không. Thật dễ dàng hơn nhiều và đôi khi còn có ý nghĩa đối với mã liên quan cụ thể đến phần tử HTML này được xác định ngay trong phần tử: Khi tôi quyết định 2 phút sau đó, đây là một ý tưởng tồi tệ, khủng khiếp tôi có thể nuke toàn bộ div (hoặc bất cứ điều gì ) và tôi không có một loạt các hành trình JS và CSS bí ẩn treo xung quanh trong phần còn lại của trang, làm chậm quá trình kết xuất một chút. Điều này tương tự như khái niệm về địa phương của tham chiếu nhưng thay vì nhớ cache, chúng tôi đang xem xét các lỗi và sự phình to mã.

Bạn đã hiểu đúng, nhưng bạn chưa tính đến thisgiá trị được cung cấp cho mã nội tuyến.

<a href="#" onclick="alert(this)">Click Me</a>

thực sự gần hơn với:

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

Trình xử lý sự kiện nội tuyến được đặt thisbằng với mục tiêu của sự kiện. Bạn cũng có thể sử dụng chức năng ẩn danh trong tập lệnh nội tuyến

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

Trình duyệt làm gì khi bạn có

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

là đặt giá trị thực của "onclick" thành một cái gì đó hiệu quả như:

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

Đó là, nó tạo ra một hàm mong đợi một tham số "sự kiện". (Chà, IE thì không, nó giống một hàm ẩn danh đơn giản hơn.)

Dường như có rất nhiều thực hành xấu được ném xung quanh các thuộc tính Event Handler. Thực tiễn xấu là không biết và sử dụng các tính năng có sẵn ở nơi phù hợp nhất. Các thuộc tính sự kiện có đầy đủ các tiêu chuẩn Tài liệu W3C và không có gì xấu về chúng. Không khác gì đặt kiểu nội tuyến, cũng là Tài liệu W3C và có thể hữu ích theo thời gian. Cho dù bạn đặt nó được bọc trong các thẻ script hay không, nó sẽ được hiểu theo cùng một cách.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attribut

Cách tốt nhất để trả lời câu hỏi của bạn là xem nó trong hành động.

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

Trong js

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

Như bạn thấy trong console, nếu bạn đang sử dụng chrome, nó sẽ in một hàm ẩn danh với đối tượng sự kiện được truyền vào, mặc dù nó có một chút khác biệt trong IE.

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

Tôi đồng ý với một số điểm của bạn về xử lý sự kiện nội tuyến. Có, chúng rất dễ viết, nhưng tôi không đồng ý với quan điểm của bạn về việc phải thay đổi mã ở nhiều nơi, nếu bạn cấu trúc mã tốt, bạn không cần phải làm điều này.

Có vẻ đáng ngờ vì không có chức năng rõ ràng đang được trả lại từ!

Nó là một hàm ẩn danh đã được gắn vào sự kiện nhấp chuột của đối tượng.

Tại sao bạn làm điều này, Steve?

Tại sao bạn lại làm thế ..... Ah, đừng bận tâm, như bạn đã đề cập, nó thực sự được áp dụng rộng rãi trong thực tiễn xấu :)

Hãy thử điều này trong bảng điều khiển:

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

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

div.onclick

Trong Chrome, nó hiển thị điều này:

function onclick(event) {
  alert(event)
}

... và tài sản phi tiêu chuẩn namecủa div.onclicklà "onclick".

Vì vậy, việc này có ẩn danh hay không phụ thuộc vào định nghĩa của bạn về "ẩn danh". So sánh với một cái gì đó như var foo = new Function(), nơi foo.namelà một chuỗi rỗng và foo.toString()sẽ tạo ra một cái gì đó như

function anonymous() {

}