鼠标事件+键盘事件+表单事件+其它事件

目录

鼠标事件

1.鼠标点击事件

2.鼠标移动

 3.鼠标经过（很重要）

4.鼠标来源

5.鼠标定位

6.鼠标按键

7.鼠标滚轮事件

键盘事件（监听键盘）一般都是在window上面操作

 4.获取当前坐标的属性

输入框自带的事件（称为表单事件） 

1.input事件   用户在输入框中输入就会触发（是监听元素的）    常用

2.change事件 

3.让输入框自动有焦点

4.焦点事件 focus

5.失去焦点  blur

其它事件 

1.onload 加载完毕时执行

2.scroll  元素的滚动条滚动

鼠标事件

注意点：onclick和click的区别  ，on 就是绑定事件的意思，onclick就是绑定点击事件，click才是事件的名字 

为什么addEventListener('click',fn) 中的click不是onclick，因为addEventListener是添加，不需要绑定。

看到onclick这种加了on的 就是绑定事件 ，看到click这种不加on的就是监听事件addEventListener('click',fn)。

注意：下面的事件，如果想写在属性绑定或者行内式就加on,如果想写在addEventListener里面不加on

1.鼠标点击事件

鼠标点击事件包括 ：click（单击）(左键)，dblclick（双击）、mousedown（按下）和 mouseup（松开）。其中 click 事件类型比较常用，而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时，会禁止绑定对象的默认行为。

contextmenu(右键) ，得通过event.preventDefault();阻止默认事件，通过return false;没有效果

666

2.鼠标移动

mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度

例子：（此例子很重要）下面示例演示了如何综合应用各种鼠标事件实现页面元素拖放操作的设计过程。实现拖放操作设计需要解决以下几个问题。

• 定义拖放元素为绝对定位以及设计事件的响应过程，这个比较容易实现。
• 清楚几个坐标概念：按下鼠标时的指针坐标，移动中当前鼠标指针坐标，松开鼠标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标。
• 算法设计：按下鼠标时，获取被拖放元素和鼠标指针的位置，在移动中实时计算鼠标偏移的距离，并利用该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标。

 如上图所示，其中变量 ox 和 oy 分别记录按下鼠标时被拖放元素的纵横坐标值，它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取。变量 mx 和 my 分别表示按下鼠标时，鼠标指针的坐标位置。而 event.mx 和 event.my 是事件对象的自定义属性，用它们来存储当鼠标移动时鼠标指针的实时位置。

当获取了上面 3 对坐标值之后，就可以动态计算拖动中元素的实时坐标位置，即 x 轴值为 ox+event.mx-mx，y 轴为 oy+event.my-my。当释放鼠标按钮时，就可以释放事件类型，并记下松开鼠标指针时拖动元素的坐标值，以及鼠标指针的位置，留待下一次拖放操作时调用。

代码：这是借鉴的别人的代码，这部分知识掌握还会回来写的。

 3.鼠标经过（很重要）

鼠标经过包括移过和移出两种事件类型。

这下面4个绑定的都是父元素：

01.当移动鼠标指针到某个元素上时，将触发 mouseover 事件；如果从父元素中移到子元素中时，也会触发父元素的 mouseover 事件类型。从子元素移到父元素中也会触发。从子元素或者父元素中移到外面则不会触发，从外面移到子元素或者父元素会触发。（范围广点）

02.当移动鼠标指针到某个元素上时，将触发 mouseenter 事件；如果从父元素中移到子元素不会触发，从子元素中移到父元素也不会触发。从子元素或者父元素中移到外面则不会触发，从外面移到子元素或者父元素会触发。

mouseenter 事件的应用：结合伪类元素hover  下拉框，鼠标一移入父元素，就会出现一个下拉框，是父元素的子元素。从父元素中进入子元素不会触发，从子元素进入父元素也不会触发，从父元素进入外面，下拉框消失。

03.当把鼠标指针移出某个元素时，将触发 mouseout 事件。（从子元素中移出到父元素中就会触发mouseout事件，从父元素中移除到子元素也会触发，鼠标从子元素或者父元素移除到外面，就会触发该元素的mouseout事件）（范围广点）

04.当把鼠标指针移除出某个元素时，将触发 mouseleave 事件。（从父元素中移出到子元素中，不会触发，从子元素中移除到父元素中也不会触发，只有移除到父元素之外才会触发）（这里子元素也是算父元素中的一部分）

注意点：mouseenter  和 mouseleave 不支持冒泡

上面4个用下面代码验证就好：

eg：在下面示例中，分别为 3 个嵌套的 div 元素定义了 mouseover 和 mouseout 事件处理函数，这样当从外层的父元素中移动到内部的子元素中时，将会触发父元素的 mouseover 事件类型，但是不会触发 mouseout 事件类型。

    盒子

eg3：

