可以通过以下代码了解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. hadoop作业调优参数整理及原理(转)

    1 Map side tuning参数 1.1 MapTask运行内部原理 当map task开始运算,并产生中间数据时,其产生的中间结果并非直接就简单的写入磁盘.这中间的过程比较复杂,并且利用到了内 ...

  2. android listView Exception

    - ::-/com.tongyan.tutelage W/System.err﹕ java.text.ParseException: Unparseable date: ) - ::-/com.ton ...

  3. PLSQL_性能优化工具系列09_SQL Plan Management

    2014-09-24 Created By BaoXinjian

  4. C# 中的事件含义介绍

    AutoSizeChanged 当 AutoSize 属性的值更改时发生.(从 ButtonBase 继承.)   BackColorChanged 当 BackColor 属性的值更改时发生.(从 ...

  5. JAVA类的构造方法

    1,构造方法没有返回类型, 定义: []public] 方法名() {} 2,一个构造方法如果想调用同一类中的另一个构造方法,只能调用一个,并且要放在构造方法第一行 3,用this调用,如 publi ...

  6. webview--网络超时

    package com.test.js2java; import java.util.Timer; import java.util.TimerTask; import android.app.Act ...

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

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

  8. 30天轻松学习javaweb_模拟tomcat

    运行 javac Server.java 编译java文件 执行 java Server 运行程序 在ie中输入 http://localhost:9999/ 打开模拟的服务程序 import jav ...

  9. 解决Ubuntu 12.10中ZIP文件名乱码的方法

    转摘源地址:http://blog.csdn.net/jiangxinyu/article/details/8206395 安装(12.04及以上): 代码: sudo apt-get install ...

  10. Mysql设置字符编码及varchar宽度问题

    ubuntu16.04通过仓库安装的mysql5.7的配置文件在 /etc/mysql/mysql.conf.d/mysqld.cnf 修改字符只需要 在[mysqld] character-set- ...