事件触发器——之事件类型说明
click之流包含(mousedown,mouseup 等)叫做 MouseEvents
keydown,keypress,keyup之流叫做 UIEvents
focus,load,scroll,submit之流叫做 HTMLEvents
UIEvents：通用的UI 事件，鼠标事件键盘事件都是继承自UI事件，在DOM 3 级上使用的是 UIEvent。
MouseEvents：通用的鼠标事件，在DOM 3 级上使用的是 MouseEvent。
MutationEvents：通用的突变事件，在DOM 3 级上使用的是 MutationEvent。
HTMLEvents：通用的HTML事件，在DOM3级上还没有等效的。
dispatchEvent 方法给节点分派一个合成事件。
createEvent 方法创建新的 Event 对象。
initEvent 初始化新事件对象的属性
代码演示
需求：随着input 框不断输入文字，下面的div随之同步。 (刷新浏览器，div里的数据仍旧保留)
|
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 32 33 34 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="gettext" /> <div class="txt" id="gettxt"></div> <script> var gettext = document.getElementById("gettext"); var gettxt = document.getElementById("gettxt"); gettext.addEventListener("input",function(){ gettxt.innerHTML = gettext.value; }); function dispatchInput() { var change_event = document.createEvent("UIEvents"); change_event.initEvent("input",true,true); //这里第一个true 为是否应该通过事件链起泡；第二个true 为定义事件是否可以被取消，一旦设置，只读属性Event.cancelable将赋予其值。 gettext.dispatchEvent(change_event); } dispatchInput(); </script> </body> </html> |
需求：select框被选中数据显示在div中，并且刷新浏览器后仍旧保持
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="sel"> <option>中国</option> <option>美国</option> <option>日本</option> <option>韩国</option> </select> <button id="selbtn">选择韩国</button> <div id="recordDiv"> </div> <script> /** * 联动 */ var sel = document.getElementById("sel"); var recordDiv = document.getElementById("recordDiv"); var selbtn = document.getElementById('selbtn'); selbtn.addEventListener('click',function(){ sel.selectedIndex = 3; dispatchChange(); }); sel.addEventListener("change",function(){ recordDiv.innerHTML = sel.options[sel.selectedIndex].text; }); function dispatchChange() { var change_event = document.createEvent("HTMLEvents"); change_event.initEvent("change",true,true); //这里第一个true 为是否应该通过事件链起泡；第二个true 为定义事件是否可以被取消，一旦设置，只读属性Event.cancelable将赋予其值。 sel.dispatchEvent(change_event); } dispatchChange(); </script> </body> </html> |