javascript - What does role=button mean? -

i found in google+ project's page buttons made divs like:

<div role="button"></div>   

i'd know, semantic, influence style or event handle of div? tried simulate click button jquery click, doesn't work.

it tells accessibility (and other) software purpose of div is. more here in draft role attribute specification.

yes, it's semantic. sending click event button should work.

---

an earlier version of answer (back in 2011) said:

...but jquery's click function doesn't that; triggers event handlers have been hooked element with jquery, not handlers hooked in other ways.

...and provided sample code , output below.

i cannot replicate output (two years later). if go earlier versions of jquery, trigger jquery handlers, dom0 handlers, , dom2 handlers. order isn't same between real click , jquery's click function. i've tried jquery versions 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6, , more recent releases such 1.7.1, 1.8.3, 1.9.1, , 1.11.3 (the current 1.x release of writing). can conclude browser thing, , don't know browser using. (right i'm using chrome 26 , firefox 20 test.)

here's test shows indeed, jquery handlers, dom0 handlers, , dom2 handlers (as of writing!) triggered jquery's click:

jquery(function($) {    var div;      $("<p>").text("jquery v" + $.fn.jquery).appendto(document.body);      // hook handler *not* using jquery, in both dom0 , dom2 ways    div = document.getelementbyid("thediv");    div.onclick = dom0handler;    if (div.addeventlistener) {      div.addeventlistener('click', dom2handler, false);    } else if (div.attachevent) {      div.attachevent('onclick', dom2handler);    }      // hook handler using jquery    $("#thediv").click(jqueryhandler);      // trigger click when our button clicked    $("#thebutton").click(function() {      display("triggering <code>click</code>:");      $("#thediv").click();    });      function dom0handler() {      display("dom0 handler triggered");    }      function dom2handler() {      display("dom2 handler triggered");    }      function jqueryhandler() {      display("jquery handler triggered");    }      function display(msg) {      $("<p>").html(msg).appendto(document.body);    }    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <div id="thediv">try clicking div directly, , using button send click via jquery's <code>click</code> function.</div>  <input type='button' id='thebutton' value='click me'>