鼠标事件和键盘事件

标签：png   top   兼容问题   enter   距离   aci   input   mouse   ctrl   

事件触发三要素：通过谁触发？通过什么触发?触发后要做什么？

事件的写法：

   w3c标准：事件写在行内，但是因为结构和行为要分离，所以我们一般情况下用JavaScript的方法来绑定事件，只有再极少数情况下，才将事件写在行内。

事件的绑定方法：

浏览器中的节点(对象).on+事件句柄 = function( ){

     要干什么？（放在浏览器中，不执行，当事件发生的时候再执行。）

}

例：oDiv.onclick=function(){  alert（1）}

事件总结：

事件是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。

事件类型：

只要写事件都要写on

鼠标事件：

1.单击事件

   oDiv.onclick = function（）{}

2.双击事件

   oDiv.ondbclick = function（）{}

3.鼠标右键事件（上下文菜单）

   oDiv.oncontextmenu = function（）{

//context 上下文  

//menu     菜单}

   4.鼠标按下事件

   oDiv.onmousedowm = function（）{

console.log（‘按下’）}

   5.鼠标抬起事件

      oDiv.onmouseup = function（）{

console.log（‘抬起’）}

   6.1鼠标移入

      oDiv.onmouseover = function（）{

console.log（‘鼠标移入over’）}

6.2鼠标移入，但不会再穿过子元素的时候触发

   oDiv.onmouseenter = function（）{

console.log（‘鼠标移入enter’）}

7.1鼠标移出

   oDiv.onmouseout = function（）{

console.log（‘鼠标移出out’）}

7.2鼠标移出，但不会再穿过子元素的时候触发

   oDiv.onmouseleave = function（）{

console.log（‘鼠标移出leave’）}

8.鼠标移动事件

      oDiv.onmousemove = function（）{

console.log（‘移动’）}

 键盘事件：

var oInput = document.querySelector(‘input’)

1.键盘按下

oInput.onKeydown = function（）{

console.log（‘按下’）}

   2.键盘抬起

oInput.onKeyup = function（）{

console.log（‘抬起’）}

   3.键盘敲击

oInput.onKeypress = function（）{

console.log（‘键盘敲击’）}

就算键盘一直按下不抬起这个press事件也会触发

表单事件：

在单选、多选，下拉菜单给这些元素绑定事件一般用change

例：

获取焦点事件：focus

  　　　　 oText.onfocus = function（）{console.log(‘获得焦点了’)}

失去焦点事件：onblur

　　　　　　oText.onblur = function（）{console.log(‘失去焦点了’)

　　　　　　//获取文本框的内容使用value属性

　　　　　　console.log（this.value）}

 表单提交事件：给整个form外层写

  　　　　　　 例：varo Form = document.querySelector（‘#form’）

  　　　　　　    oForm.onsubmit = function（）{

   　　　　　　　　   //在表单提交之前做一些处理

      　　　　　　　　//比如文本框没有内容就不提交

    　　　　　　　　  if（oText.value === ‘ ’）{

　　　　　　　　　　　　//不允许表单提交，return false可以阻止

　　　　　　　　　　　　　　return false}

　　　　　　　　　　　　console.log（‘提交’）}

event事件

　　　　当事件被触发的时候会得到一个信息（事件对象），包含了跟事件相关的一些属性和方法的封装（如：事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等），只有事件在触发的时候才会得到。

　　oDiv.onmousedown=function(e){

          　　   alert（e）;}

JS缺德定律：事件对象有兼容问题；

所以我们先做好兼容再去使用事件对象：

  如果e有效那么就是e本身，e无效就等于window.event

　　e=e || window.event;

　　alert (e.buttons)观察.buttons的返回值；

　　鼠标事件及方法；

获取键盘键码

键盘上每一个键都有一个唯一的编码，用来识别当前用户正在操作的是键盘上哪一个键

　　有兼容问题

　　e.keyCode || e.which

　　特殊键码：是否按下alt  ctrl  和 shift

　　e.altKey

　　e.ctrlKey

　　e.shiftKey

　　返回值是布尔值；

可以用来判断组合键

　　if（e.keyCode==13&&e.altKey）{

     　　alert(‘同时按下了enter和alt‘)}

默认行为（浏览器）

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。但是，有些时候我们是不需要默认事件的，所以就需要阻止默认事件

return false；

阻止默认行为的兼容写法，只有默认行为的事件才需要写这个

不同事件里，阻止的是不同的行为，即：

if(e.preventDefault) {

   e.preventDefault();

}else {

    window.event.returnValue = false;    

    //return false;}

重点报错：

不能从undefined身上读classlist

Uncaught TypeError: Cannot read property ‘classList‘ of undefined

鼠标事件和键盘事件

标签：png   top   兼容问题   enter   距离   aci   input   mouse   ctrl   

原文地址：https://www.cnblogs.com/52580587zl/p/12723125.html