鼠标事件
click：单击
dblclick：双击
mousedown：鼠标按下
mouseup：鼠标抬起
mouseover：鼠标悬浮
mouseout：鼠标离开
mousemove：鼠标移动
mouseenter：鼠标进入
mouseleave：鼠标离开

<button onclick="myClick()">鼠标单击</button>
    <button ondblclick="myDBClick()">鼠标双击</button>
    <button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
    <button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
    <button onmousemove="myMouseMove()">鼠标移动</button>
    <button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>

<script>
        function myClick() {
            console.log("你单击了按钮！");
        }
        function myDBClick() {
            console.log("你双击了按钮！");
        }
        function myMouseDown() {
            console.log("鼠标按下了！");
        }
        function myMouseUp() {
            console.log("鼠标抬起了！");
        }
        function myMouseOver() {
            console.log("鼠标悬浮！");
        }
        function myMouseOut() {
            console.log("鼠标离开！")
        }
        function myMouseMove() {
            console.log("鼠标移动！")
        }
        function myMouseEnter() {
            console.log("鼠标进入！")
        }
        function myMouseLeave() {
            console.log("鼠标离开！")
        }

键盘事件
keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起

<body>
    <input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
    </body>

<script>
        /*输出输入的字符*/
        function myKeyDown(id) {
            console.log(document.getElementById(id).value);
        }
        /*按键结束，字体转换为大写*/
        function myKeyUp(id) {
            var text = document.getElementById(id).value;
            document.getElementById(id).value = text.toUpperCase();
        }
    </script>

HTML事件
load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
resize：窗口尺寸变化
scroll：滚动条移动

<body onload="loaded()">
    <div style="height: 3000px" ></div>
    <input type="text" id="name" onselect="mySelect(this.id)">
    <input type="text" id="name2" onchange="myChange(this.id)">
    <input type="text" id="name3" onfocus="myFocus()">
    </body>

<script>
        window.onload = function () {
            console.log("文档加载完毕！");
        };
        /*window.onunload = function () {
         alert("文档被关闭！");
         };*/
        /*打印选中的文本*/
        function mySelect(id) {
            var text = document.getElementById(id).value;
            console.log(text);
        }
        /*内容被改变时*/
        function myChange(id) {
            var text = document.getElementById(id).value;
            console.log(text);
        }
        /*得到光标*/
        function myFocus() {
            console.log("得到光标！");
        }
        /*窗口尺寸变化*/
        window.onresize = function () {
            console.log("窗口变化！")
        };
        /*滚动条移动*/
        window.onscroll = function () {
            console.log("滚动");
        }
    </script>

事件模型：

<body>
    <!--脚本模型：行内绑定-->
    <button onclick="alert('hello')">hello</button>
    <!--内联模型-->
    <button onclick="showHello()">hello2</button>
    <!--动态绑定-->
    <button id="btn">hello3</button>
    </body>

<script>
        function showHello() {
            alert("hello");
        }
        /*DOM0：同一个元素只能添加一个同类事件
         * 如果添加多个，后面的会把前面的覆盖掉*/
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("hello");
        };
        btn.onclick = function () {
            alert("hello world");
        };
        /*DOM2:可以给一个元素添加多个同类事件*/
        btn.addEventListener("click", function () {
            alert("hello1");
        });
        btn.addEventListener("click", function () {
            alert("hello2");
        });
        /*不同浏览器的兼容写法*/
        /*IE*/
        if (btn.attachEvent) {
            btn.attachEvent("onclick", function () {
                alert("hello3");
            });
        /*W3C*/
        } else {
            btn.addEventListener("click", function () {
                alert("hello4");
            })
        }
    </script>

事件冒泡与事件捕获：

<style>
            #div1{
                width: 400px;
                height: 400px;
               
            }
            #div2{
                width: 300px;
                height: 300px;
                background-color: #33ff66;
            }
            #div3{
                width: 200px;
                height: 200px;
                background-color: #fff24a;
            }
            #div4{
                width: 100px;
                height: 100px;
                background-color: #ff4968;
            }
        </style>

<title>事件冒泡、事件捕获</title>
    </head>
    <body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div4">
     
                </div>
            </div>
        </div>
    </div>
    </body>

