javascript事件触发器dispatchEvent简单示例

末蓝、 2022-06-18 02:18 360阅读 0赞

需求:在页面加载过程改变comboBox值，然后引发一系列的动作。  
思路：如果只是给comboBox赋值，无法触发其onchange事件，那么后面一系列的动作也就无法完成。搜索之后发现可以使用fireEvent或者dispatchEvent。但是经过本人实践，fireEvent在ie上不行，firefox和chrome更不行。现在dispatchEvent可以在这三个主流浏览器工作。现在记录下面的简单例子，示例中使用的是select，而不是comboBox。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <title>dispatchEvent示例用法</title>
    <script type="text/javascript"> var provinces = new Array(); provinces["陕西"] = ["西安","咸阳","宝鸡","延安","汉中"]; provinces["台湾"] = ["台北","台中","台南"]; provinces["浙江"] = ["杭州","宁波","绍兴","温州"]; function provinceChange() { console.log("onChange is triggered."); var prov = document.getElementById("province").value; var cityObj = document.getElementById("city"); cityObj.options.length =0; for(var i in provinces[prov]) { cityObj.options.add(new Option(provinces[prov][i],provinces[prov][i])); } } window.onload = function(){ var provinceObj = document.getElementById("province"); for(var index in provinces) { provinceObj.options.add(new Option(index,index)); } var event = document.createEvent('HTMLEvents'); event.initEvent("change", true, true); event.eventType = 'message'; provinceObj.dispatchEvent(event); }; </script>
    </head>
    <body>
    省份:<select id="province" onchange= "provinceChange()"></select>
    城市:<select id="city"></select>
    </body>
    </html>

效果图如下：  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220618/e6933a087d224d20b18d84e8224d75ba.png