event.srcElement获得引发事件的控件（表单）

最新推荐文章于 2017-12-19 10:33:33 发布

无盐海

最新推荐文章于 2017-12-19 10:33:33 发布

阅读量2.4k

点赞数

分类专栏： DOM 文章标签： event.srcElement

本文链接：https://blog.csdn.net/fanbin168/article/details/38131087

版权

DOM 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<1>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function getInput() {
            var inputs = document.getElementsByTagName("input"); //取得所有的input表单
            for (var i = 0; i < inputs.length; i++) {  //遍历所有的input表单
                var inputName = inputs[i];  //获得当前遍历到的input表单

                inputName.value = "哈哈"; //将当前的input表单value属性赋值“哈哈”
                inputName.onclick = btnClick; //给遍历到的当前表单注册onclick事件，事件的处理函数为btnClick 
                //注意我这里只是给inputName的onclick事件指定了一个处理函数btnClick，具体函数如何定义，则会写在以下btnClick()函数中           
            }
        }


        //vet是一个对象(其实就是event，名字可以随便起)现在我将它作为一个参数来传递，它就是指控件触发的事件的状态，既然他是一个对象，它肯定有一些属性的，其中就包含了srcElement，或者火狐中的target，还有些onclick等事件
        function btnClick(evt) {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var inputName = inputs[i];

                //在IE 中srcElement 表示产生事件的源，比如是哪个按钮触发的onclick 事件，火狐中则是target。
                //window.event.srcElement取得引发onclick事件的控件(表单元素)。在火狐中srcElement无效(要用target)

                var obj = evt.srcElement ? evt.srcElement : evt.target;

                if (inputName == theEvent.target) { //如果当前表单就是引发事件的控件，就将当前表单的value值设为“我被点击了”，否则设为“哈哈”
                    inputName.value = "我被点击了";
                }
                else {
                    inputName.value = "哈哈";
                }
            }
        }
    </script>
</head>
<!--在页面加载完毕后就会触发onload事件，onload事件就会调用getInput()函数，从而给所有的input表单的value赋值为“哈哈”-->
<body οnlοad="getInput()">
    <form>
    <input type="button" />
    <input type="button" />
    <input type="button" />
    <input type="button" />
    </form>
</body>
</html>

http://blog.csdn.net/cyxlzzs/article/details/6711924

简写

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getInput() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = "哈哈";
                inputs[i].onclick = function (evt) {
                    var inputs = $("input"); //等同于document.getElementsByTagName("input");
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i] == evt.target) { //注意==号，别写成了=
                            inputs[i].value = "我被点击了";
                        }
                        else {
                            inputs[i].value = "哈哈";
                        }
                    }
                };
            }                            
        }       
    </script>
</head>
<body οnlοad="getInput()">
<input type="button" />
<input type="button" />
<input type="button" />
</body>
</html>

无盐海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
event.srcElement获得引发事件的控件（表单）

function getInput() { var inputs = document.getElementsByTagName("input"); //取得所有的input表单 for (var i = 0; i < inputs.length; i++) { //遍历所有的input表单 var inputNam
复制链接

扫一扫