24/08/2010
1
Lập trình ứng dụng JavaScript, ứng dụng web ngày càng trở nên dễ dàng và đơn giản hơn, bởi sự hỗ trợ đầy mạnh mẽ từ các thư viện JavaScript như jQuery, MooTools. Tuy nhiên, trong phạm vi bài viết hướng dẫn sử dụng JavaScript này, tác giả chỉ đề cập đến các sự kiện trong JavaScript được vận hành, xử lí như thế nào thông qua các thư viện JavaScript, dưới các trình duyệt khác nhau. Vui lòng vào trang chi tiết để xem thêm.
- Demo
- Phóng to
- Tải lại
- Cửa sổ mới
Miễn phí web hosting 1 năm đầu tại iPage
Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?
Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.
Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Javascript is becoming much more accessible thanks to libraries such as jQuery & Mootools. In this article, hopefully to form part of a new series, we are going to take a look behind the libraries - not looking at the code of the libraries but revealing how much easier they make our lives.
Adding Events - Easy with Libraries!
Today we're going to be looking at adding events. With jQuery, it's as simple as:
1 | $('#header').click(function() {...}); |
However with normal javascript it's not so nice. As you might expect, Firefox, Safari, Chrome, Opera and similar use one set (the correct, I might add) way of doing it, whereas Internet Explorer (all of them!) use a different code. That means for each event we add, we need to write the code twice. No worries though. I'm going to show you both sets of code and then we'll create our own function to abstract the code away and let us write one set of code which will work with every browser.
Events without the Library
Firstly, we'll set up just a simple function which we will run when an element is clicked.
1 | function doSomething() |
2 | { |
3 | alert('you clicked me!'); |
4 | } |
And an element for us to select:
1 | <h1 id="header">This is what we'll be clicking on!</h1> |
Select the Element for Clicking!
So our first step (and this works in all browsers, thankfully!) we will just select the header element:
1 | var h1 = document.getElementById('header'); |
Firefox, Safari, Opera, Chrome and so on.
So this is the code that all popular, modern day browsers use. It's incredibly straight forward and is called addEventListener():
1 | h1.addEventListener('click', doSomething, false); |
The function takes 3 arguments. The first is the event - when you want the function to be run. We've used click, but there are countless others. The second is the function itself - we created this function earlier. Note that because we are passing the function through as an argument we don't need to add brackets. The third is to do with javascript bubbling and when the event is fired. This is something which is a bit too complex right now, but we'll cover it in the future!
Internet Explorer
IE's code is pretty similar - oh Microsoft, why not just use the same as everyone else?
1 | h1.attachEvent('onclick', doSomething); |
This only takes two arguments, the event and the function to execute. Whereas with most browsers you would use 'click', this time it's 'onclick'. Simply put, add 'on' to any event.
If you run the respective code in the relevant browser, it will work. If you use the wrong code, check, and it wont work.
Our own Version.
So, this is a pain right? What we are going to do now is create our own function which will allow us to only write the addEvent code once, not twice. I'll show you all the code and using the comments you should be able to see most of what is going on:
01 | function addEvent(elem, evt, func, cap) |
02 | { |
03 |
04 | if(elem.attachEvent) |
05 | { |
06 | //if this evaluates to true, we are working with IE so we use IE's code. |
07 | elem.attachEvent('on'+evt, func); |
08 | } else { |
09 | //the statement has evaluated to false, so we are not in IE/ |
10 | //the capture argument is optional. If it's left out, we set it to false: |
11 | if(!cap) cap = false; |
12 | //and use the normal code to add our event. |
13 | elem.addEventListener(evt, func, cap); |
14 | } |
15 | } |
And the usage of this is straight forward:
1 | addEvent(h1, 'click', doSomething, false); |
And We are Done
I hope you enjoyed this, it's always good to step back from the library and write some of our own functions.
- Lượt gửi (0)
- Mới
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:
Jack Franklin [more]
11,927
1
0
0
14.86 KBytes
0 lượt đánh giá / 11,927 lượt xem / 1 lời bình
24/08/2010
Lập trình ứng dụng JavaScript, ứng dụng web ngày càng trở nên dễ...Sự kiện JavaScript: Cái nhìn chi tiết bên trong - Sự kiện JavaScript: Cái nhìn chi tiết bên trong - Ngôn ngữ: tiếng Việt
Phản hồi