JS基础入门篇（二十）—事件和事件对象（一）

entner 发布于2019-08-29 15:36 / 2492人阅读

摘要：事件事件的定义所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为。点击事件需要注意的是事件名是，不是。鼠标移动事件鼠标移动持续触发，当鼠标移出此元素上停止触发。

1.事件

事件的定义：所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为null。

以下截取了部分元素的事件。

2.点击事件

需要注意的是：事件名是click，不是onclik。on指的是在....上。

点击事件分为以下三种：

    单击 - click
        按下 - mousedown
        抬起 - mouseup
    右击 - contextmenu(因为右击都是根据上下文出现菜单，所以右击是contextmenu)
        
    双击 - dbclick

1.当单击div时，结果为：
会触发 单击抬起按下 这三个事件

2.当双击div时，结果为：
会触发两次 单击抬起按下 这三个事件
触发一次双击事件

注意：如果双击的间隔时间过长，则认定为两次单击。

3.当在div区域按下，但是离开div区域松手。则结果为：
注意：单击事件只有在按下并抬起的时候才会触发。

3.鼠标移动事件

鼠标移动：持续触发，当鼠标移出此元素上停止触发。

当在div区域内移动时，不停的打印mousemove-鼠标在div上移动。当鼠标移出div区域时，停止打印。结果为：

4.键盘事件

键盘事件
    一般我们都是绑定在 document上进行全局的监控,
    或者可以在 表单控件上进行监听

    键盘按下
        keydown
        keypress - 功能键不触发(键盘的上下左右等功能键不触发)

    键盘抬起
        keyup

注意：

keydown 和 keypress的区别：keypress 功能键不触发(例如：键盘的上下左右等功能键不触发 keypress 事件)

eg：当在此页面上按下键盘上的 a ，结果为：

eg：当在此页面上按下键盘上的 shfit ，结果为：

eg：当在此页面上的input框中输入键盘上的 a ，结果为：

5.焦点事件

焦点

    页面中一些元素 可以获得 焦点,
    当他们获得焦点的时候, 我们可以操作他们

    注意: 不是所有 的 元素 都可以获得焦点
        浏览器中只会有 一个元素 得到焦点,当一个元素得到焦点的时候,必然会有另一个元素失去焦点

切换焦点的方法：
切换焦点的方式:
    1 - 按tab
        tabIndex(如果没使用tabIndex，则用tab切换，是按页面节点顺序切换。如果写了tabIndex的值，则按值的大小，从小到大切换)
    2 - 点击
    3 - js
    4 - html autofocus（页面打开就自动获取焦点）
     
 焦点事件
    onfocus（获取焦点）
    onblur（失去焦点）
焦点方法
    t.focus()
    t.blur()

案例一：（代码运行结果很难描述，大家自行运行。）

案例二：焦点事件和方法

云服务器混合云 js事件对象 js绑定事件基础事件对象 IE事件对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113429.html

JS基础入门篇（二十）—事件和事件对象（一）

摘要：事件事件的定义所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为。点击事件需要注意的是事件名是，不是。鼠标移动事件鼠标移动持续触发，当鼠标移出此元素上停止触发。 1.事件事件的定义：所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为nul...

ranwu 2019-08-26 11:59 评论0 收藏0
JS基础入门篇（二十）—事件和事件对象（一）

摘要：事件事件的定义所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为。点击事件需要注意的是事件名是，不是。鼠标移动事件鼠标移动持续触发，当鼠标移出此元素上停止触发。 1.事件事件的定义：所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为nul...

罗志环 2019-08-02 10:37 评论0 收藏0
JS基础入门篇（二十）—事件对象以及案例（二）

摘要：案例一点击按钮，选中中的全部内容方法选中全部。点击按钮选中输入框中的内容点击此按钮选中的全部内容案例二点击按钮，选中中的全部内容，并复制到粘贴板上。事件对象当发生事件，执行事件处理函数的时候，该时刻的详细信息。案例一.点击按钮，选中input中的全部内容 select（）方法：选中全部。点击按钮选中输入框中的内容！！！！ Title ...

DevTTL 2019-08-29 15:38 评论0 收藏0
JS基础入门篇（二十）—事件对象以及案例（二）

摘要：案例一点击按钮，选中中的全部内容方法选中全部。点击按钮选中输入框中的内容点击此按钮选中的全部内容案例二点击按钮，选中中的全部内容，并复制到粘贴板上。事件对象当发生事件，执行事件处理函数的时候，该时刻的详细信息。案例一.点击按钮，选中input中的全部内容 select（）方法：选中全部。点击按钮选中输入框中的内容！！！！ Title ...

EsgynChina 2019-08-26 12:00 评论0 收藏0
JS基础入门篇（二十）—事件对象以及案例（二）

摘要：案例一点击按钮，选中中的全部内容方法选中全部。点击按钮选中输入框中的内容点击此按钮选中的全部内容案例二点击按钮，选中中的全部内容，并复制到粘贴板上。事件对象当发生事件，执行事件处理函数的时候，该时刻的详细信息。案例一.点击按钮，选中input中的全部内容 select（）方法：选中全部。点击按钮选中输入框中的内容！！！！ Title ...

OldPanda 2019-08-02 10:37 评论0 收藏0