扫一扫,加我们为好友有惊喜哦~
-->

核心课程
开班动态
专题服务

您当前所在位置:首页 > 中心动态 >>
javascript学习笔记:js的常见事件

javascript学习课程报名咨询:常州文化宫校区:0519-69886161、新北校区:0519-68877558!

1、js常见事件
A、onclick、ondblclick

B、onmouseover、onmouseout

例子:
      <p>
         <input type="button" value="单击一下试试" onclick="this.value='双击一下试试'" ondblclick="this.value='单击一下试试'"/>
      </p>
      <p>
        <input type="button" value="鼠标移上来" onmouseover="this.value='鼠标移出去';this.style.color='#F00';this.style.fontWeight='bold'"
       onmouseout="this.value='鼠标移上来';this.style.color='#00F';this.style.fontWeight='normal'" style="color:#00F"/>
      </p>

例子:利用事件调用函数
 <script type="text/javascript">
    function on(b){
       b.value='鼠标移出去';
       b.style.color='#F00';
       b.style.fontWeight='bold';
    }
   
    function out(b){
       b.value='鼠标移上来';
       b.style.color='#00F';
       b.style.fontWeight='normal';
    }
    </script>

      <p>
         <input type="button" value="鼠标移上来" onmouseover="on(this)" onmouseout="out(this)"  style="color:#00F">
      </p>

例子:
    <p>
    <img src="images/baby_r1_c1.jpg" onmouseover="this.src='images/baby_r1_c3.jpg'" onmouseout="this.src='images/baby_r1_c1.jpg'"/>
    </p>
    <p>
    <a href="#" onmouseover="this.style.color='#F00';this.style.textDecoration='underline'"
    onmouseout="this.style.color='green';this.style.textDecoration='none'">百度一下</a>


C、onmousedown、onmouseup:鼠标按下、松开
 <script type="text/javascript">
    //鼠标按下修改样式
    function change(p){
        p.style.fontSize = "20px";
        p.style.color = "#F00";
        p.style.backgroundColor = "yellow";
    }
   
    //鼠标松开恢复样式
    function reset(t){
        t.style.fontSize = "15px";
        t.style.color = "#000";
        t.style.backgroundColor = "#FFF";
    }
 </script>

    <p onmousedown="change(this)" onmouseout="reset(this)">
                         床前明月光;
    </p>
    <p onmousedown="change(this)" onmouseout="reset(this)">
                     疑似地上霜;
    </p>
    <p onmousedown="change(this)" onmouseout="reset(this)">
                        举头望明月;
    </p>
    <p onmousedown="change(this)" onmouseout="reset(this)">
                       低头思故乡!
    </p>

D、onchange:下拉菜单的值被修改
                请选择网页的背景颜色:
     <select onchange="document.body.style.backgroundColor=this.value">
         <option value="#FFF">请选择</option>
         <option value="#F00">-落日红-</option>
         <option value="orange">-大漠黄-</option>
         <option value="#0F0">-清新绿-</option>
     </select>

E、onblur、onfocus:得到焦点及失去焦点
例子:
 <style type="text/css">
    .email{
       color:#CCC;
    }
    /* 正确输入后看到的样式 */
    .right_email{
       color:#000;
       border:1px solid #CCC;
       background-color:#FFF;
    }
 </style>
 <script type="text/javascript">
    //得到焦点清空输入框的值
    function emptyText(t){
       //如果值是默认值
       if(t.value == "请输入您的邮箱"){
          t.value = "";
       }
       t.style.color = "#000";
    }
   
    //失去焦点检验值是否填写
    function check(t){
       //如果值没有填写
       if(t.value == ""){
          t.value = "请输入您的邮箱";
          t.style.color = "#CCC";
          t.style.border = "1px solid #F00";
          t.style.backgroundColor = "pink";
       }else{
          //如果填写了,则不能有错误警告的样式
          t.style.color = "#000";
          t.style.border = "1px solid #CCC";
          t.style.backgroundColor = "#FFF";
       }
    }
 </script>

               邮箱:<input type="text" name="email" value="请输入您的邮箱" class="email"
               onfocus="emptyText(this)" onblur="check(this)"/>

修改一个元素对应的class的值(引用的样式表的类):元素.className = "";
注意优先级的问题,这样修改相当于修改内部样式表,是不能覆盖内嵌样式表的值!

