javas事件基础--UI事件和表单事件

最新推荐文章于 2022-09-07 21:59:25 发布

wenmin1987

最新推荐文章于 2022-09-07 21:59:25 发布

阅读量423

点赞数

分类专栏： JavaScript 文章标签： UI事件表单事件

本文链接：https://blog.csdn.net/wenmin1987/article/details/88856567

版权

JavaScript 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

一、UI事件

UI是User Interface缩写，表示用户界面，UI事件负责响应用户和浏览器或者页面元素的交互，

UI事件：包括 focus （获取焦点） blur（失去焦点）

focus、blur：单击或使用tab切换到某个表单元素或超链接对象时，触发UI事件

<body>
       <input type="text"/>
       <input type="text"/>
       <script>
           var o=document.getElementsByTagName("input");
           for (var i=0;i<o.lengthi++){
               o[i].focus=function(){
                   this.style.borderStyle="ouset"; //凸起效果
               }
               o[i].blur=function(){
                   this.style.borderStyle="inset";//凹陷效果

               }
           }
       </script>
   </body>

二、表单事件

表单4种专用事件：select 、change、submit、reset；负责处理form、input、select、button、textarea等表单元素的行为

select

<input type="text" name="a" id="a" value="请随意选择字符串" />
       <input type="text" name="b" id="b" />
       <script type="text/javascript">
           var a=document.getElementsByTagName("input")[0];
           var b=document.getElementsByTagName("input")[1];
           a.onselect=function(){
               if(document.selection){//兼容IE
                   o=document.selection.createRange();
                   if(o.text.length>0){
                       b.value=o.text;
                   }
               }else{//兼容DOM
                   p1=a.selectionStart;
                   p2=a.selectionEnd;
                   b.value=a.value.substring(p1,p2);
               }
           }
       </script>

change
       
       <input type="text" name="a" id="a" />
       <input type="text" name="b" id="b" />
       <script type="text/javascript">
           var a=document.getElementsByTagName("input")[0];
           var b=document.getElementsByTagName("input")[1];
           a.onchange=function(){
               b.value=this.value;
           }
       </script>

       <select name="">
           <option value="http://www.baidu.com/">百度</option>
           <option value="http://google.cn">google</option>
       </select>
       <script type="text/javascript">
           var r=document.getElementsByTagName("select")[0];
           r.onchange=function(){
               window.open(this.value,'');
           }
       </script>

       <input type="radio" name="h" value="1" checked="checked"/>1
       <input type="radio" name="h" value="2"/>2
       <input type="radio" name="h" value="3"/>3
       <script type="text/javascript">
           var h=document.getElementsByTagName("input");
           for(var i=0;i<h.length;i++){
               h[i].onchange=function(){
                   alert(this.value);
               }
           }
       </script>

submit

<form action="" id="form1" name="form1" method="post">
           <input type="text" name="t" id="t" value="" />
           <input type="submit" name=""/>
       </form>
       <script type="text/javascript">
           var t=document.getElementsByTagName("input")[0];
           var f=document.getElementsByTagName("form")[0];
           f.οnsubmit=function(e){
               alert(t.value);
               return false;
           }
       </script>
//默认回车键也是可以提交表单的
       <form action="" id="form1" name="form1" method="post">
           <input type="text" name="t" id="t" value="" />
       </form>
       <script type="text/javascript">
           var t=document.getElementsByTagName("input")[0];
           var f=document.getElementsByTagName("form")[0];
           f.οnsubmit=function(e){//按回车键，照样会提交表单
               alert(t.value);
               return false;
           }
           t.οnkeypress=function(e){//使用keypress事件禁止键盘行为
               var e=e||window.event;
               return e.keyCode!=13;
           }
       </script>

reset

<form action="" id="form1" name="form1" method="post">
           <input type="text" name="t" id="t" value="" />
           <input type="reset" name=""/>

</form>
       <script type="text/javascript">
           var t=document.getElementsByTagName("input")[0];
           var f=document.getElementsByTagName("form")[0];
           f.onreset=function(e){
               alert(t.value);//弹出的是文本框输入的内容，  把t.value 重置成空
           }
       </script>

重置一定需要重置按钮，触发

wenmin1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javas事件基础--UI事件和表单事件

一、UI事件UI是User Interface缩写，表示用户界面，UI事件负责响应用户和浏览器或者页面元素的交互，UI事件：包括 focus （获取焦点） blur（失去焦点）focus、blur：单击或使用tab切换到某个表单元素或超链接对象时，触发UI事件<body> <input type="text"/> <i...
复制链接

扫一扫