获取鼠标指针在元素内的坐标。使用 offsetX 和 offsetY 属性可以实现这样的目标，但是 Mozilla 浏览器不支持。可以选用 layerX 和 layerY 属性来兼容 Mozilla 浏览器。

var event = event || window.event;
if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器x = event.offsetX;y = event.offsetY;
} else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器x = event.layerX;y = event.layerY;
}

但是，layerX 和 layerY 属性是以绝对定位的父元素为参照物，而不是元素自身。如果没有绝对定位的父元素，则会以 document 对象为参照物。为此，可以通过脚本动态添加或者手动添加的方式，设计在元素的外层包围一个绝对定位的父元素，这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差，可以适当减去 1 个或几个像素的偏移量。

完整设计代码如下：

鼠标跟随

这种做法能够解决在元素内部定位鼠标指针的问题。但是，由于在元素外面包裹了一个绝对定位的元素，会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下，可以考虑选用这种方法。

6.鼠标按键

通过事件对象的 button 属性可以获取当前鼠标按下的键，该属性可用于 click、mousedown、mouseup 事件类型。不过不同模型的约定不同，具体说明如下表所示。

IE 事件模型支持位掩码技术，它能够侦测到同时按下的多个键。例如，同时按下左右键，则 button 属性值为 1+2=3；同时按下中键和右键，则 button 属性值为 2+4=6；同时按下左键和中键，则 button 属性值为 1+4=5；同时按下 3 个键，则 button 属性值为 1+2+4=7。

但是 DOM 模型不支持这种掩码技术，如果同时按下多个键，就不能够准确侦测。例如，按下右键（2）与同时按下左键和右键（0+2=2）的值是相同的。因此，对于 DOM 模型来说，这种 button 属性约定值存在很大的缺陷。不过，在实际开发中很少需要同时检测多个鼠标按钮问题，一般仅需要探测鼠标左键或右键单击行为。

eg： 下面代码能够监测右键单击操作，并阻止发生默认行为。

document.onclick = function (e) {var e = e || window.event;  //标准化事件对象if (e.button == 2) {e.preventDefault();return false;}
}    

当鼠标单击事件发生时，会触发很多事件：mousedown、mouseup、click、dblclick。这些事件响应的顺序如下： 

mousedown → mouseup → click → mousedown → mouseup → click → dblclick

当鼠标在对象间移动时，首先触发的事件是 mouseout，即在鼠标移出某个对象时发生。接着，在这两个对象上都会触发 mousemove 事件。最后，在鼠标进入对象上触发 mouseover 事件。

7.鼠标滚轮事件

1.onwheel()   鼠标指针在被选元素内部，鼠标滚轮滚动时才会触发

mousewheel  也是鼠标滚轮事件

被选元素的子元素也算是被选元素内部。

注意：并不是 滚动条的滚动事件，而是鼠标滚轮的滚动事件。

应用：调节音量

键盘事件（监听键盘）一般都是在window上面操作

1.keydown  输入框的键盘按下 就会触发   （一般用这个就够了）

键盘按一个字母，就会监听按下的字母是什么（删除键也算是按下键盘也会触发）。如果按住不放就会一直触发。

应用：一般判定用户按了什么键

2.keyup   输入框的键盘松开就会触发。

3.keypress   输入框的键盘按下就会触发 

键盘事件触发时，产生的事件对象中：key属性和keyCode属性  重要

key是哪个键，返回的是按下的键的键名(键码)

keyCode返回keydown和keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符(ASCII码值)；(firefox2不支持 event.keycode，可以用 event.which替代 )

分析:给window添加键盘事件，当鼠标在窗口内时，按下键盘上的键，会触发键盘事件。 

 4.获取当前坐标的属性

clientX  clientY || x  y :获取的是鼠标点击的位置距离窗口的左边和上边的距离

输入框自带的事件（称为表单事件） 

1.input事件   用户在输入框中输入就会触发（是监听元素的）    常用

用户输入内容，或者粘贴内容，或者拖拽内容到输入框，都会触发input事件

与 keydown的区别，input输入框的value值一直在变。keydown事件是监听键盘的，input事件是监听元素的，如果是语音输入那种，keydown就没效果。input事件就会有用。所以input用得更多一点。

一般输入框input元素绑定input事件，其它元素可以绑定keydown事件。

盒子

666

666

        let img1 = document.createElement('img');img1.src = 'https://img2.baidu.com/it/u=1026317337,1339775897&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711';img1.onload = function () {console.log("img1加载完成");}

        let img2 = new Image();img2.src = 'https://img2.baidu.com/it/u=2045019318,65348288&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500';img2.onload = function () {console.log("img2加载完成");}

        window.addEventListener('scroll',()=>{console.log(document.body.scrolltop||document.documentElement.scrollTop);})

        window.onresize = function () {console.log("监听窗口大小变化");}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！