JavaScript之事件的分类

        在JavaScript事件中的事件有好多种类：鼠标事件，键盘事件，文本事件，窗体事件等等。

        鼠标事件

        

                click----点击
                mousedown----鼠标落下
                mousemove----鼠标移动
                mouseup----鼠标抬起
                contextmenu----监听右键，展开菜单
                mouseover----当鼠标进入区域的时候有事件发生
                mouseout----当鼠标离开区域的时候有事件发生
                mouseenter----H5新规范：当鼠标进入区域的时候有事件发生
                mouseleave----H5新规范：当鼠标离开区域的时候有事件发生

        在鼠标点击事件中有三个：click，mousedown，mouseup。执行顺序是 先mousedown，然后mouseup，最后click。

   document.onclick = function(){
           console.log('click');
   }
   document.onmousedown = function(){
           console.log('mousedown');
   }
   document.onmouseup = function(){
           console.log('mouseup');
   }

            区分左右键

            在鼠标事件中，区分左右键的事件之后mousedown和mouseup。

            Dom3规定，click只能监听鼠标左键，不能监听右键。只能用mousedown和mouseup来判断鼠标左右键。

            在事件对象中有个属性叫做button，当button的属性为0的时候为左键，当button为1的时候为中间滑轮，当button的属性为2的时候为右键。

            

document.onmousedown = function(e){
var e = e || window.event;
document.oncontextmenu = funcion(e){
e.preventDefault();
}
if(e.button == 0 ){
console.log('你点了左键');
}else if(e.button == 2){
console.log('你点了右键');
}
}

            键盘事件

            在事件中有响应键盘按键的事件;keydown,keyup,keypress。响应顺序是：keydown>keyoress>keyup

            keydown可以响应任何按键。而keypress只能响应字符类按键，返回ascll码。

            在键盘事件中如果按下的是字符类按键的话，事件对象中有个charCode就是按下字符的ascll码。当我们用keydown的话，当你按下同一个字母不同大小写时返回的一样。而当使keypress时，返回的不一样。即我们在利用String中的 fromCharCode来获取按下的是什么。

document.onkeypress = function(e){
       console.log(String.fromCharCode(e.charCode));
}

            如果不是字符类按键时我们可以运用keydown。在事件对象中有个属性是which可以检测按下的是哪个键。

         文本操作事件

                文本操作事件有 input，change focus blur

                    input：但凡文本有变化，触发input

var input = document.getElementsByTagName('input')[0];
input.oninput = function(){
          console.log(this.value);
}

            这个事件只要输入就触发。

                change：表示聚焦时和失去焦点时，文本是否发生改变，改变就触发，不改变不触发。

var input = document.getElementsByTagName('input')[0];
input.onchange = function(){
console.log(this.value);
}

            focus:当文本聚焦时触发

var input = document.getElementsByTagName('input')[0];
input.onfocus = function(){
if(this.value == "请输入关键字"){
this.value = "";
}
}

        blur: 当文本失去焦点时触发

var input = document.getElementsByTagName('input')[0];
inout.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
}
}

        窗体类操作事件

            窗体类操作事件中有：scroll和load两种。

            scroll;表示只要窗体滚动条滚动，就触发事件。

window.onscroll = function(){
console.log(window.pageXOffset + " " + window.pageYOffset);
}

            load: 表示整个网页加载完成和渲染完成之后，触发事件（不建议使用，会使浏览器运行效率变低）。

       

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，

也希望能帮到大家。一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步