Bạn có thể sử dụng phần tử “script” để đưa kịch bản vào file XUL. Bạn có thể nhúng mã kịch bản nguyên bản trực tiếp trong hồ sơ XUL được đặt trong thẻ “script”, nếu bạn muốn đưa vào dòng code trong một file riêng biệt với một cửa sổ của XUL, thuộc tính
“src” được chỉ định để sử dụng liên kết tới một file kịch bản “script” bên ngoài.
<script src="findfile.js"/>
<script src="chrome://findfiles/content/help.js"/>
<script src="http://www.example.com/js/items.js"/>
7.1 Đáp ứng tới sự kiện
Kịch bản sẽ chứa đựng mã trả lời tới nhiều sự kiện thúc đẩy bởi người dụng, hoặc những tình trạng khác. Có khoảng 30 hoặc những sự kiện khác nhău có thể được điều khiển bởi vài cách khác nhău. Một sự kiện tiêu biểu là người dùng nhấn chuột hoặc nhấn vào một phím. Mỗi phần tử XUL có khả năng thúc đẩy những sự kiện nhất định trong những tình trạng khác nhau. Vài sự kiện đợc thúc đẩy chỉ bởi những phần tử nhất định.
Mỗi sự kiện có một tên, ví dụ: “mouseover” là tên mà sự kiện người dùng di chuyển chuột qua một phần tử giao diện, XUL sử dụng cùng cơ chế xử lý được định nghĩa trong DOM event. Khi một hành động được kích hoạt, giống như là di chuyển chuột, một đối tượng được tạo ra đáp ứng lại kiểu sự kiện đó. Nhiều thuộc tính là tập hợp những đối tượng sự kiện như vị trí của con trỏ chuột, phím được nhấn,…
Các giai đoạn sự kiện được gửi tới XUL:
- Trong pha hành động “tóm” sự kiện, đầu tiên sự kiện được gửi tới cửa sổ window, său đó gửi tới tài liệu document, theo phần tử gốc XUL đi qua tới nơi mà phần tử phát sinh sự kiện.
- Trong pha đích, sự kiện được gửi cho phần tử XUL đích.
- Trong pha “nổi bọt”, sự kiện được gửi trở lại lên trên qua mỗi phần tử cho đến khi quay trở lại cửa sổ window.
Bạn có thể đáp ứng một sự kiện trong quá trình “tóm” sự kiện hoặc trong quá trình “nổi bọt”. Một khi sự kiện kết thúc phát sinh, một vài hành động mặc định sẽ xảy ra, cái mà được xây dựng trong hành vi của phần tử.
Ví dụ: khi mouse lướt tơi một button nằm trong một box, một sự kiện “mousemove” phát sinh, và gửi đầu tiên tới window, tới document và tới box. Hoàn thành pha “tóm” sự kiện.
Tiếp theo, sự kiện “mouseover” sẽ được gửi lại button. Kết thúc, pha “nổi bọt” gây ra sự kiện sẽ được gửi tói box, document, và cửa sổ windown. Pha “nổi bọt” thực chất là đảo ngược của pha hành động bắt giữ sự kiện.
Bạn có thể gắn những người nghe “listener” tới mỗi phần tử “lắng nghe” những sự kiện trong thời gian mỗi bước lan truyền sự kiện. Vì một sự kiện được đi qua cho tất cả các phần tử phía trên, bạn có thể gắn một “listener” tới một phần tử đặc biệt hoặc tới một phần tử cao hơn trong cây phân cấp. Do đó, một sự kiện gắn cho một phần tử cao hơn trong cây phân cấp sẽ nhận thông báo của tất cả các phần tử bên trong nó, tron khi một sự kiện được gán liền với nút chỉ nhận được những thông báo gắn liền với nút đó. Điều này hữu dụng khi có một vài phần tử bạn muốn điều khiển giống nhău hoặc có mã tương tự.
Sự kiện chung nhất được sử dụng là “command”. Sự kiện command được kích hoạt khi một người dùng kích hoạt một phần tử, ví dụ như nhấn một nút button, thay đổi một checkbox, hoặc lựa chọn một biểu tượng từ menu. Sự kiện command là một sự kiện hữu ích một khi nó tự động điều khiển những cách kích hoạt những phần tủ khác nhău. Một sự kiện command được kích hoạt bất chấp người dùng sử dụng button hay mouse.
Có hai cách để gán một người lắng nghe sự kiện tới một phần tử. trước hết, bằng cách sử dụng thuộc tính với kịch bản với những giá trị của nó. Thứ hai, bằng cách gọi hàm addEventListener tới phần tử đó. Trước đây, có thể điều khiển sự kiện tại bất kỳ pha nào và có thể điều khiển để gán nhiều lắng nghe “listener” tới một phần tử. sử dụng mẫu thuộc tính “attribute” là chuẩn cho hầu hết sự kiện, sẽ được trình bày dưới đây.
7.2 Lắng nghe sự kiện thuộc tính “attribute event listeners”
Để sử dụng mẫu thuộc tính, đặt một thuộc tính trên một phần tử nơi mà bạn muốn lắng nghe sự kiện, tên của nó nên là tên có đầu ngữ “on”, ví dụ thuộc tính liên quan tới sự kiện
“command” là “onCommand”. Giá trị của thuộc tính có thể là một vài kịch bản được chạy khi sự kiện xảy ra. Đặc biệt, dòng mã này ngắn và chỉ cần gọi một tên hàm được định nghĩa trong một kịch bản riêng biệt. ví dụ về một đáp ứng khi một button được nhấn:
<button label="OK" oncommand="alert('Button was pressed!');"/>
Khi sự kiện command được “nổi bọt”, nó có thể thực hiện việc lắng nghe sự kiện trong một phần tử. ví dụ dưới đây, listener được đặt trên một box và nhận những sự kiện từ cả hai phần tử:
<vbox oncommand="alert(event.target.tagName);">
<button label="OK"/>
<checkbox label="Show images"/>
</vbox>
Trong ví dụ này, sự kiện command sẽ “nổi bọt” lên từ một butto hoặc một checkbox tới vbox, nơi mà đã được điều khiển. nếu một lắng nghe thứ 2 (điều khiển trên thuộc tính ) được đặt trên button, dòng mã này sẽ được gọi trước tiên, theo sau là điều khiển của vbox, nơi mà nó được điều khiển.
Sự kiện điều khiển được thông qua đối tượng sự kiện với một đối số mặc nhiê là “event”.
Cái này sử dụng để lấy một thông tin đặc biệt về sự kiện. một thuộc tính thường sử dụng là thuộc tính đích “target” của sự kiện, nơi mà giữ phần tử thực sự gây ra sự kiện.
“target” hữu ích khi việc sử dụng một sự kiện “buble” để bạn có thể có một tập hợp của tất cả những nút mà được điều khiển bởi cùng một kịch bản.
7.3 Lắng nghe sự kiện DOM
Cách thứ hai để thêm vào một điều khiển sự kiện là gọi một phương thức addEventListener của phần tử. cái này cho phép bạn gán một lắng nghe sự kiện động và lắng nge sự kiện trong pha bắt giữ.
Cú pháp tương tự như său:
<button id="okbutton" label="OK"/>
<script>
function buttonPressed(event){
alert('Button was pressed!');
}
var button = document.getElementById("okbutton");
button.addEventListener('command', buttonPressed, true);
</script>
getElementById(), hàm trả về phần tử với id của nó, trong này là button. Hàm addEventListener() được gọi để thêm vào một sự kiện bắt giữ. Đối số đầu tiên là tên của sự kiên mà nó lắng nghe, đối số thứ hai là sự kiện lắng nghe sẽ được gọi kkhi sự kiện xảy ra. Cuối cùng, đối số cuối cùng đặt là “true” chỉ ra đang lắng nghe sự kiện bắt giữ, bạn cũng có thể lắng nghe sự kiện nổi bọt bằng cách cài đặt đối số cuối cùng là “false”.