Sự kiện tiêu điểm với dispatchEvent

Question

Khi tôi kích hoạt sự kiện focus với dispatchEvent trên hộp nhập liệu, số onfocus được gọi, nhưng trên giao diện người dùng, hộp nhập không được tập trung. Có lý do nào cho hành vi này không?

var test = document.getElementById("test"); 
test.onfocus = function(event) { 
    console.log('focused'); 
} 
var e = document.createEvent('Event'); 
e.initEvent("focus", true, true); 
test.dispatchEvent(e); 

Mặt khác, nó hoạt động như mong đợi.

var test = document.getElementById("test"); 
test.focus(); 

Lý do tôi đang điều tra điều này là tôi sử dụng ZeptoJS để kích hoạt sự kiện và sử dụng dispatchEvent.

Answer 1

Yếu tố bạn kích hoạt sự kiện trên không nhất thiết phải lắng nghe sự kiện đó, vì có khả năng, yếu tố gốc cũng có thể đang lắng nghe sự kiện đó.

Lưu ý rằng việc kích hoạt sự kiện theo cách thủ công sẽ không tạo ra hành động mặc định được liên kết với sự kiện đó. Ví dụ: bắn theo cách thủ công sự kiện focus không khiến phần tử nhận tiêu điểm (bạn phải sử dụng phương thức focus() cho điều đó), bắn thủ công sự kiện submit không gửi biểu mẫu (sử dụng phương thức submit()), kích hoạt sự kiện quan trọng theo cách thủ công không làm cho chữ đó xuất hiện trong đầu vào văn bản tập trung và kích hoạt sự kiện nhấp chuột trên liên kết theo cách thủ công không làm cho liên kết được kích hoạt, v.v. Trong trường hợp sự kiện giao diện người dùng, điều này rất quan trọng vì lý do bảo mật vì nó ngăn chặn tập lệnh từ mô phỏng hành động của người dùng tương tác với chính trình duyệt.

Cũng lưu ý rằng bạn nên sử dụng fireEvent(), nếu bạn đang làm việc trên IE. Ngoài ra, sự khác biệt chính giữa các phương thức dispatchEvent và fireEvent là phương thức dispatchEvent gọi hành động mặc định của sự kiện, phương thức fireEvent thì không.

để cho các giải pháp xin vui lòng thử này

test.onfocus = function(event) { 
    console.log('focused'); 
    if(! test.hasFocus()) { 
    test.focus(); 
    } 
}