可以通过以下代码了解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. angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证

    使用$http.$location.$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘: 1.$http模拟从后台获取json格式的数据: 2.$watch实时监控数据变化: 3.$loca ...

  2. import了sun开头的类，虽然它在代码里压根就没派上用处！但是必须得引用！

    package action; import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io. ...

  3. AP_应付税务预扣税Withholding Tax的设定和使用（案例）

    2014-07-13 Created By BaoXinjian

  4. jstack使用－倒出线程堆栈

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack使 ...

  5. C语言sizeof

    一.关于sizeof 1.它是C的关键字.是一个运算符,不是函数: 2.一般用法为sizeof 变量或sizeof(数据类型):后边这种写法会让人误认为是函数,但这种写法是为了防止和C中类型修饰符(s ...

  6. [物理学与PDEs]第4章习题参考解答

    [物理学与PDEs]第4章习题1 反应力学方程组形式的化约 - 动量方程与未燃流体质量平衡方程 [物理学与PDEs]第4章习题2 反应力学方程组形式的化约 - 能量守恒方程 [物理学与PDEs]第4章 ...

  7. iis7设置404页面不生效的原因

    打开web.config <httpErrors errorMode="Custom" existingResponse="PassThrough"> ...

  8. 判断DataTable是否为空

    DataTable: ) { //为空的操作 } DataRow: if(!DataRow.IsNull("列名")) { //不为空的操作 }

  9. sikuli实例

    代码: package selenium.sikuli; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; im ...

  10. MongoDB 语法使用小结

    MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的     他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据 ...