• 第二天: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>
     


  • 相关阅读:
    设计模式---组合设计模式
    BeanCreationException: Error creating bean with name 'dataSource' defined in class path resource [
    Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test
    Myeclipse6.0 的hibernate反向工程
    注册码
    Window.Open参数、返回值
    JS键盘上所有按键KeyCode
    使用Spring的JdbcTemplate访问数据库 转
    handlerbar.js
    java 遍历所有子节点
  • 原文地址:https://www.cnblogs.com/fenr9/p/5566243.html
Copyright © 2020-2023  润新知