<sup id="626539a8"></sup>
       
       
       


    狗万官网酒店 > 狗万官网下载 > js事件触发操作实例分析_javascript艺术

    js事件触发操作实例分析_javascript艺术

    来源: 2019-08-04 19:43 我来投稿 参与评论
    这篇文章主要介绍了js事件触发操作,构成实例形式分析了javascript事件触发机制原理、利用办法及相关操作注意事项,要求的爱人可以参考下

    本文实例讲述了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.jb51.net 事件触发</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>
    
    

    运作结果:

    感兴趣的爱人可以利用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun面试上述代码运行效果。

    PS:关于javascript事件表明可参照本站javascript事件与作用说明大全:http://tools.jb51.net/table/javascript_event

    更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与艺术大全》、《JavaScript借鉴DOM艺术总结》、《JavaScript页面元素操作技能总结》、《JavaScript多少结构与做法技巧总结》、《JavaScript遍历算法与艺术总结》及《JavaScript错误与调整技巧总结》

    瞩望本文所述对大学者JavaScript程序设计有所帮助。

    义务编辑:狗万官网酒店
     
     
    0% (0)
     
     
    0% (0)
    机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
    地名: 匿名?