可以通过以下代码了解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. 安装配置Oracle数据库时的一些处理思路

    配置Oralce客户端或者服务器端出现问题时,可考虑如下步骤: 1 检查如下文件:client端:D:\app\Administrator\product\11.2.0\client_3\networ ...

  2. Apple dev travel

    Objective-C最基础语法之Class定义: http://mobile.51cto.com/iphone-281925.htm  Table View: http://www.appcoda. ...

  3. PLSQL_闪回删除FlashBack Drop表误删除如何进行恢复（案例）

    2014-06-25 Created By BaoXinjian

  4. python （18）在linux中如何实现定时发送邮件

    最近要用到,定时发送邮件功能: 如何定时,当然要用到linux中crontab了 如下的代码能够定时发送邮件 #!/usr/bin/env python # -*- coding=utf-8 -*- ...

  5. R-S触发器

    下面是触发器的电路,这个电路上下对称,分别都是一个或门连着一个非门,特别之处在于,它们各自的输出又分别是对方的输入. 合上R,上面的或门输入时1.0,经过上面的非门,Q=0,Q不发光.Q的结果会被反馈 ...

  6. webview--网络超时

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

  7. 安装Android SDK和ADT步骤和遇到的问题

    http://894503895.diandian.com/post/2012-05-16/18695648 1.安装eclipse.下载地址:http://www.eclipse.org/downl ...

  8. JAVA 聊天窗口

    //聊天窗口 import java.awt.*; import javax.swing.*; public class Jiemian9 extends JFrame{ JTextArea wby; ...

  9. 四步轻松实现用Visio画UML类图

    本节和大家一起学习一下用Visio画UML类图的方法,主要有四个步骤,这里和大家分享一下,相信通过本节的学习,你对Visio画UML类图的步骤一定会有所了解. 用Visio画UML类图 对于画类图的工 ...

  10. expdp impdp终极教学

    源地址:http://blog.csdn.net/giianhui/article/details/7788550