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. 虚拟机 ubuntu系统忘记密码如何进入

    重启 虚拟机 按住shift键 会出现下面的界面 按住‘e’进入下面的界面往下翻 更改红框勾到的字符串为:  rw init=/bin/bash 然后按F10进行引导 然后输入 :”passwd”  ...

  2. artTemplate--模板使用自定义函数(1)

    案例 因为公司业务需要频繁调用接口,后端返回的都是json树对象,需要有些特殊的方法做大量判断和数据处理,显然目前简单语法已经不能满足业务需要了,需要自己定制一些 方法来处理业务逻辑. 例如后台返回的 ...

  3. Java 分布式框架面试题合集

    Java 分布式框架面试题合集 1.什么是 ZooKeeper? 答:ZooKeeper 是一个开源的分布式应用程序协调服务,是一个典型的分布式数据一致性解决方案.设计目的是将那些复杂且容易出错的分布 ...

  4. mybatis从数据库中取数据且分组,返回分组数据

    mapper.xml文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PU ...

  5. 【转载】计算机程序的思维逻辑 (82) - 理解ThreadLocal

    本节,我们来探讨一个特殊的概念,线程本地变量,在Java中的实现是类ThreadLocal,它是什么?有什么用?实现原理是什么?让我们接下来逐步探讨. 基本概念和用法 线程本地变量是说,每个线程都有同 ...

  6. Nginx之keepalived高可用工具

    1.创建两台虚拟机,分别为主机和从机,区别两台虚拟机的IP地址 2. 将keepalived上传到linux系统当中 3. cd /usr/local目录 4. tar -zxvf keepalive ...

  7. tmobst6

    1.(单选题)Oracle数据库中,在SQL语句中连接字符串的方法是:(). A)CAT B)CONCAT C)JOIN D)UNION 2.(单选题)在数据库中,有一个名为seq的序列对象,以下语句 ...

  8. Ansi、Unicode、UTF8字符串之间的转换和写入文本文件

    转载请注明出处http://www.cppblog.com/greatws/archive/2008/08/31/60546.html 最近有人问我关于这个的问题,就此写一篇blog Ansi字符串我 ...

  9. 使用 GitHub Actions 实现 Hexo 博客自动部署

    一.Hexo 相关知识点 静态博客简单,但是发布博文时稍显麻烦,一般需要下面两步: hexo clean hexo g -d // 相当于 hexo g + hexo d 如果考虑到同步源文件,还需要 ...

  10. Go语言实现：【剑指offer】数组中出现次数超过一半的数字

    该题目来源于牛客网<剑指offer>专题. 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组 ...