JavaScript事件

德尔菲
561 阅读5分钟

一. 事件

什么是事件？

事件是可以被Javascript侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述事件信息。

事件可以做什么

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

js事件与jquery事件的区别

jquery事件与js事件的写法不同但效果一样

jQuery是把JavaScript的一些方法 的实现给封装起来的，为了很好的解决浏览器兼容问题。

二. 事件类型

JavaScript可以处理的事件类型为：鼠标类型、键盘类型和HTML类型！

注意：所有的事件处理函数都由两个部分组成，on+事件名称。

例如：click事件，处理函数就是onclick！

鼠标事件

click： 单击鼠标按钮时触发；

dblclick：当用户双击主鼠标按钮时触发；

mousedown： 当用户按下鼠标还未弹起时触发；

mouseup： 当用户释放鼠标按钮时触发；

mouseover： 当鼠标移到某个元素上方时触发；

mouseout： 当鼠标移出某个元素上方时触发；

mousemove：当鼠标指针在元素上移动时触发；

mouseenter： 在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；

mouseleave：鼠标移出；

<button onclick="Click()">鼠标单击</button> 
<button ondblclick="DBClick()">鼠标双击</button> 
<button onmousedown="MouseDown()" onmouseup="MouseUp()">鼠标按下和抬起</button> 
<button onmouseover="MouseOver()" onmouseout="MouseOut()">鼠标悬浮和离开</button> 
<button onmousemove="MouseMove()">鼠标移动</button> 
<button onmouseenter="MouseEnter()" onmouseleave="MouseLeave()">鼠标进入和离开</button>

     function Click() {  
       console.log("你单击了按钮！");  
   }  
   function DBClick() {  
       console.log("你双击了按钮！");  
   }  
   function MouseDown() {  
       console.log("鼠标按下了！");  
   }  
   function MouseUp() {  
       console.log("鼠标抬起了！");  
   }  
   functionMouseOver() {  
       console.log("鼠标悬浮！");  
   }  
   function MouseOut() {  
       console.log("鼠标离开！")  
   }  
   function MouseMove() {  
       console.log("鼠标移动！")  
   }  
   function MouseEnter() {  
       console.log("鼠标进入！")  
   }  
   function MouseLeave() {  
       console.log("鼠标离开！")  
   }

键盘事件

keydown： 当用户按下键盘上任意键时触发，如果按住不放，会重复触发；

keyup： 当用户释放键盘上的键触发；

keypress： 当用户按下键盘上的字符键时触发，如果按住不放，会重复触发；

<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"> 

   /*输出输入的字符*/
function myKeyDown(id) {
  console.log(document.getElementById(id).value);
}

/*按键结束，字体转换为大写*/
function myKeyUp(id) {
  var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}

HTML事件

load： 当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发（文档加载完成）

select： 当用户选择文本框（input或textarea）中的一个或多个字符触发；（被选中的时候）

change： 当文本框（input或textarea）内容改变且失去焦点后触发（内容被改变）

focus： 当页面或者元素获得焦点时在window及相关元素上面触发（得到光标）

resize： 当窗口或框架的大小变化时在window或框架上触发（窗口尺寸变化）

scroll： 当用户滚动带滚动条的元素时触发（滚动条移动）

unload： 当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；

input： 输入

blur： 当页面或元素失去焦点时在window及相关元素上触发

submit： 当用户点击提交按钮在<form>元素上触发

reset： 当用户点击重置按钮在<form>元素上触发

<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()"> 

window.onload = function () {  
       console.log("文档加载完毕！");  
   };  
   /*打印选中的文本*/  
   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("滚动");  
   }

三. 事件对象（event）

什么是事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

就是当你触发了一个事件以后，对该事件的一些描述信息 IE、Chrome：event是一个内置的全局对象 处理兼容性

      document.onclick = function  fn(){
            var ev = ev||event;
            alert('处理兼容');
        }

event常用属性和方法

type 属性

type属性用来获得【当前触发事件】的类型，此属性只读。

        document.onclick=function(a){
            console.log("事件类型"+a.type);
        }

image.png

bubbles属性

bubbles属性用来获得【当前触发事件的类型】是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false。

必须注意的是：bubbles属性指的是该事件是否冒泡。和事件处理机制无关

因为鼠标【点击事件】这个事件本身支持冒泡。

因此当存在点击事件被触发后，event对象的bubbles属性返回的就是true，表示当前事件支持冒泡。

    <body>
    <button>单击</button>
    <script>
        var obt =document.querySelector("button");
        obt.onclick = function(e) {
            console.log(e.bubbles);//是否冒泡
        }
        document.onclick=function(a){
            console.log("事件类型："+a.type);//返回事件类型
        }
    </script>
    </body>

image.png

eventPhase 属性

eventPhase：事件传导至【当前节点】时处于什么的状态。

1:事件处于捕获状态

2：事件处于真正的触发者

3：事件处于冒泡状态

<body>
    <button>单击</button>
    <script>
        var def =document.querySelector("button");
        def.addEventListener("click",function(e){
            console.log("按钮事件："+e.eventPhase);
        })
        document.addEventListener("click",function(e){
            console.log("document事件："+e.eventPhase);
        },true)
    </script>
</body>

image.png

button属性

button 返回当事件被触发时，哪个鼠标按钮被点击。 参数 描述

0指定鼠标左键。

1指定鼠标中键。

2 指定鼠标右键。

<body>
        <div></div>
        <script>
            document.querySelector("div").onmousedown=function(e){
                if(e.button==2){
                    alert("你点击了右键");
                    e.preventDefault()
                }else if(e.button==0){
                    alert("你点击了左键");
                }else{
                    alert("你点击了其他键");
                }
            }
        </script>
</body>

image.png

获取当前坐标的属性

clientX得到当前屏幕可视区域x坐标的值(不包含滚动条)
clientY得到当前屏幕可视区域y坐标的值(不包含滚动条)
screenX得到当前屏幕x坐标的值
screeny得到当前屏幕y坐标的值
pageX得到当前屏幕可视区域x坐标的值(包含滚动条)
pageY得到当前屏幕可视区域y坐标的值(包含滚动条)
  <style>
        html{
            width: 2000px;
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
        document.onclick=function(e){
            console.log("e.clientX="+e.clientX);
            console.log("e.clientY="+e.clientY);
            console.log("e.screenX="+e.screenX);
            console.log("e.screenY="+e.screenY);
            console.log("e.pageX="+e.pageX);
            console.log("e.pageY="+e.pageY);
        }
    </script>
</body>

image.png event中常用的方法

stopPropgation()：阻止冒泡。

preventDefault()：默认阻止。

avatar
文章
阅读
粉丝