v2ex_com
校友
校友
  • UID186
  • 粉丝1
  • 关注7
  • 发帖数40
  • 社区居民
  • 忠实会员
阅读:899回复:1

前端开发那些事儿(第一波) 第19讲 事件触发的忽略

楼主#
更多 发布于:2017-09-14 01:50
随着input 框不断输入文字,下面的div随之同步。

<!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>
v2ex_com
校友
校友
  • UID186
  • 粉丝1
  • 关注7
  • 发帖数40
  • 社区居民
  • 忠实会员
沙发#
发布于:2017-09-14 01:51
代码高亮好像不起作用啊?
游客

返回顶部