thêm hàm cho onclick

[Dau Hai]

Em có một input có thuộc tính onclick="doSomeFunction();" bây giờ muốn thêm một hàm nữa ví dụ như onclick="doSomeFunction(); doSomeFunction2();". Công việc này có làm bằng Javascript được không ah? Em cám ơn mọi người.

[Huynh Quoc Huy]

Tốt nhất bạn nên gọi hàm doSomeFunction2() trong doSomeFunction();

[Hưng Nguyễn]

On Jan 7, 8:41 am, Huynh Quoc Huy <huynhquoc...@gmail.com> wrote:
> Tốt nhất bạn nên gọi hàm doSomeFunction2() trong doSomeFunction();

Đây là cách dễ nhất, k phải tốt nhất.

Pure JS code:

input = document.getElementById('input id cua ban');
input.onclick += do_some_things;
input.onclick += do_more_things

jQuery hoặc các JS framework có sẵn sẽ giúp bạn làm việc này dễ hơn.

[hoatle]

Thứ nhất về event handler cho các element, bạn nên tránh dùng inline
như:

<input type="text" onclick="doSomething()" />

Mà nên đặt cho nó 1 cái id rồi gắn event handler vào:

<input type="text" id="idRef" />

Sau đó trong file js thì làm thế này:

var inputEl = document.getElementById('idRef');
inputEl.onclick = function() {
doSomeThing();
doSomeThing2();
}

Chú ý muốn làm thế này thì bạn phải đảm bảo dom được load xong (xem ở
đây: http://www.javascriptkit.com/dhtmltutors/domready.shtml).

Nếu như dùng trong jQuery:

$(document).ready(function() {
//code của bạn đặt ở đây sẽ được chạy khi dom load xong.
});

Nếu ko phân biệt thứ tự nhiều event handler có thể dùng
addEventListener như sau (code tớ vẫn đang dùng và ko có vấn đề gì).
Cái removeEventListener chưa dùng lần nào :P.

/**
* Cross browser add event listener method. For 'evt' pass a string
value with the leading "on" omitted
* e.g. Util.addEventListener
(window,'load',myFunctionNameWithoutParenthesis,false);
* @param obj object to attach event
* @param evt event name: click, mouseover, focus, blur...
* @param func function name
* @param useCapture true or false; if false => use bubbling
* @static
* @author hoatle
* @see http://phrogz.net/JS/AttachEvent_js.txt
*/
function addEventListener(obj, evt, fnc, useCapture) {
if (obj === null || evt === null || fnc === null || useCapture ===
null) {
debug.warn('all params is required from Util.addEventListener!');
return;
}
if (!useCapture) useCapture = false;
if (obj.addEventListener){oatle
obj.addEventListener(evt, fnc, useCapture);
} else if (obj.attachEvent) {
obj.attachEvent('on'+evt, fnc);
} else{
myAttachEvent(obj, evt, fnc);
obj['on'+evt] = function() { myFireEvent(obj,evt) };
}

//The following are for browsers like NS4 or IE5Mac which don't
support either
//attachEvent or addEventListener
var myAttachEvent = function(obj, evt, fnc) {
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length] = fnc;
}

var myFireEvent = function(obj, evt) {
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) evts[i]();
}
}

/**
* removes event listener.
* @param obj element
* @param evt event name, 'click', 'blur'. 'focus'...
* @func function name to be removed if found
* @author hoatle
* @static
* //TODO make sure method cross-browsered
*/
function removeEventListener(obj, evt, func) {
if (obj.removeEventListener) {
obj.removeEventListener(evt, func, false);
} else if (obj.detachEvent) {//IE
obj.detachEvent('on'+evt, func)
}
}

Sau đó add các thể loại event handler vào:

function doSomething() {alert('doSomething()');}
function doSomething2() {alert('doSomething2()');}
function doSomethingN() {alert('doSomethingN()');}

var inputEl = document.getElemntById('idRef');
addEventListener(inputEl, 'click', doSomething, false);
addEventListener(inputEl, 'click', doSomething2, false);
addEventListener(inputEl, 'click', doSomethingN, false);

Nên dùng cái này nếu muốn có nhiều event handler (nhưng ko phân biệt
thứ tự cái này chạy trước, chạy sau) cho một element.
Lưu ý: hiện tại chỉ biết addEventListener vào thôi chứ chưa biết là có
bao nhiêu event handler, sau này sẽ có :D.
Cheer! :D

