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. 快乐编程大本营【java语言训练班】 6课:用java的对象和类编程

    快乐编程大本营[java语言训练班] 6课:用java的对象和类编程 第1节. 什么是对象和类 第2节. 对象的属性和方法 第3节. 类的继承 第4节. 使用举例:创建类,定义方法,定义属性 第5节. ...

  2. Codeforces_712_B

    http://codeforces.com/problemset/problem/712/B 水,判断奇偶即可. #include<iostream> #include<string ...

  3. ARTS Week 13

    Jan 20, 2020 ~ Jan 26, 2020 Algorithm Problem 141 Linked List Cycle (环形链表) 题目链接 题目描述:给定一个链表,判断链表中是否存 ...

  4. ARTS Week 9

    Dec 23, 2019 ~ Dec 29, 2019 Algorithm Problem 69 Sqrt(x) 实现求解平方根函数Sqrt(x) 题目链接 题目描述:给定一个非负数x,求解该数字的平 ...

  5. 《Python学习手册 第五版》 -第12章 if测试和语法规则

    本章节的内容,主要讲解if语句,if语句是三大复合语句之一(其他两个是while和for),能处理编程中大多数逻辑运算 本章的重点内容如下: 1.if语句的基本形式(多路分支) 2.布尔表达式 3.i ...

  6. 洛谷P1179 【数字统计】

    题目传送门 此题题意十分明确:就是让我们统计在[L , R]区间内的数字2出现的次数. 然后我们再看一看此题的数据范围:1≤L≤R≤100000,所以用n log n的复杂度是可以过的. 1.解题思路 ...

  7. Descriptor - Python 描述符协议

    描述符(descriptor) descriptor 是一个实现了 __get__. __set__ 和 __delete__ 特殊方法中的一个或多个的. 与 descriptor 有关的几个名词解释 ...

  8. 07-SpringMVC01

    今日知识 1. SpringMVC入门 2. SpringMVC的注解开发 SpringMVC入门 1. 简介: * Spring MVC是Spring提供的一个强大而灵活的web框架.借助于注解,S ...

  9. javascript 对象api

    // Object 构造函数的属性: Object.prototype//可以为所有 Object 类型的对象添加属性 class A extends B{ constructor(){ super( ...

  10. 20200223--python学习第15天

    今日内容 模块知识 内置模块 time/datatime/json/其他 内容回顾&作业题 重点知识点 构造字典和函数对应的关系,避免重复的if  else a = 1 b = 2 ----- ...