Différence entre onclick et click?

Bonsoir à tous!

Je suis en train de créer un éditeur wysiwyg, et mon code fonctionne mal. Pour une raison qui m'est inconnue, lorsque j'appelle ma fonction insertTag() depuis un onclick dans le HTML, tout va bien. A l'inverse, quand l'appel passe via la méthode .click(), rien ne va.
Auriez vous des idées?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>WYSIWYG</title>
</script>
</head>
<body>
<div id="main">
	<div>
		<p>
			<input type="button" value="G" id="gras"></input>
			<input type="button" value="I" onclick="insertTag('&lt;italique&gt;', '&lt;/italique&gt;', 'textarea')" />
		</p>	
	</div>	
	<textarea id="textarea" cols="150" rows="10"></textarea>
	<div id="previewDiv"></div>
</div>
<script src="jQuery.js"></script>
<script src="wysiwyg.js"></script>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
	$(document).ready(function () {
		$("#gras").on("click", function() {
			insertTag("&lt;gras&gt;, &lt;/gras&gt;, textarea");
		});
	});
	function insertTag(startTag, endTag, textareaId, tagType) {
		var field = document.getElementById(textareaId);
		var scroll = field.scrollTop;
		field.focus();
		var startSelection   = field.value.substring(0, field.selectionStart);
		var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
		var endSelection     = field.value.substring(field.selectionEnd);
		field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		field.focus();
		field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
	}  	
 
	function preview(textareaId) {
		var field = textareaId.value;
		field = field.replace(/&/g, '&amp;');
		field = field.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		field = field.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');	
		field = field.replace(/&lt;gras&gt;([\s\S]*?)&lt;\/gras&gt;/g, '<strong>$1</strong>');
		field = field.replace(/&lt;italique&gt;([\s\S]*?)&lt;\/italique&gt;/g, '<em>$1</em>');
		document.getElementById("previewDiv").innerHTML = field;
		console.log(field);
	}
 
	var area = document.getElementById("textarea");
	preview(area);

Merci d'avance!