js事件触发

最新推荐文章于 2024-04-25 20:29:33 发布

学习笔记666

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量642

点赞数

CC 4.0 BY-SA版权

分类专栏：《JavaScript高级程序设计》第三版

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/51873518

《JavaScript高级程序设计》第三版专栏收录该内容

48 篇文章

订阅专栏

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></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>