<script>
        var div1 = document.getElementById("div1");
        div1.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div1");
        },false);
        var div2 = document.getElementById("div2");
        div2.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div2");
        },false);
        var div3 = document.getElementById("div3");
        div3.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div3");
        },false);
        var div4 = document.getElementById("div4");
        div4.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div4");
        },false);
    </script>

阻止默认事件：

<body>
    <a href="http://www.baidu.com" onclick="stop(event)">百度</a>
    </body>

<script>
        function stop(event) {
            if (event.preventDefault()) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
            alert("不跳转！")
        }

Javascript鼠标键盘事件的更多相关文章

  1. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  2. Linux 模拟 鼠标 键盘 事件

    /************************************************************************ * Linux 模拟 鼠标 键盘 事件 * 说明: ...

  3. javascript的键盘事件大全

    javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...

  4. Python——pyHook监听鼠标键盘事件

    pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...

  5. Python - selenium_WebDriver 鼠标键盘事件

    from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...

  6. Tkinter 鼠标键盘事件（一）

    一: 鼠标事件 <Button-1>                                                                     鼠标左键单击 ...

  7. Selenium4.0+Python3系列（四） - 常见元素操作（含鼠标键盘事件）

    一.写在前面 上篇文章介绍的是关于浏览器的常见操作,接下来,我们将继续分享关于元素的常见操作,建议收藏.转发! 二.元素的状态 在操作元素之前,我们需要了解元素的常见状态. 1.常见元素状态判断,傻傻 ...

  8. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  9. c# 使用hook来监控鼠标键盘事件的示例代码

    如果这个程序在10几年前,QQ刚刚兴起的时候,有了这个代码,就可实现盗号了. 当然使用钩子我们更多的是实现"全局快捷键"的需求. 比如 程序最小化隐藏后要"某快捷键&qu ...

随机推荐

  1. Django ContentType组件

    ContentType组件 引入 现在我们有这样一个需求~我们的商城里有很多的商品~~节日要来了~我们要搞活动~~ 那么我们就要设计优惠券~~优惠券都有什么类型呢~~满减的~折扣的~立减的~~ 我们对 ...

  2. [SDOI2013] 直径

    传送门:>HERE< 题意:给出一颗树,求出被所有的直径都经过的边的数量 解题思路: 先求出任意一条直径并记录节点. 然后依次枚举直径上的每一个节点,判断从当前节点延伸出去的非直径的一条路 ...

  3. virtualenv virtualenvwrapper 虚拟环境创建

    虚拟环境创建 安装 C:\Users\Python> pip install virtualenv Requirement already satisfied: virtualenv ) C:\ ...

  4. linux tar 解压命令

    如果提示 common not find 先进行安装如下 wget http://www.rarsoft.com/rar/rarlinux-5.3.0.tar.gz tar -zxvf rarlinu ...

  5. Square（斯特林反演）

    题意 给出一个 \(n × m\) 大小的矩形,每个位置可以填上 \([1, c]\) 中的任意一个数,要求填好后任意两行互不等价且任意两列互不等价,两行或两列等价当且仅当对应位置完全相同,求方案数 ...

  6. [luogu4479][BJWC2018]第k大斜率【二维偏序+二分+离散化+树状数组】

    传送门 https://www.luogu.org/problemnew/show/P4479 题目描述 在平面直角坐标系上,有 n 个不同的点.任意两个不同的点确定了一条直线.请求出所有斜率存在的直 ...

  7. ssh 免密root登录

    安装SSH SERVER 在所有的节点上都安装SSH server服务. # apt-get install openssh-server1 因为我们搭建的Ceph直接使用root用户,所以需要修改s ...

  8. Nginx优化文件编写

    server_tokens off; #并不会让nginx执行的速度更快,关闭它可隐藏错误页面中的nginx版本号charset utf-8,gbk; #字符#sendfile on;#tcp_nop ...

  9. codeforces #541 F Asya And Kittens(并查集+输出路径)

    F. Asya And Kittens Asya loves animals very much. Recently, she purchased nn kittens, enumerated the ...

  10. 解决使用jedis连接是报DENIED Redis is running in protected mode错误

    DENIED Redis is running in protected mode because protected mode is enabled, no bind address was spe ...