On Jan 7, 8:41 am, Huynh Quoc Huy <huynhquoc...@gmail.com> wrote:

[Huynh Quoc Huy]

Cám ơn bạn nhiều !

[hoatle]

Ặk, quên mất, phải bỏ dòng này đi trong addEventListener:

debug.warn('all params is required from Util.addEventListener!');

Trong quá trình code, tớ sợ nhất dùng alert để debug.
Để logging dùng debug này là hay nhất: http://benalman.com/projects/javascript-debug-console-log/

[Huynh Quoc Huy]

Mình thấy thư viện bạn dùng hay được sử dụng trong Flash lắm. Trước đây không hiểu lắm nhưng giờ thì hiểu rõ hơn :D
Cám ơn bạn một lần nữa. Và đặc biệt cái này http://benalman.com/projects/javascript-debug-console-log/

[Dau Thanh Hai]

Nếu sử dụng EventListener thì truyền tham số vào thế nào được ạ?

[hoatle]

Có một số cách để truyền tham số như sau:

function doSomething(param1, param2) {
alert(this);
}

addEventListener(el, 'click', function() {
doSomething(1, 2);
}, false);

Khi sử dụng cách inline thì this trong thằng event handler nó refer
luôn đến element đó nên rất tiện khi lấy value; có thể dùng từ khóa
this refer đến element theo cách addEventListener theo cách này:

addEventListener(el, 'click', function() {
doSomething(1, 2); // alert ra thằng window element
//Để alert ra thằng el để lấy value chẳng hạn thì dùng 1 trong 2
cách sau để truyền context:
doSomething.call(el, 1, 2);
//Hoặc
doSomething.apply(el, [1, 2]);
}, false);

Xem thêm: http://blog.metawrap.com/blog/TheVeryUsefulJavaScriptCallAndApplyFunctionsForOverridingThisForAGivenFunction.aspx

à, đoạn code trên của tớ bị thừa "oatle" do khi type chạm vào cái
thằng touch pad:

if (obj.addEventListener){oatle
obj.addEventListener(evt, fnc, useCapture);
} else if (obj.attachEvent) {
obj.attachEvent('on'+evt, fnc);
} else{
myAttachEvent(obj, evt, fnc);
obj['on'+evt] = function() { myFireEvent(obj,evt) };
}

bỏ "oatle" đi nha.

[hoatle]

Tớ có viết bài này cho rõ hơn ở đây:
http://hoatle.net/vi/Gan-Nhieu-Ham-Xu-Ly-Su-Kien-Vao-1-Phan-Tu-Trong-JavaScript

On Jan 7, 5:10 pm, hoatle <hoatle...@gmail.com> wrote:
> Có một số cách để truyền tham số như sau:
>
> function doSomething(param1, param2) {
>   alert(this);
>
> }
>
> addEventListener(el, 'click', function() {
>   doSomething(1, 2);
>
> }, false);
>
> Khi sử dụng cách inline thì this trong thằng event handler nó refer
> luôn đến element đó nên rất tiện khi lấy value; có thể dùng từ khóa
> this refer đến element theo cách addEventListener theo cách này:
>
> addEventListener(el, 'click', function() {
>   doSomething(1, 2); // alert ra thằng window element
>   //Để alert ra thằng el để lấy value chẳng hạn thì dùng 1 trong 2
> cách sau để truyền context:
>   doSomething.call(el, 1, 2);
>   //Hoặc
>   doSomething.apply(el, [1, 2]);
>
> }, false);
>

> Xem thêm:http://blog.metawrap.com/blog/TheVeryUsefulJavaScriptCallAndApplyFunc...

[Dau Hai]

Cám ơn anh HoaLe

2010/1/8 hoatle <hoat...@gmail.com>

--
Bạn nhận được thư này vì bạn đã được đăng ký vào nhóm Google Groups "PHPVietnam".
Để đăng bài lên nhóm này, hãy gửi email đến phpvi...@googlegroups.com.
Để huỷ đăng ký khỏi nhóm này, hãy gửi email tới phpvietnam+...@googlegroups.com.
Để biết tuỳ chọn khác, hãy truy cập nhóm này tại http://groups.google.com/group/phpvietnam?hl=vi.

--
Best Regards
Đậu Thanh Hải
K51CC-Coltech-VNU