Firing và chụp tùy chỉnh các sự kiện

Question

tưởng tượng kịch bản này (nó thực sự chỉ là một kịch bản):

• Tôi có một truy cập toàn cầu sẽ tăng kể trên mỗi click chuột.
• khi tôi đạt 50 nhấp chuột, tôi muốn bắn một sự kiện tùy chỉnh có tên là 'reachedCount'
• Tôi muốn đăng ký đối tượng cửa sổ của tôi để nắm bắt sự kiện với một cái gì đó giống như
  window.addEventListener('reachedCount', function(args){alert(args.count);}, false)

Vì vậy, vấn đề của tôi là tôi không biết, và không thể tìm thấy bất cứ nơi nào làm thế nào tôi có thể vượt qua các đối số để eventHandler của tôi. Ngoài ra, tôi đã thử phương thức Rikudo được đăng, nhưng nó không hoạt động trong IE lt 9.

Điều này có khả thi không? làm sao?

Answer 1

function fireEvent(name, target) { 
    //Ready: create a generic event 
    var evt = document.createEvent("Events") 
    //Aim: initialize it to be the event we want 
    evt.initEvent(name, true, true); //true for can bubble, true for cancelable 
    //FIRE! 
    target.dispatchEvent(evt); 
} 

function foobar() { 
    alert("foobar"); 
} 

function testEvents() { 
    window.addEventListener("foobar", foobar, false); //false to get it in bubble not capture. 
    fireEvent("foobar", document); 
} 

Tìm mã này bằng 1 phút tìm kiếm của Google. http://the.unwashedmeme.com/blog/2004/10/04/custom-javascript-events/

Answer 2

Sử dụng câu trả lời của Rikudo Sennin, bạn có thể chuyển tham số cho trình xử lý sự kiện của mình bằng cách đặt chúng bên trong sự kiện, giống như trình xử lý DOM thực hiện!

function fireEvent(name, target, param1, param2) { 
    //Ready: create a generic event 
    var evt = document.createEvent("Events") 
    //Aim: initialize it to be the event we want 
    evt.initEvent(name, true, true); //true for can bubble, true for cancelable 
    evt.param1 = param1; 
    evt.param2 = param2; 
    //FIRE! 
    target.dispatchEvent(evt); 
} 

function foobar(ev) { 
    alert("foobar" + ' ' + ev.param1 + ' ' + event.param2); 
} 

function testEvents(param1) { 
    window.addEventListener("foobar", foobar, false); //false to get it in bubble not capture. 
    fireEvent("foobar", document, 'test', param1); 
} 

Answer 3

Tất cả các đối số của bạn giống như tất cả các thông tin khác về sự kiện sẽ được đưa vào bên trong Đối tượng sự kiện. Đối tượng sự kiện hoàn toàn khép kín mang tất cả thông tin cần thiết về sự kiện đó. Giá trị đối số của bạn thường được đặt khi đối tượng sự kiện tùy chỉnh mới là được tạo (không phải khi sự kiện được kích hoạt).

(Tất cả các mảnh vỡ của mã ví dụ dưới đây chính xác phù hợp tất cả các mảnh vỡ khác Trong thực tế, một số ví dụ có thể không có ý nghĩa nhiều bởi bản thân;.. Bất cứ khi nào điều này xảy ra tham khảo mảnh ví dụ trước)

Đối với lập luận của riêng bạn, trong một số trường hợp, bạn có thể tái sử dụng các lĩnh vực hiện có (hoặc có lẽ thậm chí thêm lĩnh vực mới của riêng bạn):

var newEvent = ... 
newEvent['scrollX'] = your-own-custom-value; 

chính xác như thế nào những sẽ được thiết lập khác nhau tùy thuộc vào việc bạn có thể sử dụng tiêu chuẩn mới Cách HTML5 hoặc phải quay trở lại hỗ trợ trình duyệt cũ hơn. (Các "miếng chêm" khác nhau thêm hỗ trợ sự kiện tùy chỉnh ngay cả với các trình duyệt cũ không cung cấp bất kỳ thứ gì không được đề cập ở đây - nhiều người trong số họ sẽ cung cấp cách riêng của họ để đặt đối số.)

