JavaScript事件

JavaScript事件

  • JavaScript事件
    • JavaScript单击事件与元素标签操作
    • JavaScript中的Timing定时事件
    • JavaScript实现简单计算器实例
    • JavaScript简单操作元素标签实例
    • Js事件处理值事件绑定方式
    • JS事件处理值获取时间源对象
    • JS时间处理之contextmenu右击时间
    • JS事件处理之mouse鼠标移入移出时间
    • JS事件处理之图片切换
    • JS事件处理之放大镜效果
    • JS事件处理之拖动效果
    • JS事件处理之keydown键盘事件
    • JS事件处理之load事件
    • JS事件处理之表单事件
    • JS事件处理之change事件
    • JS事件处理之scroll滚动事件

JavaScript事件

JavaScript单击事件与元素标签操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="hid">JavaScript语言实例--单击事件</h1>
    <button onclick="console.log('hello')">点击我</button>
    <button onclick="fun()">点击我1</button>
    <ul>
        <li>AAAA</li>
        <li>BBBB</li>
        <li>CCCC</li>
        <li>CCCC</li>
    </ul>
    <ol>
        <il>111111</il>
        <il>222222</il>
    </ol>

</body>
<script>
    function fun(){
     
        console.log('hello js');
        //获取id属性值为hid的元素标签
        var hid = document.getElementById("hid");
        //输出元素标签之间的文本内容
        console.log(hid.innerHTML);
        //修改标签之间的内容
        hid.innerHTML = "JavaScript语言实例--元素操作";
        //改变 HTML 元素的样式
        hid.style.color = "red";
        hid.style.backgroundColor = "#ddd";
    }

    //获取当前网页中的所有li元素标签
    var mlist = document.getElementsByTagName("li");
    //遍历输出
    for(var i in mlist){
     
        if(!isNaN(i)){
     
            console.log(mlist[i].innerHTML);
        }
        
    }
</script>
</html>

JavaScript中的Timing定时事件

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1 id="hid">JavaScript语言实例--定时器</h1>
        <h2 id = "nav">计数器: 0</h2>
        <button onclick="doStop()">停止</button>
    </body>
    <script>
        var m=0,mytime=null;
    
        function doRun(){
     
            m++;
            document.getElementById("nav").innerHTML = "计数器:"+m;
            mytime = setTimeout("doRun()",1000);
    
        }
    
        doRun();
    
        function doStop(){
     
            clearTimeout(mytime);
        }
    
        /*
        m = 0;
        var mytime = setInterval(function(){
            m++;
            document.getElementById("nav").innerHTML = "计数器"+m;
        },1000);
    
        function doStop(){
            clearInterval(mytime);//清除定时
        }
        */
        /*
        //定时3秒后执行参数中的函数
        setTimeout(function(){
            console.log("Hello JS!");
        },3000);
    
        //定时每个1秒执行参数回调函数一次
        var m = 0;
        setInterval(function(){
            m++;
            console.log("Hello JS! "+m);
        },1000);
        */
    
    
    </script>
    </html>

JavaScript实现简单计算器实例

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>JavaScript语言实例--简单计算器</h1>
        <form action="" name="myform" method = "GET">
            数值1<input type="text" name="num1" size="10"><br/><br>
            数值2<input type="text" name="num2" size="10"><br/><br>
            结 果:<input type="text" name="res" readonly style="border:0px;">
            <br><br>
            <input type="button" onclick="doFun(1)" value="加">
            <input type="button" onclick="doFun(2)" value="减">
            <input type="button" onclick="doFun(3)" value="乘">
            <input type="button" onclick="doFun(4)" value="除">
    
        </form>
    </body>
    <script>
        //处理函数
        function doFun(c){
     
            var m1 = parseInt(document.myform.num1.value);
            var m2 = parseInt(document.myform.num2.value);
            switch(c){
     
                case 1: var res = m1+"+"+m2+"="+(m1+m2); break;
                case 2: var res = m1+"-"+m2+"="+(m1-m2); break;
                case 3: var res = m1+"*"+m2+"="+(m1*m2); break;          
                case 4: var res = m1+"/"+m2+"="+(m1/m2); break;
    
            }
            //将结果放置到第三个输入框中
            document.myform.res.value = res;
    
        }
    </script>
    </html>

