html鼠标事件

onload 页面加载

onclick 鼠标单击

onmouseover 鼠标移入

onmouseout 鼠标移出

onfocus 获取焦点

onblur 失去焦点

onchange 域的内容改变

在事件触发中，this表示对当前dom对象的引用

1、html事件，在html元素上直接绑定事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .btn{

            width:140px;

            height:30px;

            background:#abcdef;

            line-height:30px;

            text-align: center;

            font-size:14px;

            border-radius:5px;

            cursor:pointer;

        }

        div{

            width:140px;

            height:140px;

            background:#abcdef;

            line-height:140px;

            text-align: center;

            font-size:14px;

            margin:50px 0;

        }

    </style>

</head>

<body>

    <button id="btn" class="btn" onclick="alert('我被点击啦！');">我是按钮</button>

    <div onmouseover="myFun(this,'orange')" onmouseout="myFun(this,'pink')">我是div</div>

    <script>

        function myFun(obj,bgcolor){

            obj.style.backgroundColor=bgcolor;

        }

    </script>

</body>

</html>

DOM 0级

通过dom获取元素，并绑定事件

如果事件绑定跟的是函数名，千万不要加括号，否则不需要点击，页面一刷新即会触发函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .btn{

            width:140px;

            height:140px;

            background:#abcdef;

            line-height:140px;

            text-align: center;

            font-size:14px;

            margin:50px 0;

        }

        .btn-active{

            width:140px;

            height:140px;

            line-height:140px;

            text-align: center;

            font-size:14px;

            margin:50px 0;

            background:pink;

        }

    </style>

</head>

<body>

    <div id="btn" class="btn">解锁</div>

    <script>

        var btn=document.getElementById("btn");

        btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用

        function myFun(){

            if(this.className=="btn"){

                this.className="btn-active";

                this.innerHTML="锁定";

            }else{

                this.className="btn";

                this.innerHTML="解锁";

            }

        }

    </script>

</body>

</html>

当把获取dom元素的脚本，放置在元素的前面，会报错

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .btn{

            width:140px;

            height:140px;

            background:#abcdef;

            line-height:140px;

            text-align: center;

            font-size:14px;

            margin:50px 0;

        }

        .btn-active{

            width:140px;

            height:140px;

            line-height:140px;

            text-align: center;

            font-size:14px;

            margin:50px 0;

            background:pink;

        }

    </style>

        <script>

        var btn=document.getElementById("btn");

        btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用

        function myFun(){

            if(this.className=="btn"){

                this.className="btn-active";

                this.innerHTML="锁定";

            }else{

                this.className="btn";

                this.innerHTML="解锁";

            }

        }

    </script>

</head>

<body>

    <div id="btn" class="btn">解锁</div>

</body>

</html>

把脚本写在window.onload事件中，确保元素已经生成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .btn{

            width:140px;

            height:140px;

            background:#abcdef;

            line-height:140px;

            text-align: center;

            font-size:14px;

            margin:50px 0;

        }

        .btn-active{

            width:140px;

            height:140px;

            line-height:140px;

            text-align: center;

            font-size:14px;

            margin:50px 0;

            background:pink;

        }

    </style>

    <script>

        window.onload=function(){

            var btn=document.getElementById("btn");

            btn.onclick=myFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用

            function myFun(){

                if(this.className=="btn"){

                    this.className="btn-active";

                    this.innerHTML="锁定";

                }else{

                    this.className="btn";

                    this.innerHTML="解锁";

                }

            }

        }

    </script>

</head>

<body>

    <div id="btn" class="btn">解锁</div>

</body>

</html>

onfocus事件和onblur事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #tip{display: none;}

    </style>

    <script>

        window.onload=function(){

            var password=document.getElementById("password");

            var tip=document.getElementById("tip");

            password.onfocus=function(){

                tip.style.display="inline-block";

            }

            password.onblur=function(){

                var val=this.value;

                // 密码是6位数字

                if(val.length==6 && !isNaN(val)){

                    tip.innerHTML="ok";

                }else{

                    tip.innerHTML="error";

                }

            }

        }

    </script>

</head>

<body>

    <input type="password" id="password" name="password">

    <span id="tip">请输入密码</span>

</body>

</html>

获取body元素  document.body

当select中的option被选择时，select的value值就会等于被选中的option的value值

因此可以用this.value得到被选择的option的value值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            var menu=document.getElementById("menu");

            menu.onchange=function(){

                var color=this.value;

                if(color==""){

                    document.body.style.backgroundColor="#fff";

                }else{

                    document.body.style.backgroundColor=color;

                }

            }

        }

    </script>

</head>

<body>

    <p>请选择你喜欢的颜色呀</p>

    <select name="menu" id="menu">

        <option value="">请选择</option>

        <option value="orange">元气橙</option>

        <option value="pink">仙女粉</option>

        <option value="#abcdef">森系蓝</option>

    </select>

</body>

</html>

鼠标事件

onmousedown 鼠标按下

onmousemove 鼠标在元素内移动

onmouseup 鼠标松开

onresize 浏览器窗口大小调整

