事件冒泡以及目标元素,使用Tab按键切换页面元

接下去大家使用Jquery完成回车键Enter切换主题,此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测验通过。使用的开辟工具是微软VS2009+Jquery框架。 实现步骤如下 1、 首先引述Jquery类库

稳固难点到集中的下二个元素

深入分析: 页面中所以的TextBox援用Class=”cls”,便于早先时期的对页面成分的Jquery查询。 5、 Javascript代码 复制代码 代码如下:

 

深入深入分析: $.focus(); 页面起始化时,主旨定位第二个文本框内 var $inp = $; 取的type=文本框的因素集结 $inp.bind('keydown', function {} 给文本框会集绑定'keydown'事件 var key = e.which; 取的当前按下的键值 举个例子Enter的键值=13 e.preventDefault(); 能够阻挡它的暗中同意行为的产生而发生其余的政工,在此我们公司PostBack发生,而是切换主旨。其余一个近乎的主意是stopPropagation,它起到阻止js事件冒泡的成效。 事件代理用到了五个在JavaSciprt事件中常被忽视的风味:事件冒泡以至指标元素。当二个要素上的风云被触发的时候,举例说鼠标点击了多个按键,相近的事件将会在非常成分的持有祖先成分中被触发。这后生可畏进程被称为事件冒泡;这一个事件从原始成分带头一直冒泡到DOM树的最上层。对其余二个风云来讲,其指标成分都以原始成分,在大家的那么些事例中也正是按键。目的成分它在咱们的风云指标中以属性的样式现身。使用事件代理的话大家得以把事件微处理器增加到叁个要素上,等待事件从它的子级成分里冒泡上来,何况能够很有益于地认清出那么些事件是从哪个成分开头的。 var nxtIdx = $inp.index + 1; 取的要素集结inp中的下贰个成分索引 $(":input:text:eq.focus(); 定位难题到集合的下叁个要素 3.、HTML代码 复制代码 代码如下:

 

2、 Javascript代码 复制代码 代码如下:

         使用的开采工具是微软VS二〇一〇+Jquery框架。

浅析: var $inp = $; 取的体裁为cls的具备因素 赋值给变量inp 6、 运维作效果果 小编:灵动生活

1、 首先引述Jquery类库

浅析:页面上存放八个文本框 3、 运维程序 那页面中风流倜傥经有TextArea 成分,大家怎么样接受Enter切换宗旨呢,办法是有些,如下充裕运用了Jquery的有的天性。 4、 HTML代码 复制代码 代码如下:

 

能够阻碍它的私下认可行为的产生而产生别的的事务,在那处大家集团PostBack发生,而是切换主题。其余两个看似的不二诀借使stopPropagation,它起到阻止js事件冒泡的意义。

    <script type="text/javascript">

        $(function () {

        $('input:text:first').focus();

        var $inp = $('input:text');

        $inp.bind('keydown', function (e) {

            var key = e.which;

            if (key == 13) {

                e.preventDefault();

                var nxtIdx = $inp.index(this) + 1;

                $(":input:text:eq(" + nxtIdx + ")").focus();

            }

        });

    });

    </script>

 

达成步骤如下

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

  

         事件代理用到了四个在JavaSciprt事件中常被忽视的风味:事件冒泡以致目的成分。当二个成分上的平地风波被触发的时候,比方说鼠标点击了叁个按键,雷同的风波将会在特别成分的富有祖先成分中被触发。那风流洒脱经过被叫做事件冒泡;那几个事件从原始成分开首一贯冒泡到DOM树的最上层。对此外叁个事件来讲,其指标成分都以原始成分,在大家的那么些事例中也正是开关。指标成分它在大家的轩然大波目的中以属性的样式现身。使用事件代理的话大家得以把事件微电脑加多到三个要素上,等待事件从它的子级成分里冒泡上来,何况能够很方便地看清出这么些事件是从哪个成分最初的。

 

取的type=文本框的要素集结
$inp.bind('keydown', function (e) {} 
给文本框集合绑定'keydown'事件

 

$('input:text:first').focus();  

var $inp = $('.cls');

2、 Javascript代码

那页面中假设有TextArea 成分,大家什么样行使Enter切换主旨呢,办法是有个别,如下丰富运用了Jquery的部分天性。

$(":input:text:eq(" + nxtIdx + ")").focus();   

图片 1**

e.preventDefault();        

本文由必威发布于必威-前端,转载请注明出处:事件冒泡以及目标元素,使用Tab按键切换页面元

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。