JavaScript简单操作元素标签实例

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>JavaScript语言实例--js操作元素标签属性(放大和缩小)</h1>
        <button onclick="dofun(1)">放大</button>
        <button onclick="dofun(2)">缩小</button>
        <button onclick="dofun(3)">隐藏</button>
        <br/><br/>
        <div style="width:200px;height:200px;background-color:#ddd;" id="did"></div>
    
    </body>
    <script>
        var width=200,height=200;
        var did = document.getElementById("did");
    
        function dofun(m){
     
            switch(m){
     
                case 1:
                    width += 10;
                    height += 10;
                    did.style.width =width+"px";
                    did.style.height = height+"px";
                    break;
                case 2:
                    width -= 10;
                    height -= 10;
                    did.style.width =width+"px";
                    did.style.height = height+"px";
                    break;
                case 3:
                   did.style.display = "none";
                    break;
            }
        }
    </script>
    </html>

Js事件处理值事件绑定方式

Event 对象
  1. 事件源(在网页中可见的东西都可以被作为事件源)

  2. 事件
    按钮1
    按钮2

  3. 事件处理程序

JS事件处理值获取时间源对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 onclick = "fun(this)">标题</h2>
    <h2 id="hid">标题</h2>
</body>
<script>
    function fun(ob){
     
        console.log("aaaaaaaa");
        //console.log(ob); 不传入ob直接输出this的话是输出的上一行的内容。获取不到时间源。
        ob.style.color = "green";
    }

    document.getElementById("hid").onclick = function(){
     
        console.log("bbbbbbbb");
        //此种时间绑定方式,this就表示当前事件源对象
        //console.log(this);
        this.style.color = "red";
    }
</script>
</html>

JS时间处理之dblclick双击事件

   <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
        <style>
            ul,li{
     margin:0px;padding:0px;}
            ul{
     list-style:none;}
            ul li{
     height:30px;margin-top:4px;background-color:#ddd;}
            ul li:hover{
     background-color:#fc0;}
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--dblclick双击事件</h1>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    <script>
       //获取上面所有的li元素节点
       var mlist = document.getElementsByTagName("li");
       //遍历绑定事件
       for(var i=0;i<mlist.length;i++){
     
           mlist[i].ondblclick = function(){
     
               //设置背景颜色
               this.style.backgroundColor = "#f0c";
           }
       }
    </script>
    </html>

JS时间处理之contextmenu右击时间

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
        <style>
            ul,li{
     margin:0px;padding:0px;}
            ul{
     list-style:none;width:100px;text-align:center;position:absolute;display:none;}
            ul li{
     height:30px;line-height:30px;margin-top:4px;background-color:#ddd;}
            ul li:hover{
     background-color:#fc0;}
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--contextmenu鼠标右击事件</h1>
        <ul id="uid">
            <li>剪切</li>
            <li>复制</li>
            <li>粘贴</li>
        </ul>
    </body>
    <script>
       document.oncontextmenu = function(ent){
     
           //获取兼容的事件对象
           var event = ent || window.event;
           
           //获取鼠标在网页中的点击位置
           var x = event.clientX;
           var y = event.clientY;
            console.log(x,y);
    
            var uid = document.getElementById("uid");
            uid.style.top = y+"px";
            uid.style.left = x+"px";
            uid.style.display = "block";
           return false;
       }
    </script>
    </html>

JS事件处理之mouse鼠标移入移出时间

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
        <style>
            div,img,ul,li{
     margin:0px;padding:0px;}
            #did{
     width:384px;height:240px;}
            #did img{
     display:none;}
            #did img:first-child{
     display:block}
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--mouse鼠标移入和移出事件</h1>
        <div id="did" onmouseover="doStop()" onmouseout="doStart()">
            <img src="./images/11.jpg" width="384"/>
            <img src="./images/22.jpg" width="384"/>
            <img src="./images/33.jpg" width="384"/>
            <img src="./images/44.jpg" width="384"/>
        </div>
    </body>
    <script>
        var m = 1;
        var mytime = null;
        //定义函数展示对应的图片
        function show(x){
     
            var mlist = document.getElementById("did").getElementsByTagName("img");
            for(var i=0; i<mlist.length; i++){
     
                if(x == i+1){
     
                    mlist[i].style.display = "block";
                }else{
     
                    mlist[i].style.display = "none";
                }
            }
        }
    
        //开启定时轮播图片
        function doStart(){
     
            if(mytime == null){
     
                mytime = setInterval(function(){
     
                    m++;
                    show(m);
                    if(m>=4){
     
                        m = 0;
                    }
                }, 2000);
            }
        }
    
        //停止轮播图片
        function doStop(){
     
            if(mytime != null){
     
                clearInterval(mytime);
                mytime = null;
            }
        }
    
        doStart();
    </script>
    </html>

JS事件处理之图片切换

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
        <style>
            div,img,ul,li{
     margin:0px;padding:0px;}
            #did{
     width:384px;height:240px;}
            #list img{
     width:85px;border:2px solid #fff;margin-right:2px;}
            #list img:hover{
     border:2px solid red;}
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--onmouseover鼠标移入事件</h1>
        <div id="did">
            <img id="mid" src="./images/11.jpg" width="384"/>
        </div>
        <div id="list">
            <img src="./images/11.jpg"/>
            <img src="./images/22.jpg"/>
            <img src="./images/33.jpg"/>
            <img src="./images/44.jpg"/>
        </div>
    </body>
    <script>
        //获取所有小图列表
        var mlist = document.getElementById("list").getElementsByTagName("img");
        //遍历这些图片
        for(var i=0; i<mlist.length; i++){
     
            mlist[i].onmouseover = function(){
     
                document.getElementById("mid").src =  this.src;
            }
        }
    </script>
    </html>

