Javascript theo cách thủ công .onchange() event

Question

Tôi có trường nhập liệu tôi muốn chỉ định giá trị mới và kích hoạt sự kiện .onchange(). Tôi đã làm như sau:

document.getElementById("range").value='500'; 
document.getElementById("range").onchange(); 

Phạm vi đầu vào của tôi ở đâu là phạm vi. Tôi nhận được lỗi sau:

Uncaught TypeError: Cannot read property 'target' of undefined 

Có cách nào để xác định 'mục tiêu' không? Cảm ơn bạn

Answer 1

Lỗi về target là do có mã trong trình xử lý sự kiện đang cố gắng đọc thuộc tính target của đối tượng Event được liên kết với sự kiện thay đổi. Bạn có thể thử đi qua trong một faux-tổ chức sự kiện để đánh lừa nó:

var range= document.getElementById('range'); 
range.onchange({target: range}); 

hoặc, nếu bạn có thể, thay đổi mã xử lý để sử dụng this thay vì event.target.Trừ khi bạn đang sử dụng ủy nhiệm (bắt các sự kiện thay đổi trên đối tượng con từ cha mẹ, cái gì đó phiền phức cho sự kiện thay đổi vì IE không 'bong bóng' chúng), đích của sự kiện thay đổi luôn là yếu tố xử lý sự kiện đã được đăng ký, làm cho event.target không cần thiết.

Nếu trình xử lý sự kiện sử dụng nhiều thuộc tính của Event hơn chỉ target, bạn sẽ cần giả mạo nhiều hơn hoặc truy cập giao diện trình duyệt ‘thực’ để gửi các sự kiện. Điều này cũng sẽ cần thiết nếu người nghe sự kiện có thể đang được sử dụng (addEventListener hoặc attachEvent trong IE) vì chúng sẽ không hiển thị trên thuộc tính trực tiếp onchange. Điều này phụ thuộc vào trình duyệt (fireEvent cho IE, dispatchEvent cho các tiêu chuẩn) và không khả dụng trên các trình duyệt cũ hơn hoặc ít người biết đến hơn.

Answer 2

Hãy thử sử dụng fireEvent hoặc dispatchEvent (tùy thuộc vào trình duyệt) để nâng cao sự kiện:

document.getElementById("range").value='500'; 
if (document.getElementById("range").fireEvent) { 
    document.getElementById("range").fireEvent("onclick"); 
} else if (document.getElementById("range").dispatchEvent) { 
    var clickevent=document.createEvent("MouseEvents"); 
    clickevent.initEvent("click", true, true); 
    document.getElementById("range").dispatchEvent(clickevent); 
} 

Answer 3

Điều này dường như làm việc cho tôi (xem này fiddle). Bạn có bất kỳ mã nào khác có thể là vấn đề không? Bạn đã xác định trình xử lý onchange của mình như thế nào?

Bạn có đang gọi e.target trong trình xử lý onchange của mình không? Tôi nghi ngờ đây có thể là vấn đề ... vì bạn đang thực hiện thay đổi theo lập trình, không có sự kiện cửa sổ tương ứng.

Answer 4

từ: http://www.mail-archive.com/jquery-en@googlegroups.com/msg44887.html

Sometimes it's needed to create an event programmatically. (Which is different from running an event function (triggering)

This can be done by the following fire code

> var el=document.getElementById("ID1") 
> 
> fire(el,'change') 
> 
> 
> function fire(evttype) { 
>  if (document.createEvent) { 
>   var evt = document.createEvent('HTMLEvents'); 
>   evt.initEvent(evttype, false, false); 
>   el.dispatchEvent(evt); 
>  } else if (document.createEventObject) { 
>   el.fireEvent('on' + evttype); 
>  } } looks like this trick is not yet in jQuery, perhaps for a 
> reason? 

Answer 5

Nói chung, mã của bạn sẽ làm việc tốt. Có thể có một cái gì đó khác đang phát hành vấn đề, mặc dù.

• Bạn chạy hai dòng đó ở đâu?
• Bạn có chắc chắn rằng phần tử có mã số range được tải vào lúc bạn chạy mã (ví dụ: bạn chạy mã trong tài liệu.đã).
• Bạn có chắc chắn rằng bạn chỉ có một thành phần có id range trên trang?
• Chức năng onchange() của bạn đang hoạt động (có thể là có ích khi đăng bài ở đây)?

Bên cạnh đó, tôi sẽ khuyên bạn sử dụng jQuery (nếu có thể):

$('#range').trigger('change'); 

hoặc chỉ

$('#range').change(); 

http://api.jquery.com/change/

Nhưng như tôi đã đề cập, trường hợp của bạn nên làm việc cũng vậy: http://jehiah.cz/a/firing-javascript-events-properly