可以通过以下代码了解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. 使用 as 和 is 运算符安全地进行强制转换

    由于对象是多态的,因此基类类型的变量可以保存派生类型. 若要访问派生类型的方法,需要将值强制转换回该派生类型. 不过,在这些情况下,如果只尝试进行简单的强制转换,会导致引发 InvalidCastEx ...

  2. MySQL key/value存储方案(转)

    需求 250M entities, entities表共有2.5亿条记录,当然是分库的. 典型解决方案:RDBMS 问题:由于业务需要不定期更改表结构,但是在2.5亿记录的表上增删字段.修改索引需要锁 ...

  3. storm系统架构学习

    Storm架构如下图所示: 1.主控节点(Master Node) 运行Storm nimbus后台服务的节点(Nimbus),它是storm系统的中心,负责接收用户提交的作业(如同spark sub ...

  4. about_并查集

    前天刚学了并查集,挺好用的,虽然我现在只会用它来解决是不是亲戚啊,是不是朋友啊,带权并查集还不是很理解. 并查集也叫做不相交集合,主要有3个操作,初始化,查找,合并. 并查集其中一个很大的应用就是kr ...

  5. python（4） 小程序-异步加载

    注:处理异步加载需要模拟浏览器登陆,然后用import json,用loads解析 例如:

  6. 前端实现 SVG 转 PNG

    http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/ 前言 svg 是一种矢量图形,在 web 上应用很广泛,但是很多时候 ...

  7. 更改EGit的user settings中默认的location

    在系统的环境变量中添加变量HOME,值为C:\Users\Kane.Sun\ 记得要讲users改为首字母大写,不然可能会有问题.

  8. 使用Git命令从Github下载代码仓库

    Github作为最大的开源代码仓库,也是作为版本控制工具,简直就是程序员的天堂,是一座挖掘不尽的宝藏.现在讲解一下如何把一个Github上的项目下载到本地,也就是在本地也建立一个项目仓库,以后进行项目 ...

  9. 服务器安装MongoDB

    1.下载MongoDB安装包,如:mongodb-win32-i386-1.8.1.zip: 2.新建目录“D:\MongoDB”,将安装中的bin目录下全部.exe文件复制到“D:\MongoDB” ...

  10. Play framework(二)

    Play 2.0 的完整演示过程记录 http://www.oschina.net/translate/playframework-20-live-coding-script todolist代码