细说JavaScript事件处理（JavaScript事件处理详解）

时间：2024-01-24 07:49:35


js语言的一个特色和就是它的动态性，即一时间驱动的方式对用户输入作出反应而不需要依赖服务器端程序。事件是指人机交互的结果，如鼠标移动、点击按钮、在表单中输入数据或载入新的Web洁面等。

一、什么是事件

事件是一些可以通过脚本响应的页面动作，当文档、浏览器、元素发生某些有趣的事情时，Web浏览器就会产生事件。例如当Web浏览器加载完文档、用户把鼠标指针移到超链接上或敲击键盘时web浏览器都会产生事件。事件包括事件类型、事件源、事件处理程序、事件对象和事件传播 。

1、事件源

事件源(Event Target)也称事件目标，是发生的事件或与之相关的对象。
在客户端的js应用程序中，任何一个元素都可以称为事件源，window，document，element对象是最常见的事件源

2、事件类型

事件类型(Event Type)是一个用来说明发生什么类型事件的字符串，如：mouseover
事件类型包括加载事件、鼠标事件、文本事件、键盘事件等

3、事件处理程序

事件处理程序(Event Handle)是处理或响应事件的函数。
应用程秀通过指明事件类型和事件源，在web浏览器中注册它们的事件处理程序。当在特定的事件源上发生特定类型的事件时，浏览器会调用特定的事件处理程序，当对象上注册的事件处理程序被调用时，我们会说浏览器“触发"了事件。

二、事件绑定

事件绑定是指构造一个响应系统或者用户动作的HTML元素的过程
要想让js对用户的操作作出响应首先要对HTML元素绑定事件处理函数。 所谓事件处理函数就是处理用户操作的函数 ，不同的操作对应不同的名称。在不同的浏览器版本中，有不同的事件绑定技术，在js中有三种常用的绑定事件的方法：

  • 在DOM元素中直接绑定
  • 在js代码中绑定
  • 绑定事件监听函数
1、在DOM元素中直接绑定

这里的DOM元素可以理解为HTML标签，js支持在标签中直接绑定事件，也就是把事件绑定到元素标识的属性，同一事件源可以绑定多个事件

​

// 1、原生函数
<input type="button" onclick="alert("1111");" value="事件绑定">
// 2、自定义函数
<input type="button" onclick="demo()" value="事件绑定">

function demo(){
	alert("22222");
}

// 把事件绑定到元素属性上的优点是可以支持开发者把参数传递给事件处理函数，接收事件的元素的引用则由一个特殊的参数值(this)传递
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <p>点clicktuupper文本框，字母变大写</p>
    <input type="text" value="clicktoupper" onclick="upper(this)">
<script>
    function upper(obj){
        obj.value = obj.value.toUpperCase();
    }
</script>
</body>
</html>
2、在JavaScript代码中绑定

脚本编程人员可以通过脚本语句的方式把事件绑定到对象上，而不是绑定到元素标识的属性上。
每个负责响应的元素对象都为自己能够识别的事件设置了响应的属性。对象属性名称是标识属性的小写形式。

​

// 语法
elementObject.onclick = function(){
// 事件处理代码
}

// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <input type="button" id="btn" value="按钮">
<script>
    var mBtn = document.getElementById('btn');
    mBtn.onclick = function(){
        alert('11111');
    }
</script>
</body>
</html>
3、绑定事件监听函数

绑定事件的另一种方法就是用addEventListener()或attachEvent()来绑定事件监听函数

​

// addEventListener()函数语法
// elementObject:DOM对象/DOM元素
// eventName：事件名称
// handle：用来处理事件的函数
// useCapture：布尔类型，决定是否使用捕获，一般设置false
elementObject.addEventListener(eventName,handle,useCapture);

// attachEvent()函数语法
// elementObject:DOM对象/DOM元素
// eventName：事件名称
// handle：用来处理事件的函数
elementObject.attachEvent(eventName,handle);

// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
    <div id="box">Box</div>
<script>
    var mBox = document.getElementById('box');
    mBox.addEventListener('mouseover',function(){
        this.style.background = 'red';
    },false);
    mBox.addEventListener('click',function(){
        alert('您点击了该区域');
    },false);
</script>
</body>
</html>

三、事件的类型

1、UI事件

UI事件指的是那些不一定与用户操作有关的事件，包括load事件、unload事件、resize事件、scroll事件等

1.1 load事件

​

// js中最常见的事件就是load事件，大部分web应用都需要web浏览器通知它们加载完毕和为某一些准备操作提供准备就绪的事件
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<style>
    #box{
        width: 200px; height: 200px; border: 1px solid #000;
        text-align: center; line-height: 200px; font-size: 30px;
    }
</style>
<script>
    document.getElementById('box').style.background = 'blue';
</script>
<body>
    <p>文档加载的时候代码是顺序执行的，给id="box"的div设置背景颜色为蓝色不成功</p>
    <div id="box">box</div>
</body>
</html>
// 以上代码设置颜色不成功，原因是文档加载的时候代码是顺序执行的，当执行js的设置背景颜色的代码时，还没有加载到id为box的div，所以js语句根本没有获取到对象

// 成功代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<style>
    #box{
        width: 200px; height: 200px; border: 1px solid #000;
        text-align: center; line-height: 200px; font-size: 30px;
    }
</style>
<script>
    window.onload = function(){
        document.getElementById('box').style.background = 'blue';
    }
</script>
<body>
    <p>文档加载的时候代码是顺序执行的，给id="box"的div设置背景颜色为蓝色成功</p>
    <div id="box">box</div>

