zoukankan      html  css  js  c++  java
  • 第二天:Javascript事件

    事件:是可以被Javascript侦测到的行为,例如鼠标的点击,鼠标的移动,常见的事件如下

     

    代码实现“点击事件”:
    <body>
    <button onclick="demo()">按钮</button>
    <script>
    function demo(){
    alert("hello");
    }
    </script>
    </body>
    运行结果:点击画面的按钮,弹出框 hello

    代码实现“鼠标经过”:

    1)style.css内容如下:
    div{
    100px;
    height: 100px;
    font-weight:bold;">crimson;
    }

    2)testjstty3.html内容如下:
    <head>
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div clsss="div" onmouseout="onOut(this)" onmouseover="onOver(this)"> </div>
    <script>
    function onOut(ooj){

    ooj.innerHTML="hello";
    }
    function onOver(ooj){
    ooj.innerHTML="world";
    }
    </script>

    运行结果:移动经过时,小红方框出现world;鼠标移出后,出现hello


    文本改变事件:
    <body onload="msg()">              //网页下载完成事件,事件时在body中写的
    <div clsss="div" onmouseout="onOut(this)" onmouseover="onOver(this)"> </div>
    <script>
    function onOut(ooj){

    ooj.innerHTML="hello";
    }
    function onOver(ooj){
    ooj.innerHTML="world";
    }
    </script>
    <form>
    <input type="text" onchange="changeDemo(this)"> //在文本框输入内容后,弹出框对话框,提示内容改变了
    </form>
    <script>
    function changeDemo(bg){
    alert("内容改变了");
    }
    </script>
    <form>
    <input type="text" onselect="selectDemo(this)"onfocus="focusDemo(this)"> //鼠标点击文本框,文本框变成绿色

    </form>
    <script>
            //鼠标选中文本框中的文字,文本框变成绿色

    function selectDemo(bg){

    bg.style.backgroundColor= "red";
    }
    function focusDemo(bg){
    bg.style.backgroundColor= "green";
    }
    function msg(){
    alert("网页内容下载完毕");
    }
    </script>
     


  • 相关阅读:
    WinAPI: midiOutReset 重置输出设备
    WinAPI: midiOutLongMsg 向输出设备发送一条系统专用的 MIDI 消息
    WinAPI: midiInStart 启动输入
    WinAPI: midiOutClose 关闭输出设备
    WinAPI: midiInStop 停止输入
    bootstrap居中
    设计模式之访问者模式
    zend framework 开发环境搭建及入门
    转:GIT GUI使用
    Asp web.config详解
  • 原文地址:https://www.cnblogs.com/fenr9/p/5566243.html
Copyright © 2011-2022 走看看