JavaScript事件的基本概述，以及鼠标，键盘，表单事件的绑定

àì夳堔傛蜴生んèń 2023-07-14 14:59 23阅读 0赞

\*\*

## 事件：什么是事件？ ##

\*\*

事件是发生并得到处理的操作，既：事件来了，然后处理。

比如：1.电话铃声响起(事件发生) --需要接电话（处理）  
2.学生举手请教问题（有事了） – 需要解答（处理）  
3.按钮被点击了，然后对应一个函数来处理

**2.事件绑定方式**

JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作时，再去执行一系列代码。

JavaScript有两种事件模型：  
1.内联模型  
2.脚本模型/外联模式(常用)

***绑定事件格式:***  
元素节点.on + 事件类型 = 匿名函数。

click 事件类型  
onclick 事件处理的函数

## 事件的绑定 ##

**1.鼠标事件(可以绑定在任何元素节点上)**

click 单击触发

dblclick 双击触发

var oBtn = document.getElementById("bn1");
                        oBtn.ondblclick = function(){ 
                        alert("按钮");
                             }

mouseover 鼠标移入

mouseout 鼠标移出

mousemove 鼠标移动（会不停的触发）

mousedown 鼠标按下

mouseup 鼠标抬起

mouseenter 鼠标移入

mouseleave 鼠标移出

**mouseover 与 mouseenter 的区别**

mouseover 经过子节点会重复触发  
mouseenter经过子节点不会重复触发 并且这个功能在IE后才会有

**2.键盘事件（表单元素，全局window）**

keydown 键盘按下（如果按下不放手，会一直触发）

keyup 键盘按下（只支持字符键）

keypress 键盘抬起

**3.HTML事件分window事件和表单事件**

**1.window事件**

1.load 当页面加载完成以后会触发

2.unload 当页面解构的时候触发（刷新页面，关闭当前页面） IE浏览器兼容

3.scroll 页面滚动

4.resize 窗口发生变化的时候触发

**2.表单事件**

1.blur 失去焦点

2.fouce 获得焦点

var iIput = document.getElementById("input1");
                    iIput.onblur = function(){ 
                        this.value = '失去焦点';
                    }
                    iIput.onfocus = function(){ 
                        this.value = '获得焦点';
                    }

3.select 当我们在输入框内选中文本的时候触发

4.change 当我们对输入框的文本进行修改并且失去焦点的时候

iIput.onchange = function(){ 
    alert("被修改了");
    } //无论删除或者添加内容，失去焦点后都会触发

**注：下来两个按钮的事件必须添加在form元素上**

5.submit 当我们点击submit上的按钮才会触发  
6.reset 当我们点击reset上的按钮才会触发

HTML标签：

JavaScript语法

var fF1 = document.getElementById("f1");
    fF1.onsubmit = function(){ 
    alert("提交");
    }
    fF1.onreset = function(){ 
    alert("重置");
    }