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. JSP-导入taglib 出现classNotFound异常

    案例 前端登录跳转到指定jsp,报classNoFoundException,原因是页面导入 <%@ taglib uri="http://java.sun.com/jsp/jstl/ ...

  2. Kafka动态配置实现原理解析

    问题导读 Apache Kafka在全球各个领域各大公司获得广泛使用,得益于它强大的功能和不断完善的生态.其中Kafka动态配置是一个比较高频好用的功能,下面我们就来一探究竟. 动态配置是如何设计的? ...

  3. CentOS 7 上安装 Django 2.2.4，解决报错：No module named ‘_sqlite3′

    1.首先下载最新版的sqlite :https://www.sqlite.org/download.html 下载源码包: 配置和编译方法如下: ./configure --prefix=/usr/l ...

  4. Perl Tk在IC设计中的应用、Windows、Linux平台下的安装-各种错误的摸索解决

    本文转自:自己的微信公众号<集成电路设计及EDA教程> <Perl Tk在IC设计中的应用.Windows.Linux平台下的安装-各种错误的摸索解决> Perl在IC设计中有 ...

  5. Codeforces_731_F

    http://codeforces.com/problemset/problem/731/F 其实是暴力枚举,但是有些小技巧,直接保存每个数的数量. 枚举每个起点时,然后依次加上起点大小的分段的数量的 ...

  6. Android Studio MainActivity中的R为红色

    csdn解决链接 https://blog.csdn.net/M283592338/article/details/79880413

  7. Codevs 1205 单词反转（Vector以及如何输出string）

    题意:倒序输出句子中的单词 代码: #include<cstdio> #include<iostream> #include<string> #include< ...

  8. Redis（九）：主从复制的设计与实现解析

    前面几篇我们已经完全理解了redis的基本功能的实现了. 但单靠基本功能实现,往往还是称不上优秀的项目的.毕竟,我们现在面对的都是复杂的环境,高并发的场景,大数据量的可能. 简而言之,现在的系统一般都 ...

  9. C#开源组件DocX处理Word文档基本操作(一)

    C#中处理Word文档,是大部分程序猿绕不过的一道门.小公司或一般人员会选择使用开源组件.目前网络上出现的帖子,大部分是NPOI与DocX,其它的也有.不啰嗦了,将要使用DocX的基本方法贴出来,供参 ...

  10. 研发协同平台持续集成之Jenkins实践

    导读 研发协同平台有两个核心目标,一是提高研发效率 ,二是提高研发质量,要实现这两个核心目标,实现持续集成是关键之一. 什么是持续集成 在<持续集成>一书中,对持续集成的定义如下:持续集成 ...