JS事件处理之放大镜效果

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
        <style>
            div,img,ul,li{
     margin:0px;padding:0px;}
            #did{
     width:300px;height:300px;overflow:hidden;display:none;position:absolute;}    
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--图片的放大镜效果</h1>
        <br/><br/><br/>
        <img id="mid" src="./images/33.jpg" width="384" height="240"/>
        <div id="did">
            <img src="./images/33.jpg"/>
        </div>
    </body>
    <script>
        //获取被放大图片和放大镜图片对象
        var mid = document.getElementById("mid");
        var did = document.getElementById("did");
        //为图片添加鼠标移入和移除事件
        mid.onmouseover = function(){
     
            //对放大镜进行定位
            did.style.top = this.offsetTop+"px";
            did.style.left = this.offsetLeft+this.offsetWidth+10+"px";
            did.style.display = "block";
        }
        mid.onmouseout = function(){
     
            did.style.display = "none";
        }
        //添加鼠标移动事件
        mid.onmousemove = function(ent){
     
            //获取兼容的鼠标事件对象
            var event = ent || window.event;
    
            //获取鼠标在图片上的位置
            var x = event.clientX - this.offsetLeft;
            var y = event.clientY -this.offsetTop;
            //定位放大镜位置
            did.scrollTop = y*5-150;
            did.scrollLeft = x*5-150;
        }
    </script>
    </html>

JS事件处理之拖动效果

   <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
        <style>
            div{
     margin:0px;padding:0px;}
            #did{
     width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}    
        </style>
    </head>
    <body>
        <h1>JavaScript语言实例--拖动效果</h1>
        <div id="did"></div>
    </body>
    <script>
       //获取div层对象
       var did = document.getElementById("did");
       //绑定鼠标按下事件
       did.onmousedown = function(ent){
     
            //获取兼容的事件对象
            var event = ent || window.event;
            //获取鼠标在div层上的位置
            var x = event.clientX-this.offsetLeft;
            var y = event.clientY-this.offsetTop;
    
            this.style.backgroundColor = "blue";
            //绑定鼠标移动事件
            document.onmousemove = function(e){
     
                var myevent = e || window.event;
                //定位
                did.style.top = myevent.clientY-y+"px";
                did.style.left = myevent.clientX-x+"px";
            }
       }
       //绑定鼠标松开事件
       did.onmouseup = function(){
     
            this.style.backgroundColor = "#ddd";
            //取消移动事件
            document.onmousemove = null;
       }
    </script>
    </html>

