JavaScript-单击事件

最新推荐文章于 2024-06-26 20:37:52 发布

难平是人心

最新推荐文章于 2024-06-26 20:37:52 发布

阅读量517

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Just__2009/article/details/108872725

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

单击事件

<body>
    <h1 id="hid">单击事件</h1>
    <button onclick="fun()">开始</button>
    <ul id="uid">
        <li>AAAAA</li>
        <li>BBBBB</li>
        <li>CCCCC</li>
        <li>DDDDD</li>
    </ul>
    <ol>
        <li>1111111</li>
        <li>2222222</li>
    </ol>
</body>
<script>
   function fun(){
        console.log('hello js');
        //获取id属性值为hid的元素标签
        var hid = document.getElementById("hid");
        //输出元素标签之间的文本内容
        console.log(hid.innerHTML);
        //修改标签之间的内容
        hid.innerHTML = "新的内容";
        //改变 HTML 元素的样式
        hid.style.color = "red";
        hid.style.backgroundColor = "#ddd";
   }

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

</script>

Timing定时事件

一次性定时使用setTimeout
循环式调用SetInterval

<body>
    <h1>定时器</h1>
    <h2  id="hid">计数器：0</h2>
    <button onclick="doStop()">停止</button>
</body>
<script>
    var m=0,mytime=null;

    function doRun(){
        m++;
        document.getElementById("hid").innerHTML = "计数器："+m;
        
        mytime = setTimeout(doRun,1000);
    }
    
    doRun();
    
    function doStop(){
        clearTimeout(mytime);
    }
    

    /*
    //定义时3秒后执行参数中的函数
    setTimeout(function(){
        console.log("Hello JS!");
    },3000);


    //定时每隔1秒执行参数回调函数一次
    var m = 0;
    setInterval(function(){
        m++;
        console.log("Hello "+m);
    },1000)
    */
</script>

<body>
    <h1>定时器</h1>
    <h2  id="hid">计数器：0</h2>
    <button onclick="doStop()">停止</button>
</body>
<script>
 
    
    m = 0;
    var mytime = setInterval(function(){
        m++;
        document.getElementById("hid").innerHTML = "计数器："+m;
    },1000)

    function doStop(){
        clearInterval(mytime);
    }
    


</script>

处理事件绑定方式

按钮1 事件源
onclick 事件
fun()事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript事件处理</title>
</head>
<body>
    <h1>JavaScript事件处理</h1>
    <button onclick="fun()">按钮1</button>
    <button id="bid">按钮2 </button>

    
</body>
<script>
    function fun(){
        console.log("按钮1被点击");
    }
    //分离更彻底，可读性更差
    document.getElementById("bid").onclick=function(){
        console.log("按钮2被点击");
    }
</script>
</html>

获取事件源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取事件源</title>
</head>
<body>
    <h1>获取事件源</h1>
    <h2 onclick = "fun()">标题一</h2>
    <h3 id = "hid">标题二</h3>
</body>
<script>
    function fun(){
        console.log("aaaa");
        console.log(this）;
    }
    document.getElementById("hid").onclick=function(){
        console.log("bbbbbb");
        console.log(this);
        this.style.color="red";
    }
</script>
</html>

前者无法调用事件源，由于方法没有绑定事件源。
后者可以调用事件源，由于方法已经绑定事件源。

解决前者可调用事件源方法，为方法添加一个this的参数。

<h2 onclick = "fun(this)">标题一</h2>



function fun(event){
        console.log("aaaa");
        event.style.color="green";
    }

双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>dblclick双击事件</h1>
    <ul>
        <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="purple";
        }
    }
</script>
</html>

鼠标右击事件

<!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>-contextmenu鼠标右击事件</h1>
    <ul id="uid">
        <li>剪切</li>
        <li>复制</li>
        <li>粘贴</li>
    </ul>
</body>
<script>
   document.oncontextmenu = function (e){
       //获取事件对象
       var event = e;
	   //获取鼠标当前坐标
       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>

鼠标移入移出（图片轮播效果）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播</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>图片轮播</h1>
    <div id="did" onmouseover="doStop()" onmouseout="doStart()">
        <img src="https://cms-origin-cn.battle.net/cms/template_resource/CJ11MK8XG4BY1482907672106.jpg" width="800"/>
        <img src="https://cms-origin-cn.battle.net/cms/template_resource/8VWL0ALIMOCT1482908961287.jpg" width="800"/>
        <img src="https://cms-origin-cn.battle.net/cms/template_resource/X2KR7G1S1SOW1482894885693.jpg" width="800"/>
        
    </div>
</body>
<script>
    var x = 0;
    var mytime = null;
    var mList = document.getElementById("did").getElementsByTagName("img");
    function show(x){
        for(var i=0;i<mList.length;i++){
            if(x==i){
                mList[i].style.display="block";

            }else{
                mList[i].style.display="none";

            }
            }
    }
    function doStart(){
        mytime = setInterval(function(){
            show(x);
            x++;
            if(x>=mList.length){
                x=0;  
            }
        },2000)
    }
    function doStop(){
        if(mytime!=null){
            clearInterval(mytime); 
            mytime=null;
        }

    }
    doStart();
</script>
</html>

鼠标移入事件（图片切换）

实现原理：本质上是替换图片引用源。

<body>
    <h1>图片切换 鼠标移入事件</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>

图片放大镜效果

实现原理：通过鼠标移入缩略图显示原图来实现放大镜效果。

准备原图和缩略图。
添加鼠标移入（原图显示）和鼠标移出（原图消失）事件
根据缩略图所在位置设置原图出现位置。
获取鼠标在缩略图上的横纵坐标值（页面坐标值减去缩略图初始值）。
根据横纵坐标值的对应比例，在原图上进行等比滚动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大镜效果</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>图片放大镜效果</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>

鼠标点击和松开事件（图片拖动效果）

实现原理：

添加鼠标点击事件，修改图片颜色给予用户反馈，获取鼠标在图片上的位置。
添加鼠标移动事件，绑定为全局（避免速度移动过快拖动丢失），获取鼠标相对图片的位置并对图片图片位置进行变更。
添加鼠标松开事件，回滚图片颜色基于用户反馈，停止鼠标移动事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片拖动效果</title>
    <style>
        div{margin:0px;padding:0px;}
        #did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}    
    </style>
</head>
<body>
    <h1>图片拖动效果</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>

获取键盘值

通过inkeydown来创建事件，通过keyCode来获取按键值。
可以用来实现页面内元素的键盘控制以及屏蔽按键。

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

        //输出键盘值
        console.log(event.keyCode);
    }
</script>
</html>

onload事件

当页面加载完成后再执行onload事件。

Form表单事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form表单事件</title>
</head>
<body>
    <h1 id="hid">Form表单事件</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>

Change事件

实现原理：

绑定change对象。
判断对象的值，对其他元素进行修改。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change事件</title>
</head>
<body>
    <h1 id="hid">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>

滚动条事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动条事件</title>
</head>
<body>
    <h1 id="hid">滚动条事件</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>

难平是人心

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JavaScript-单击事件

单击事件<body> <h1 id="hid">单击事件</h1> <button onclick="fun()">开始</button> <ul id="uid"> <li>AAAAA</li> <li>BBBBB</li> <li>CCCCC</li> <li>
复制链接

扫一扫

专栏目录