+1
Hỗ trợ về dispatch event
Chào các chuyên gia,
Mình không phải dân kỹ thuật, nhưng đang muốn tìm hiểu cách để tương tác với web từ bảng F12 của web phần tab console Như bình thường mình sẽ hay dùng cấu trúc document.getElementsByClassName('text_box_name').value = 'abc' để điền giá trị cho 1 ô textbox. Chuyện sẽ chả có gì để nói nếu cái ô textbox đó không đi kèm với 1 lố event Như 1 số case đơn giản, event là change thì mình chỉ cẩn document.getElementsByClassName('text_box_name').dispatchEvent(new Event('change',{bubbles:true})) để nổi các bong bóng sự kiên đi kèm lên sau khi đoạn text 'abc' phía trên được fill vào.
Tuy nhiên gần đây mình có gặp các ca khó là, khi cái ô text box đó mỗi một lần bấm chữ cái là tên trong danh bạ filter dần. Nghĩa là nó liên quan đến eventkeyboard chứ k đơn giản chỉ là thay đổi như trên
mình thử monitorevent thì thấy nó thành 1 cụm như sau keydown -> keypress -> textInput -> input -> keyup
Vậy làm thế nào để mình có thể kích hoạt được nhanh nhất cả cụm này, đặc biệt là ví dụ mình gõ 'abc' vào là kích hoạt filter danh bạ liên quan 'abc' luôn
Chứ lại tên dài ngoằng, bấm từng phím 1 thì cũng "ươn" đấy nhỉ 
Kèo này khó quá, mò mẫm cả tháng không ra, nhờ các chuyên gia chỉ giúp mình với ạ.
Mình sẽ hậu tạ cốc trà sữa qua tài khoản nhé
Trân trọng cảm ơn,
Thêm một bình luận
2 CÂU TRẢ LỜI
Bạn có thể viết ví dụ một đoạn về debounce này k
0
Bạn có thể nói rõ hơn case của bạn không? Theo mình hiểu thì như thế này: Bạn đang có 1 ô text box. Khi nhập vào ô này thì sẽ hiện ra những người có tên trùng với các ký tự vừa nhập. Yêu cầu: Khi nhập 1 chuỗi ký tự liên tiếp thì chỉ filter 1 lần thay vì nhiều lần (VD: 'abc' thì chỉ filter 1 lần thay vì 'a' -> filter -> b -> filter -> c -> filter. Mình nghĩ là bạn có thể thử cách là removeEventListener của các event trên "keydown -> keypress -> textInput -> input -> keyup" xong bạn tự add 1 listener mới vào.
Vậy mình xử lý đoạn add listener kia cũng phải add đủ bộ đã xoá hả bạn, mình newbie cũng chưa rõ cấu trúc phần sau của addeventlistener , mình có phải thêm hàm hay gì k bạn
@nam90nh Mình nghĩ là chỉ cần add những gì event bạn cần thôi. trong trươngf hợp này mình nghĩ là chỉ cần event 'focusout' là đủ. Tuy nhiên mình đang k thực sự hiểu rõ vấn đề của bạn lắm @@
@hungtreo nói thế này chắc dễ hiểu hơn, 1 trang web nó có sẵn event rồi , k phải mình tạo rồi addevent nha, mình là đang tương tác với 1 trang web sẵn có trên mạng ấy, và hoàn toàn mình cũng k biết người ta xây cái web đó như thế nào, gán event gì, function gì đi kèm.
Cái mình cần đơn giản : automation cái web đó, và mình đang dùng lệnh DOM-Javascript để làm gì, để điền, để click ( chỉ vậy thôi )
Nhưng vấn đề là gì, nhiều khi bạn gán value cho 1 element textbox bằng DOM JS, nó chỉ hiển thị cái value bạn đang gán, mà cóc chạy như khi bạn tự gõ tay vào ô đó.
Ví dụ gõ tay nó filter theo từng lần bấm phím của mình, thì dùng lệnh DOM JS gán value, nó hiển thị vậy thôi, chả filter gì cả.
@nam90nh nên thành ra add event với remove event mình thấy chưa giải quyết vấn đề của mình được ý 
hoặc mình chưa biết làm.
Vì add event hay remove event đều cần 1 action đi kèm khi sự kiện chuột hoặc bàn phím xảy ra. Mình đâu có biết viết function gì đâu. cái mình cần là làm cái function có sẵn nó chạy, chứ k phải add mới hay bỏ cũ đi
@nam90nh Dưới đây là 1 vi dụ mình có viết thử, các thành phần bao gồm:
- 1 ô input với id = "abc"
- 1 ô select box với id = "location" Action:
- bạn có thể nhập giá trị bất kỳ vào ô input hoặc giá trị bất kỳ vào ô select
- tuy nhiên với đoạn code dưới thì khi nào bạn nhập xong ở ô input thì giá trị của ô select box sẽ luôn là A01 Note: ví dụ này có thể không giống 100% nhưngx gì bạn cần nhưng mà mình nghĩ đi theo cách này có thể giải quyết được vấn đê bạn đang gặp phải
const haha = document.getElementById('abc');
haha.addEventListener("focusout", () => {
const select = document.getElementById("location");
select.value = "A01";
})
