Sự khác biệt giữa chức năng javascript

Question

Tôi biết câu hỏi này có thể là ngớ ngẩn chỉ muốn biết và tôi không chắc chắn liệu chủ đề có phù hợp với yêu cầu hiện tại của tôi hay không. Nhưng vẫn nghĩ để hỏi nó.

<button id="Clk">Click on me</button> 

    document.getElementById("Clk").onclick = function(){alert("firedme!")} 

    document.getElementById("Clk").onclick = fire(); 

    function fire(){alert("I am fired!")} 

tôi nhìn thấy chiếc đầu tiên "chức năng" không được kích hoạt trên tải trang hoặc làm mới nhưng nơi như thứ hai một ngọn lửa() được kích hoạt
khi trang nạp, và sau đó là chức năng này không được kích hoạt trên nhấp chuột . Tôi bối rối, chỉ cần làm rõ điều này.

Answer 1

Thứ hai một đám cháy ngay lập tức bởi vì bạn sử dụng ngoặc (). Khi gán một trình xử lý sự kiện cho một hàm hiện có, không bao gồm dấu ngoặc đơn.

Điều gì xảy ra là hàm thực hiện ngay lập tức và giá trị trả lại được gán làm trình xử lý sự kiện.

Để minh họa, nó cũng giống như thực hiện:

var result = fire(); 
console.log(result); // undefined 

document.getElementById("Clk").onclick = result; 

Như bạn thấy, undefined được chuyển như xử lý sự kiện.

Answer 2

Bạn cần phải chuyển fire đến onclick làm tham chiếu hàm, chứ không phải yêu cầu.

document.getElementById("Clk").onclick = fire; 

Khi bạn vượt qua fire() để xử lý onclick, nó gây nên ngay lập tức và trở về từ chức năng là những gì bạn đang thiết onclick quá. Bằng cách chuyển một tham chiếu đến hàm, nó dừng nó lại cho đến khi sự kiện được kích hoạt. Nó cơ bản giống như trình xử lý hàm ẩn danh ở trên.

rlemon là loại, đủ để làm cho bạn một cuộc biểu tình đẹp fiddle < - đây

Answer 3

Ngoài ra, tôi muốn thêm một số thứ khác.

Đầu tiên, hãy nghĩ đến onclick là thuộc tính thông thường của một đối tượng.

Vì vậy, object.onclick = value nơi value = functionName() là hoàn toàn ổn, ví dụ, functionName() có thể được trả lại một giá trị sử dụng return something;

Nhưng onclick không phải là một tài sản thông thường. Khi động cơ JS trong trình duyệt gặp bài tập để tính dựa kiện (ví dụ onclick, ondblclick, onmouseover, vv), nó tạo ra một chồng cho mỗi phần tử , bao gồm bản đồ b/w onSomeEvent và handler.

Trình xử lý là đối tượng hàm. Nhưng nếu bạn làm điều gì đó như element.onSomeEvent = functionName(); bạn chỉ đơn giản là gọi chức năng functionName() và điều này có thể đã được ổn nếu functionName() được định nghĩa là

function functionName() {return function(){/*do something*/};} 

Nhưng vì functionName trong trường hợp của bạn không được trả lại một chức năng, bạn sẽ thấy một Kêt quả bât ngơ.Đây là nhược điểm chính của về các ngôn ngữ như JavaScript. Trong một ngôn ngữ mạnh mẽ gõ mà có thể có ném một lỗi ... vì

class Element { 
    Function onclick = null; 
    Function ondblclick = null; 
    /*other code*/ 
} 
document.getElementById('idName').onclick = new Function(); // correct 
document.getElementById('idName').onclick = function(){}; // correct 
document.getElementById('idName').onclick = functionName(); 
/* 
* correct if functionName defined as 
* Function functionName() {return new Function();} or 
* Function functionName() {return function(){};} 
* and incorrect for any other case 
*/