JS事件处理之keydown键盘事件

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
    </head>
    <body>
        <h1>JavaScript语言实例--键盘事件onkeydown</h1>
    </body>
    <script>
        window.document.onkeydown = function(ent){
     
            //获取兼容的事件对象
            var event = ent || window.event;
    
            //输出键盘值
            console.log(event.keyCode);
        }
    </script>
    </html>

JS事件处理之load事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
    <script>
        //当页面加载完成后才自动执行的程序
        window.onload = function(){
     
            var hid = document.getElementById("hid");
            hid.style.color="red";
        }
    </script>
</head>
<body>
    <h1 id="hid">JavaScript语言实例--onload事件</h1>
</body>
</html>

JS事件处理之表单事件

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
    </head>
    <body>
        <h1 id="hid">JavaScript语言实例--表单事件</h1>
        <form action="js10.html" name="myform" method="post" onsubmit="return doSubmit()">
            账号:<input type="text" name="uname" onblur="checkUname()"/><br/><br/>
            密码:<input type="password" name="upass"  onblur="checkUpass()" /><br/><br/>
            邮箱:<input type="text" name="email"/><br/><br/>
            <input type="submit" value="提交"/>
        </form>
    </body>
    <script>
        //表单提交事件处理程序
        function doSubmit(){
     
            return checkUname() && checkUpass();
        }
    
        //验证账号
        function checkUname(){
     
            var name = document.myform.uname.value;
            if(name.length<=0){
     
                alert("账号不可以为空");
                return false;
            }
            return true;
        }
    
        //验证密码
        function checkUpass(){
     
            var pass = document.myform.upass.value;
            if(pass.length<6){
     
                alert("密码必须大于等于6位");
                return false;
            }
            return true;
        }
    </script>
    </html>

JS事件处理之change事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
</head>
<body>
    <h1 id="hid">JavaScript语言实例--change事件</h1>
    <select name="sid" id="sid">
        <option value="">-请选择-</option>
        <option value="1">北京</option>
        <option value="2">河北</option>
        <option value="3">天津</option>
        <option value="4">河南</option>
        <option value="5">山西</option>
    </select>
    <select id="cid"></select>
</body>
<script>
    var data = new Array();
    data[1] = ["海淀区","朝阳区","丰台区","昌平区"];
    data[2] = ["石家庄","保定","邯郸","邢台"];
    data[3] = ["河东区","河西区","河北区","南开区"];
    data[4] = ["郑州","洛阳","开封","驻马店"];
    data[5] = ["太原","大同","吕梁","运城"];

    //获取两个下拉框元素对象
    var sid = document.getElementById("sid");
    var cid = document.getElementById("cid");
    //绑定change事件
    sid.onchange = function(){
     
        //获取下拉框中的值
        var v = this.value;
        cid.length = 0; //删除cid的下拉项
        //判断并循环对应城市信息
        if(v != ""){
     
            for(var i=0; i<data[v].length; i++){
     
                //创建一个下拉项并添加到cid下拉框中
                cid.add(new Option(data[v][i],i));
            }
        }
    }
</script>
</html>

JS事件处理之scroll滚动事件

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript语言实例</title>
    </head>
    <body>
        <h1 id="hid">JavaScript语言实例--滚动条事件</h1>
        <div id="aid" style="height:500px;width:700px;background-color:#ddd;"></div>
        <div id="bid" style="height:500px;width:700px;background-color:#eee;"></div>
    </body>
    <script>
        window.onscroll = function(){
     
            var scrollTop = 0;
            if(document.documentElement && document.documentElement.scrollTop){
     
                scrollTop = document.documentElement.scrollTop;
            }else if(document.body){
     
                scrollTop = document.body.scrollTop;
            }
            document.getElementById("bid").innerHTML = scrollTop;
        }
    </script>
    </html>

你可能感兴趣的:(笔记,js)