js事件触发操作实例分析

2019-11-19 11:17:56

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js事件触发操作。分享给大家供大家参考，具体如下：

click包含了（mousedown,mouseup）叫做MouseEvents；
keydown,keypress,keyup之流叫做UIEvents;
focus，load,scroll，submit之流叫做HtmlEvents。

MutationEvents，突变事件，往往用于对DOM对象的事件监听。
DOMNodeRemoved：当Node被删除时
DOMAttrModified：元素的属性发生改变时

我们来学一学事件触发

var e = document.createEvent("HtmlEvents");e.initEvents("事件名",true,true);元素对象.dispatchEvent(e);

createEvent:创建事件
initEvent：初始化事件
dispatchEvent：调度、发出事件

<!DOCTYPE html><html><head>  <title>www.VeVB.COm 事件触发</title>  <meta charset="utf-8"></head><body>  <select id="sel">    <option>中国</option>    <option>美国</option>    <option>日本</option>    <option>韩国</option>  </select>  <hr>  <div id="div" style="width:300px;height:150px;border:solid 1px red;"></div>  <script type="text/javascript">    var sel = document.getElementById("sel");    var div = document.getElementById("div");    // 设置change事件后处理函数    sel.onchange = function(){      div.innerHTML = sel.options[sel.selectedIndex].text; //拿到选中的option的文本填充到div里    }    // 触发change事件的函数    function dispatchChange(){      var changeEvent = document.createEvent("HtmlEvents");      changeEvent.initEvent("change",true,true);      sel.dispatchEvent(changeEvent);    }    dispatchChange();  </script></body></html>

运行结果：