HTML5 cách liên quan đến việc "từ điển" (thứ hai) tham số để các nhà xây dựng đối tượng, một cái gì đó như thế này:

var newEvent = new CustomEvent('customname', { propertyname : propertyvalue, 
              anotherpropname : anotherpropvalue, 
               thirdpropname : thirdpropvalue, 
               etcpropname : etcpropvalue } ); 

phương pháp cũ tương ứng sẽ giống như thế này:

var newEvent = document.createEvent(); 
newEvent.initEvent('customname', true, true); 
newEvent['propertyname'] = propertyvalue; 
newEvent['anotherpropname'] = anotherpropvalue; 
newEvent['thirdpropname'] = thirdpropvalue; 
newEvent['etcpropname'] = etcprovalue; 

(Ví dụ trên cũng có thể làm cho nó rõ ràng hơn là những gì mà HTML5 CustomEvent co Trước hết, nên sử dụng tên thuộc tính hiện tại như thế này (hoặc tạo ra các thuộc tính của riêng bạn :-), thường không được khuyến nghị, bởi vì các vấn đề liên quan đến trình duyệt chéo và các rắc rối gỡ lỗi có thể khá nghiêm trọng.Đôi khi trong một thời gian này sẽ là cần thiết và nó sẽ làm việc, nhưng không dựa vào nó như là một kỹ thuật chung. Mặc dù một số loại đối tượng sự kiện bao gồm một thuộc tính được đặt tên cụ thể, các loại đối tượng sự kiện tương tự có thể không. Một số thuộc tính sự kiện có thể là "chỉ đọc". Các đối tượng sự kiện được biến nội bộ rất cao từ một trình duyệt này sang trình duyệt khác và thậm chí giữa các phiên bản trình duyệt. Và việc tạo các thuộc tính mới của riêng bạn có thể gây nhầm lẫn cho việc triển khai Javascript của trình duyệt.

Thay vào đó, hãy sử dụng một thuộc tính cụ thể được "đặt sang một bên" để bạn sử dụng trong các sự kiện tùy chỉnh và không có gì khác: chi tiết.

Thường thì bạn sẽ có nhiều đối số, nhưng chỉ có một thuộc tính được đặt sang một bên để bạn sử dụng. Vì vậy, các phương pháp truyền thống là phải luôn luôn làm cho tất cả lập luận của bạn vào chỉ là một "đối tượng", một cái gì đó như thế này:

var myargs = { my : 1, 
       own : getElementById('foo'); 
      args : { X : 32, Y : 53 } }; 

HTML5 cách đặt biến này sẽ giống như thế:

var newEvent = new CustomEvent('customname', { bubbles : true, 
              cancelable : true, 
               detail : myargs }); 

Càng lớn tuổi giao diện để làm điều tương tự sẽ trông giống như sau:

var newEvent = document.createEvent(); 
newEvent.initEvent('customname', true, true); 
newEvent['detail'] = myargs; 

(Tất nhiên nếu bạn sử dụng nhiều cú pháp cú pháp xoăn "Javasript" để giảm thiểu chữ của bạn , mã của bạn có thể trông hơi khác so với các ví dụ trên có ưu tiên rõ ràng.)

(Hai thuộc tính sự kiện hiện tại, 'bong bóng' và 'có thể hủy') phải luôn được đặt cho mọi sự kiện. . Nếu cách HTML5 mới đang được sử dụng, chúng sẽ luôn xuất hiện dưới dạng hai dòng bổ sung trong đối tượng là tham số thứ hai cho hàm tạo CustomEvent. Nếu cách cũ hơn đang được sử dụng, chúng sẽ là tham số thứ hai và thứ ba cho lệnh gọi initEvent (...).)

