可以通过以下代码了解JS里的onclick事件：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        #divclass

        {

            cursor:pointer;

        }

        #uiclass

        {

        }

        #uiclass li

        {

            display:inline-block;

        }

    </style>

    <script type="text/javascript">

        window.onload = function ()

        {

            document.getElementById("txt").onchange = function ()

            {

                //alert("我的值改变啦~~~");

                //事件的方法里面的this：谁调用的方法，方法里的this就是谁

                alert(this.value);

            };

            //通过文本框调用onchange 那么 onchange里面的this就是文本框

            //  document.getElementById("txt").onchange();

            document.getElementById("selNation").onchange = function ()

            {

                //下拉框的this.value可以获取到选中的option的value值

                //var curoptionIndex = this.selectedIndex;

                //alert(this.childNodes.length);//dom元素的childnodes中包含了所有类型的子节点（html元素节点、文本节点）

                //alert(this.children.length);//dom元素的children里只包含html元素节点

                //alert(this.selectedIndex);

                //alert(this.value+","+this.innerHTML);

                var curOptionIndex = this.selectedIndex;

                var opts = this.children;

                var selectOpt = opts[curOptionIndex];

                alert(selectOpt.innerHTML);

            };

            document.getElementById("txtName").onfocus = focus;

            document.getElementById("txtName").onblur = blur;

            document.getElementById("txtPwd").onfocus = focus;

            var li = document.getElementsByTagName("li");

            for (var i = 0; i < li.length; i++) {

                li[i].onclick = doClick;

            }

        };

        function doClick()

        {

            this.style.backgroundColor = "white";

            //选取当前选中li对象的下一个兄弟li对象

            var nextObj = this.nextElementSibling;

            //循环判断是否存在下一个li对象

            while (nextObj)

            {

                //修改下一个背景颜色

                nextObj.style.backgroundColor = "red";

                //再把 下一个的下一个对象找出  如果没有了就返回空

                nextObj = nextObj.nextElementSibling;

            }

            //找出当前选中的li的前一个li，并设置前一个li的背景色

            if (isNaN(this.previousElementSibling))

            {

                var preObj = this.previousElementSibling;

                preObj.style.backgroundColor = "blue";

                preObj = preObj.previousElementSibling;

            }

        }

        function focus()

        {

            document.getElementById("msgBox").innerHTML = this.value;

            alert(this.value);

        }

        function blur()

        {

            alert("我走了~~~");

        }

        //为下拉框 绑定onchange事件

    </script>

</head>

<body>

    <div id="divBox" style="margin:100px auto;">

        <input type="text" value="1" id="txt"/>

        <select id="selNation">

            <option id="1">中国</option>

            <option id="2">美国</option>

            <option id="3">韩国</option>

        </select>

        <input type="text"  id="txtName" value="my i love you~~~~~"/>

        <input type="text" id="txtPwd" value="me too~~~" />

    </div>

    <div id="msgBox"></div>

    <div id="divclass">

        <ul id="uiclass">

            <li>aaaaaaaa</li>

            <li>bbbbbbbb</li>

            <li>cccccccc</li>

            <li>dddddddd</li>

        </ul>

    </div>

</body>

</html>

JS里的onclick事件的更多相关文章

  1. js click 与 onclick 事件绑定,触发与解绑

    click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...

  2. js中的onclick事件传参需要注意的问题

    如果参数是数值类型可以直接传,如果是字符串类型需要在字符串前后加上双引号,双引号需要转义 如 onclick="test(0)";  直接传值 参数为数值 onclick=&quo ...

  3. JS中的onclick事件

    原文链接:https://segmentfault.com/q/1010000007955542?_ea=1503986 我自己做了一下测试. 这个是在html里面直接绑定onclick事件,我打印了 ...

  4. js给对象onclick事件赋值

    1)当方法没有参数时,赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function ...

  5. 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Android开发之布局文件里实现OnClick事件关联处理方法

    一般监听OnClickListener事件,我们都是通过Button button = (Button)findViewById(....); button.setOClickLisener....这 ...

  8. JS里点击事件判断是否 触发了节点 和给标签添加class属性

    $("#activityType").click(function(e){ if(e.target==$("#bb")[0]){ var bb=document ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. __VA_ARGS__用法(转)

    自定义调试信息的输出 调试信息的输出方法有很多种,  例如直接用printf,  或者出错时使用perror, fprintf等将信息直接打印到终端上, 在Qt上面一般使用qDebug,而守护进程则一 ...

  2. Git-Flow

    Overview Git-Flow is a high-level command set wrapping low-level Git commands to support the "s ...

  3. centos6.5安装配置fastdfs+nginx实现分布式图片服务器

    一.准备 yum groupinstall -y "Development Tools"yum install -y wget libevent-devel pcre-devel ...

  4. 转--Android中自定义字体的实现方法

    1.Android系统默认支持三种字体,分别为:“sans”, “serif”, “monospace 2.在Android中可以引入其他字体 . 复制代码 代码如下: <?xml versio ...

  5. 通过 HTTP 头进行 SQL 注入

    在漏洞评估和渗透测试中,确定目标应用程序的输入向量是第一步.有时,当做web应用程序测试时,SQL注入漏洞的测试用例通常局限于特殊的输入向量GET和POST变量.那么对于其他的HTTP头部参数呢?难道 ...

  6. 非spring组件servlet、filter、interceptor中注入spring bean

    问题:在filter和interceptor中经常需要调用Spring的bean,filter也是配置在web.xml中的,请问一下这样调用的话,filter中调用Spring的某个bean,这个be ...

  7. C#中调用Windows API的要点 .

    介绍 API(Application Programming Interface),我想大家不会陌生,它是我们Windows编程的常客,虽然基于.Net平台的C#有了强大的类库,但是,我们还是不能否认 ...

  8. Ubuntu设置环境变量并立即生效

    Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环境变量.系统环境变量对所有系统用户都有效,用户环境变量仅仅对当前的用户有效. 修改用户环境变量 用户环境变量通常被存储在下面的文件中: ...

  9. [Java] 读写字节数据，过滤流DataOutputStream和DataInputStream

    package test.stream; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io ...

  10. (转)配置Website的IIS时遇到的问题与解决方法

    在部署WebSite时遇到问题,刚好发现Eric Sun的文章,因此转载做个副本. 原文地址:http://www.cnblogs.com/mingmingruyuedlut/archive/2011 ...