Vai trò của bộ điều khiển trong MVC là hoạt động giống nh− thành phần trung gian giữa Model và View. Trong một ứng dụng GUI nh− là ứng dụng client Ajax, lớp điều khiển chứa các điều khiển sự kiện. Với các trình duyệt web, th−ờng có 2 mô hình sự kiện khác nhau.
3.1 Điều khiển sự kiện JavaScript truyền thống
Trong các trình duyệt web, ứng dụng JavaScript cho phép chúng ta định nghĩa đoạn mã sẽ đ−ợc thực hiện để phản hồi lại một sự kiện của ng−ời dùng( ví dụ nh− là các sự kiện bấm chuột hoặc bàn phím.). Với các trình duyệt web có hỗ trợ Ajax, những điều khiển sự kiện có thể đ−ợc đăng ký cho hầu hết các
thành phần. Ta có thể sử dụng các điều khiển sự kiện để kết nối các giao diện ng−ời dùng (ở đây là View) với mô hình đối t−ợng.
Các thành tố DOM có một số l−ợng nhỏ các đặc tính đ−ợc định nghĩa từ tr−ớc mà ở đó các hàm trả về có thể đ−ợc đăng ký. Ví dụ, để thêm một hàm mà sẽ đ−ợc gọi khi kích chuột vào thành phần myDomElement, ta có thể viết nh− sau:
MyDomElement.onclick=showAnimatedMonkey
trong đó myDomElemenr là một thành phần DOM mà ta có điều khiển hàm. Show-AnimatedMonkey là một hàm, đ−ợc định nghĩa nh− sau:
Function showAnimatedMonkey(){}
đây là một hàm JavaScript nguyên thuỷ. Cần chú ý rằng khi đăng ký điều khiển sự kiện, ta thực hiện chuyển đối t−ợng hàm, không phải là gọi tới đối t−ợng đó, vì nó không có không có tham số sau phần tên hàm. Đây là một lỗi th−ờng mắc phải:
MyDomElement.onclick=showAnimatedMonkey()
Thoạt nhìn nó giống nh− cách xử lý những hàm thông th−ờng với những đối t−ợng lớp thứ nhất. Tuy vậy nó sẽ không thực hiện những gì chúng ta mong muốn. Hàm sẽ đ−ợc gọi khi chúng ta thực hiện một đăng ký chứ không phải khi kích vào thành phần DOM. Đặc tính onclick sẽ đ−ợc thiết lập cho bất cứ thứ gì do hàm trả về. Trừ khi ta thực hiện theo một cách khác liên quan tới các hàm mà trả về chuẩn cho các hàm khác. Đây là cách thức khai báo đúng:
MyDomElement.onclick=showAnimatedMonkey;
Khai báo này trả về một giá trị chuẩn cho hàm gọi ng−ợc tới thành phần DOM của ta, nói rằng đây là hàm liên quan tới việc khi node đ−ợc kích. Các thành phần DOM có rất nhiều những đặc tính mà ở đó có các hàm điều khiển sự kiện có thể đ−ợc tiếp cận. Các hàm gọi ng−ợc điều khiển sự kiện thông th−ờng cho công việc GUI đ−ợc đ−a ở bảng d−ới. Các đặc tính t−ơng tự cũng có thể tìm thấy đ−ợc trong trình duyệt web JavaScript. Hàm
XMLHttpRequest.onreadystate và hàm window.onload cũng là các hàm điều khiển sự kiện mà có thể đ−ợc đăng ký bởi ng−ời lập trình.
Chúng ta đã có một điều khiển trên một đối t−ợng DOM, và đã đăng ký một hàm gọi ng−ợc cho đặc tính onclick. Khi một đối t−ợng DOM nhận đ−ợc tín hiệu kích chuột thì sẽ liên quan tới hàm gọi ng−ợc. Mặc dù vậy nội dung của hàm sẽ đ−ợc đăng ký cho node DOM mà nhận sự kiện này. Phụ huộc vào vị trí và cách thức của hàm đ−ợc khai báo, cách thức đăng ký trên có thể dẫn đến sự lộn xộn.
Để làm rõ vấn đề này, ta sẽ tìm qua một ví dụ. Ta định nghĩa một lớp thể hiện một đối t−ợng phím bấm (button), có một chuẩn cho node DOM, một hàm điều khiển gọi ng−ợc, và một giá trị mà đ−ợc thể hiện khi phím đ−ợc bấm. Bất kỳ trạng thái của phím sẽ t−ơng ứng với sự kiện kích chuột, và vì thế ta định nghĩa hàm gọi ng−ợc giống nh− ph−ơng thức của một lớp phím. Sau đây là cách xây dựng hàm : Function Button(value,domE1){ This.domE1=domE1; This.value=value; This.domE1.onclick=this.clickHandler; }
Ta định nghĩa một điều khiển sự kiện giống nh− một phần của lớp Button:
Button.prototype.clickHandler=function{ Alert(this.value);
}
Ta thấy rằng hàm này vẫn ch−a đáp ứng đ−ợc những gì chúng ta mong muốn. Box cảnh báo sẽ tạo trả về một bản tin undefined, không phải là đặc tính giá trị mà chúng ta truyền cho cấu trúc. ở đây, hàm clickHandler có liên quan tới trình duyệt khi thành phần DOM đ−ợc kích, và nó thiết lập nội dụng
hàm cho thành phần DOM, không phải là đối t−ợng JavaScript button. Vì vậy, this.value sẽ là đặc tính giá trị của thành phần DOM, không phải là đối t−ợng Button. Nhiệm vụ của ta là xem xét khai báo của hàm điều khiển sự kiện. Ta cần cố định các đối t−ợng bằng cách truyền một giá trị chuẩn cho đối t−ợng Button của thành phần DOM nh− sau:
Function Button (value,domEl){ This.domEl=domEl;
This.domEl.buttonObj=this;
This.domEl.onclick=this.clickHandler }
Thành phần DOM vẫn không có giá trị đặc tính, nh−ng nó có một giá trị chuẩn cho đối t−ợng Button, có thể sử dụng để có đ−ợc giá trị. Ta có hàm điều khiển sự kiện nh− sau:
Button.prototype.clichHandler=function(){ Var buttonObj=this.buttonObj;
Var value=(buttonObj && buttonObj.value)? ButtonObj.value: “unknown value”;
Alert(value); }
3.2. Mô hình sự kiện W3C
Mô hình sự kiện linh hoạt hơn do W3C đề xuất là khá phức tạp. Một số l−ợng lớn những khán thính giả có thể đ−ợc truy cập vào một thành phần DOM. Hơn nữa nếu một hoạt động thực hiện trong một vùng của tài liệu, mà vùng này có một vài thành phần bị ghi đè, các điều khiển sự kiện của từng thành phần đ−ợc cho một cơ hội để điều chỉnh và để gọi trong hàng đợi sự kiện, chúng ta gọi là sự kiện “nuốt”. Hàng đợi sự kiện đ−ợc duyệt 2 lần, lần đầu từ ngoài vào trong (từ thành phần tài liệu xuống) và sau đó duyệt lần nữa
từ trong da ngoài. Trong thực tế, với những ứng dụng trình duyệt khác thì sẽ xuất hiện những tập con của nó.