Hai phương pháp kích hoạt sự kiện tùy chỉnh khác nhau cũng được cung cấp. Cách HTML5 mới hơn sử dụng object.dispatchEvent (newEvent). Cách cũ hơn sử dụng object.fireEvent ('customname', newEvent, false). Ở đây "đối tượng" có nghĩa là DOMObject/Element; chính xác cái gì (nếu có) xảy ra nếu "đối tượng" là thứ gì đó bên cạnh DOM Element thậm chí còn cụ thể hơn trình duyệt so với phần còn lại của chủ đề này. (Trộn cách HTML5 và cách cũ hơn thường hoạt động, nhưng có thể gây nhầm lẫn. Một nguồn gây nhầm lẫn thường gặp khác là có chức năng hệ thống tên là fireEvent (...) và cũng định nghĩa hàm của chính bạn có cùng tên đó.)

(Có một số khác biệt phức tạp giữa hai cách kích hoạt sự kiện tùy chỉnh. Phương thức fireEvent (...) cũ hơn yêu cầu bạn chỉ định lại tên của sự kiện ngay cả khi bạn đã chỉ định nó trong initEvent (...) Và phương thức fireEvent (...) cũ hơn không kích hoạt "hành động mặc định" [có nghĩa là gì].)

Mặt khác, đối số tùy chỉnh được truy cập theo cùng một cách bất kể HTML5 hay phương pháp thiết lập sự kiện cũ hơn đã được sử dụng. Nó sẽ giống như thế này:

function customhandler(evt) { 
     alert(evt.detail.own); 

Trường hợp một số các giá trị tùy chỉnh của bạn trên thực tế các đối tượng tự, các ký hiệu dấu chấm có thể nhận được quá lâu nó có thể trông giống như một lỗi đánh máy ... nhưng nó không phải. Ví dụ:

function customhandler(evt) { 
     alert(evt.detail.args.X); 

Có vẻ như một số điều này có thể hoạt động hơi khác trong IE 9 trở xuống. Hy vọng rằng các vấn đề chỉ đơn giản là những vấn đề thường gặp với việc cố gắng tái sử dụng - hay thậm chí tạo các thuộc tính của một đối tượng sự kiện.Nếu các vấn đề phổ biến hơn, bạn có thể đặt thông báo "xin lỗi :-(" trên trang web của mình hoặc bạn có thể chờ IE6/7/8/9 chết hoặc bạn có thể tự mình cố gắng tự hack trình duyệt, hoặc bạn Nó không rõ ràng với tôi cho dù nó là tốt hơn để tìm một shim rằng "trông giống như" giao diện thông thường, hoặc sử dụng giao diện thay thế được cung cấp bởi shim cho tất cả mọi thứ (ngay cả khi giao diện thông thường là sẵn)

(Disclaimer:.. Dĩ nhiên tôi có thể là sai lầm về một số những điều trên ... :-)

Answer 4

những câu trả lời dường như trên để được phản

Trước hết tôi sẽ không sử dụng các hàm ẩn danh để chuyển các tham số tới xử lý sự kiện. Không phải là tôi đã thấy bất cứ ai đề cập đến điều này trong câu trả lời của họ; bạn chỉ cần tránh nó. Điều này là do khi bạn xóa trình xử lý sự kiện, bạn cần đề cập đến trình xử lý. Nếu trình xử lý ẩn danh, bạn không thể xóa người nghe.

Tạo CustomEvent mới.

var data = { x:20, y:30, rotationY: 60 }, 
    end = new CustomEvent('MOTION_FINISHED', { detail: data }); 
    this.dispatchEvent(end); 

Dường như chỉ cho phép thuộc tính 'chi tiết' chuyển các tham số. Tôi cũng đọc các thuộc tính 'bubbles' và 'cancelable' [sic: nasty American spelling], nhưng bạn không đề cập đến những thuộc tính đó.

Để lấy thông số của bạn:

function _handler(e){ 
    var x = (e.detail && e.detail.x) || 0; 
}