鼠标事件
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. Xamarin + MvvmCross 安装 Part 1

    前言 最近,由于工作需要,公司准备开发移动端APP.临近年底,公司不准备大面招人,由于公司一直基于.net平台进行开发,本人自告奋勇,准备先用xamarin做下移动开发.开始了在网上不停的google ...

  2. U68464 滑稽树上滑稽果（guo）

    U68464 滑稽树上滑稽果(guo) 题目描述 小小迪有 n 个约会对象,每个对象有一个约会时长 p[i],小小迪 想尽可能多的去完成他的约会(假设小小迪可以瞬移),每个对象还有 一个忍耐时间 q[ ...

  3. Linux下git的使用——将已有项目放到github上

    本地已经有一个项目了,需要将该项目放到github上,怎么操作? 步骤: 本地安装git,有github账号是前提. (1)先在github创建一个空的仓库,并复制链接地址.使用https,以.git ...

  4. Tyche 2191 WYF的递推式

    题目描述 WYF手中有这样一条递推式 WYF并不是想让你帮他做出结果,事实上,给定一个n,他能够迅速算出Fn.WYF只是想单纯的考验一下读者们. 输入描述 仅一行,三个整数N,F1,P 输出描述 仅一 ...

  5. linux中安装gcc

    在使用CentOS的yum -y install  时 可以先进入  /etc/yum.repos.d/ 文件下,将CentOS-Base.repo文件名改为CentOS-Base.repo.bak使 ...

  6. 用贝叶斯定理解决三门问题并用Python进行模拟（Bayes' Rule Monty Hall Problem Simulation Python）

    三门问题(Monty Hall problem)也称为蒙提霍尔问题或蒙提霍尔悖论,出自美国的电视游戏节目<Let’s Make a Deal>.问题名字来自该节目的主持人蒙提·霍尔(Mon ...

  7. thymeleaf中js跳转到另外一个页面

    <script type="text/javascript"> setTimeout("location.href='index'", 3000); ...

  8. expect交互式安装软件

    公司一些宿主机需要安装软件,吴老师要求写一个安装脚本: 脚本思路:首先要把安装的包拷贝到每台机器上,然后要让每台机器都运行一次安装命令:就想到了应用scp.ssh命令,但这两个命令需要输入对端密码,需 ...

  9. 【agc013d】Piling Up（动态规划）

    [agc013d]Piling Up(动态规划) 题面 atcoder 洛谷 有\(n\)个球,颜色为黑白中的一种,初始时颜色任意. 进行\(m\)次操作,每次操作都是先拿出一个求,再放进黑白各一个, ...

  10. 【转】使用STM32F4的CCM内存

    我们知道STM32F4当中有个CCM内存,如图所示,这个内存是挂在D总线上直接和内核相连,因此除了内核之外谁都不能访问,那么我们怎么将其利用起来呢?网上这个资料还真的很少,今天我就给大家分享一下,献给 ...