2、js中获取网页元素:document.getElementById()
例子:
 <style type="text/css">
   .s1{
      color:#000;
      background-color:#FFF;
      font-size:15px;
   }
  
   .s2{
      color:#F00;
      background-color:yellow;
      font-size:50px;
   }
 </style>

              <input type="button" value="点一下" onclick="document.getElementById('p01').className = 's2'"
              ondblclick="document.getElementById('p01').className = 's1'"/>
              <p id="p01" class="s1">
                                                  床前明月光,疑似地上霜!
              </p>

 

例子:
 <style type="text/css">
   .num{
      width:60px;
      text-align:center;
   }
 </style>
 
 <script type="text/javascript">
     //计算
     function calc(){
        var n1 = document.getElementById("num1");//获取id="num1"的输入框
        var n2 = document.getElementById("num2");
        //将值转成整数
        var x = parseInt(n1.value);
        var y = parseInt(n2.value);
       
        var r = document.getElementById("result");
       
        var a = document.getElementById("action");//运算符

        //如果两个数组都填写
        if(n1.value != "" && n2.value != ""){
             if(a.value == "+"){
                 r.value = x + y;
             }else if(a.value == "-"){
                 r.value = x - y;
             }else if(a.value == "*"){
                 r.value = x * y;
             }else{
                 r.value = x / y;
             }
        }else{
            alert("请输入正确的需要运算的数值!");
        }
       
       
     } 
 </script>

       <input type="text" name="num1" class="num" id="num1"/>
       <select name="action" id="action">
         <option value="+">+</option>
         <option value="-">-</option>
         <option value="*">*</option>
         <option value="/">/</option>
       </select>
       <input type="text" name="num2" class="num" id="num2"/>
       <input type="button" value="=" onclick="calc()"/>
       <input type="text" name="result" class="num" id="result"/>

3、js向网页中写内容:innerHTML
例子:
 <script type="text/javascript">
     //显示内容
     function show(t){
        if(t.value == "显示输入框"){
           document.getElementById("p01").innerHTML = "用户名:<input type='text' name='uname'>";
           t.value = "隐藏输入框";
        }else if(t.value == "隐藏输入框"){
           document.getElementById("p01").innerHTML = "";
           t.value = "显示输入框";
        }
       
     } 
 </script>

       <input type="button" value="显示输入框" onclick="show(this)"/>
       <p id="p01">
      
       </p>


例子:微博发布的仿制
a、输入框默认灰色,填写时橙色,离开时灰色
b、如果没有填写内容,发布按钮默认不能点击,填写了才能点击,超出140个文字的范围也不能点击
c、实时计数功能,记录还能输入多少字符,已经超出多少字符
 <script type="text/javascript">
     //显示内容
     function calc(t){
        //统计输入字数
        var len = t.value.length;
        var tips = document.getElementById("tips");//span
       
        //如果没有超出范围
        if(len <= 140){
           tips.innerHTML = "还能输入<b>" + (140 - len) + "</b>字";
        }else{
           tips.innerHTML = "已超出<span style='color:red'><b>" + (len - 140) + "</b></span>字";
        }
       
        //检测如果字数超过,或者没有填写,则按钮不能使用
        if(len == 0 || len > 140){
           document.getElementById("bt01").disabled = "disabled";
        }else{
           document.getElementById("bt01").disabled = false;
        }
     } 
 </script>

       <p>
                             微博内容:<span id="tips">还能输入<b>140</b>字</span>
       </p>
       <textarea class="weibo" onkeyup="calc(this)"></textarea>
       <p>
         <input type="button" value="发布" id="bt01" disabled="disabled"/>
       </p>

注意:onkeyup键盘键位弹起事件!

 


精彩文章推荐
javascript学习笔记:js的基本运算[2016-1-10]
【常州CAD软件应用培训班】学员培训优秀案例展示[2013-12-12]
【常州东方博宜多媒体课程培训】学员优秀作品展示[2013-12-12]
【常州营销培训】网络营销测试题[2013-9-25]
spring从入门到精通:spring基础知识——常州电脑培训[2013-5-9]
猴子爬树和猫追老鼠的逻辑思考题[2012-7-1]
Android开发之Service实例——常州电脑培训[2012-6-29]
怎样提升简历合格率?——常州电脑培训[2012-6-26]


返回顶部