</body>
</html>

​

1.2、unload事件

​

// 与load事件相对应的就是unload事件，这个事件在文档被完全卸载后触发
// 只要用户从一个页面切换到另一个页面就会触发unload事件
1.3、resize事件

​

// 当浏览器窗口被调整到另一个新的高度或宽度时会触发resize事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>

<body>
    <p>文档加载的时候代码是顺序执行的，给id="box"的div设置背景颜色为蓝色成功</p>
    <div id="box">box</div>

</body>
<script>
    window.onresize = function(){
        alert('您的窗口改变了大小');
    }
</script>
</html>
1.4、scroll事件

​

// 当用户在浏览器上滚动滚动条时，会触发scroll事件
// scroll事件也可能在任何可以滚动的文档元素上被触发
// 传递给resize和scroll事件处理程序的事件对象是一个非常普通的event对象，它并没有指定调整大小或发生滚动的详细属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>

<body>
    <p style="height: 1200px;">当用户滚动浏览器滚动条时弹出警示框</p>
</body>
<script>
    window.onscroll = function (){
        alert('滚动滚动条了');
    }
</script>
</html>
2、焦点事件

​

// 焦点事件会在页面获得或失去焦点时被触发。
// 这类事件最重要的就是onfocus和onblur

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>

<body>
姓名：<input type="text" onfocus="txtFocus(this)" onblur="txtBlur(this)"><br><br>
年龄：<input type="text" onfocus="txtFocus(this)" onblur="txtBlur(this)"><br><br>
性别：<input type="text" onfocus="txtFocus(this)" onblur="txtBlur(this)"><br><br>
</body>
<script>
    function txtFocus(obj){
        obj.style.background = 'red';
    }
    function txtBlur(obj){
        obj.style.background = 'blue';
    }
</script>
</html>
3、鼠标移动事件
类型 说明
click 鼠标点击事件
dblclick 鼠标双击事件
mousedown 鼠标上的按钮被按下触发的事件
mouseup 鼠标按下，抬起时触发的事件
mousemove 鼠标移动触发的事件
mouseover 鼠标进入元素时触发的事件
mouseout 鼠标离开元素时触发的事件
contextmenu 当上下文菜单即将出现时触发的事件，当前浏览器在鼠标右击时显示上下文菜单
3.1、click事件

​

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>

<body>
<input id="btn" type="button" value="点我点我">
</body>
<script>
    var mBtn = document.getElementById('btn');
    mBtn.onclick = function (){
        alert('点我了。。');
    }
</script>
</html>
3.2、mouseover和mouseout事件

​
​

4、滚轮事件

​

// mousewheel事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>

</body>
<script>
    window.onload = function(){
        addEvent(document,'DOMmouseScroll',handle); //firefox
        addEvent(document,'mousewheel',handle); //ie chrome
    }

    function handle(event){
        var delta = event.wheelDelta ? event.wheelDelta : -event.detail*40;
        var direction = delta>0 ? 'up' : 'down';
        document.title = direction;
        document.getElementById('direction').innerHTML = direction;
    }

    function addEvent(obj,xEvent,fn){
        obj.addEventListener(xEvent,fn,false);
    }
</script>
</html>
5、键盘与文本事件
类型 说明
keydown 当用户按下键盘上的任意键时触发，而且如果按住不放则会重复触发此事件
keypress 当用户按下键盘上的字符键时触发，而且如果按住不放则会重复触发此事件
keyup 当用户释放键盘上的任意键时触发 
// 用户在使用键盘时会触发键盘事件
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<input id="btn" type="text">
</body>
<script>
    document.getElementById('btn').onkeydown = function (event){
        alert(event.keyCode);
    }
</script>
</html>

四、事件对象

当触发DOM上的某个事件时会产生一个事件对象 event ，在这个对象中包含所有与事件有关的信息，包括导致事件的元素、事件类型以及其他与特定事件相关的信息。

1、DOM中的事件对象

event对象通用的属性和方法

属性/方法 说明 类型
bubbles 表明事件是否冒泡 boolean
canclebubble 表示是否可以取消事件的默认行为 boolean
currentTarget 其事件处理程序当前正在处理事件的哪个元素 element
defaultPrevented 为true表明已经调用了preventDefault boolean
detail 与事件相关的详细信息 integer
event,Phase 调用事件处理程序的阶段1表示捕获2表示处于目标3表示冒泡阶段 integer
target 事件目标 element
trusted 为true表示事件有浏览器生成，为false表示事件有开发者通过js创建 boolean
type 被触发事件的类型 string
view 与事件关联的抽象视图，等同于发生事件的window对象 abstractView
preventDefault() 取消事件默认行为 function
stopImmediatePropagation() 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用 function
stopPropagation 取消事件的进一步被捕获或冒泡 function 
// 实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<input type="button" value="弹出事件类型" id="btn">
</body>
<script>
    document.getElementById('btn').onclick = function (event){
        alert(event.type);
    }
</script>
</html>

​

2、IE中的事件对象

与访问DOM中的event对象不同，要访问IE中的对象有几种不同的方式，取决于指定事件处理程序的方法，在添加事件处理程序时，event对象作为window对象的一个属性存在
IE事件的属性和方法

属性/方法 说明 类型
canclebubble 默认值为false，但将其设置为true就可以取消事件冒泡 boolean
returnValue 默认值为true，但将其设置为false就可以取消事件的默认值 boolean
srcElement 事件目标 element
type 被触发事件的类型 string

相关文章