Code: Select all
element.addEventListener('onmouseup', javascript_is_stupid, false);
Code: Select all
element.onmouseup = javascript_is_stupid;
Code: Select all
element.onmouseup = function (e)
{
alert('javascript really is stupid');
}
but if i say
Code: Select all
<li onmouseup="javascript: javascript_is_stupid(e)">i just love javascript!</li>
i could really use a hand because i don't understand what the deal is. i tried to look all up and down through firebug but apparently you cant see what events are assigned to an element or when an event is being fired by an element.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.1 Template</title>
<style type="text/css">
@CHARSET "UTF-8";
div.select
{
display: inline-block;
position: relative;
}
div.select input.selected
{
display: inline-block;
width: 92%;
padding-left: 0.5em;
border: 0;
color: inherit;
background-color: inherit;
cursor: default;
vertical-align: middle;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
div.select > span
{
display: inline-block;
position: absolute;
top: 0;
right: 0.00em;
width: 1.3em;
height: 1.3em;
padding-top: 0.1em;
text-align: center;
vertical-align: middle;
}
div.select > ul
{
display: none;
position: absolute;
top: 1.5em;
left: 0;
margin: 0;
padding: 0;
background-color: inherit;
cursor: default;
}
div.select > ul > li
{
padding-left: 0.5em;
list-style: none;
color: inherit;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
div.select:active > ul
{
display: block;
width: inherit;
}
div.select:active > ul > li.selected
{
display: none;
}
/*
* make it pretty down here
*/
/* set the width here
*
* we have to set the width for both elements because
* ul.options needs absolute positioning to keep it
* from expanding the parent of div.select and
* absolute positioning prevents ul.options
* from inheriting the width of div.select
*/
div.select, div.select > ul
{
width: 12em;
}
/* set the fonts here. keep in mind that
* if you start making things different fonts sizes
* that you will break the layout
* and have to adjust elements individually
*/
div.select, div.select input, div.select span, div.select li
{
font-family: sans;
font-size: 12pt;
}
div.select
{
color: white; /* font color is inherited by all children */
border: 3px double #3f3f3f;
border-top-style: solid;
border-bottom-style: solid;
background-color: #4f5f6f;
}
/* CRITICAL:
* set a z-index here if your page uses a lot of absolute positioning.
* you don't want things to start overlapping funny
*/
div.select > ul
{
border: 3px double;
border-color: inherit;
border-top-style: none;
border-bottom-style: solid;
-moz-border-radius: 0;
left: -3px; /* compensate for any borders/padding */
}
/*
* adjust the height, position, or font-size
* here if the button doesn't sit right
* it's very finnicky
*/
div.select > span
{
color: inherit;
background-color: #1f2f8f;
}
div.select > ul > li:hover
{
background-color: #5f5f5f;
}
div.select, div.select > *:not(ul)
{
-moz-border-radius: 1em;
}
div.select:active
{
-moz-border-radius-bottomleft: 0;
}
div.select:active, div.select:active > span
{
-moz-border-radius-bottomright: 0;
}
input[type="radio"]
{
color: white;
border: 1px solid black;
}
</style>
<script type="text/javascript">
function getElementsByClass(searchClass, node, tag)
{
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
function optionSelected(e)
{
if (!e) var e = window.event;
lis = e.parentNode.childNodes;
for (i = 0; i < lis.length; i++)
{
if (lis[i].className = "selected")
{
lis[i].className = "";
}
}
e.className = "selected";
e.parentNode.parentNode.childNodes[0].value = e.innerHTML;
}
window.onload = function()
{
// get all select divs
selects = document.getElementsByClassName("select", null, "div");
for (i = 0; i < selects.length; i++)
{
// get all list items for this select div
lis = selects[i].getElementsByTagName("li");
// get the input for this select div
input = selects[i].firstChild;
for (n = 0; n < lis.length; n++)
{
// since we are already here
// lets put the default option in the input
if (lis[i].className = "selected")
{
//input.value = lis[i].innerHTML;
}
lis[i].onmouseup = optionSelected;
}
}
}
</script>
</head>
<body>
<h1>Example of a styleable select element</h1>
<div class="select"><input type="text" class="selected" value="check javascript" disabled="disabled" /><span>•</span>
<ul class="options">
<li class="selected">artist</li>
<li>album</li>
<li>song</li>
</ul>
</div>
<p>this is an example of a stylable drop down built with html, css, and javascript</p>
<p>i can't imagine why a current day client would have javascript disabled when most popular websites use it in one way or another.</p>
<p>there have been other examples of this but none that i was pleased with. the one i liked most replicated the events fired when you use a select but i did not like that approach because the list box would still be styled by the os.</p>
<p>this is a very immature example and the code is likely not cross-browser compliant. personally, i test with firefox 3.5.5 and opera 10.10</p>
</body>
</html>
but lets say i say something like
Code: Select all
if (lis[i].onmouseup = optionSelected)
alert('hey am i making you angry.. wait dont answer that');
addEventListener returns false though. leaving me even more confused.
'preciate it!