onscroll 拖动滚动条

onsubmit 表单提交 加在form表单上，而不是加在提交按钮上

onmousedown+onmouseup=onclick

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        div{

            width:200px;

            height:200px;

            background:#abcdef;

            overflow: auto;

        }

        #myform{

            margin-top:50px;

        }

    </style>

    <script>

        window.onload=function(){

            var div=document.getElementById("div");

            div.onmousedown=function(){

                this.innerHTML="onmousedown";

            }

            div.onmousemove=function(){

                this.innerHTML="onmousemove";

            }

            div.onmouseup=function(){

                this.innerHTML="onmouseup";

            }

            window.onresize=function(){

                console.log("resized");

            }

            div.onscroll=function(){

                this.style.color="orange";

            }

            var myform=document.getElementById("myform");

            myform.onsubmit=function(){

                alert("表单提交啦~");

            }

        }

    </script>

</head>

<body>

    <div id="div">

        文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>文字<br>

    </div>

    <form id="myform">

        <input type="submit">

    </form>

</body>

</html>

键盘事件

onkeydown 键盘被按下

onkeypress 键盘被按下（只有字母+数字+符号）

onkeyup 键盘被释放

keyCode 键码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script>

        window.onload=function(){

            var count=document.getElementById("count");

            var text=document.getElementById("text");

            text.onkeyup=function(e){

                console.log(e.keyCode);

                var len=text.value.length;

                count.innerHTML=30-len;

            }

        }

    </script>

</head>

<body>

    <p>还可以输入<span id="count">30</span>/30</p>

    <textarea name="text" id="text" cols="60" rows="3"></textarea>

</body>

</html>

js Dom为页面中的元素绑定键盘或鼠标事件的更多相关文章

  1. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  2. 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  3. Selenium2+python自动化12-操作元素（键盘和鼠标事件）

    前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  4. 自动化测试-8.selenium操作元素之键盘和鼠标事件

    前言 在前面的几篇中重点介绍了一些元素的定位方法,定位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  5. Selenium2学习（八）-- 操作元素（键盘和鼠标事件）

    前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  6. Selenium2+python自动化12-操作元素（键盘和鼠标事件）【转载】

    前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  7. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  8. Js脚本选取iframe中的元素

    遇到个小问题,需要用到原生Js处理页面中的元素,以往一个document.getElementById就完活的选取元素,这次却不好使了.. 仔细看代码发现要选取元素外面多了一个iframe标签 < ...

  9. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...

随机推荐

  1. 自己动手开发手机APP控制西门子200smart 教程（原创干货）

    自己动手开发手机APP控制西门子200smart 教程(原创干货)   自己动手开发手机APP控制西门子200smart 教程(原创干货) 2020-02-09 19:06:45 自己动手开发手机AP ...

  2. SpringBoot学习遇到的问题(1) - 配置文件有日志的debug模式等配置项，为什么不起作用

    这个问题困扰我近乎两天,通过查找N多资料后终于解决,写下来共享给大家. logging.level.root=DEBUG ... 一系列的日志配置项,都不起作用的原因是springboot启动加载不到 ...

  3. python dict 中的中文处理

    dict1 = {'中':'国 '} print dict1 ##{'\xc3\xa4\xc2\xb8\xc2\xad': '\xc3\xa5\xc2\x9b\xc2\xbd'} import jso ...

  4. Spring 事件：Application Event

    Spring Application Event Spring 的事件(Application Event)为 Bean 与 Bean 之间的消息通信提供了支持.当一个 Bean 处理完一个任务之后, ...

  5. 再次聚焦DOCKER MACHINE CODE 2048

    如果有一种feeling让世界难以释怀,那一定是发掘(挖土机那家强?)了什么了不起的东西 如果有一种贴图叫做深夜,仍不止息,那一定是饱含深意的贴图 // TODO: I'm not super hap ...

  6. Redis5.xc两种持久化方式以及主从复制配置

    关注公众号:CoderBuff,回复"redis"获取<Redis5.x入门教程>完整版PDF. <Redis5.x入门教程>目录 第一章 · 准备工作 第 ...

  7. File、FileStream、StreamWriter、StringWriter文件使用总结

    一.File 1.File为静态类 File类,是一个静态类,支持对文件的基本操作,包括创建,拷贝,移动,删除和打开一个文件.File类方法的参量很多时候都是路径path.主要提供有关文件的各种操作, ...

  8. ASP.NET Core 借助 Helm 部署应用至K8S

    前言 玩K8S也有一段时间了,借助云服务提供商的K8S控制台,已经可以很方便的快速部署应用至K8S.通过简单的点击,可以一次性帮忙创建K8S 对象:Deployment.Service.Ingress ...

  9. Ubuntu14.04安装tomcat-9.0.1的教程

    系统环境:Ubuntu14.04 Tomcat安装版本:Apache tomcat 9.0.1 下载地址:http://tomcat.apache.org/download-90.cgi 安装包:ap ...

  10. 杭电-------2052Picture（C语言）

    #include<stdio.h> int main() { int width, height; int i, j; while (~scanf("%d %d", & ...