脚本宝典收集整理的这篇文章主要介绍了JavaScript事件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在JavaScript中,注册事件(绑定事件)有两种方式,即传统方式注册事件
和事件监听方式注册事件
。
1、传统方式
元素对象.事件 = 事件的处理程序;
// 示例
oBtn.onclick = function () { }
注意:该方式注册事件的特点在于注册事件的唯一性
,即同一个元素同一个事件只能设置一个处理函数
,最后注册的处理函数将会覆盖前面注册的处理函数。
2、事件监听方式
由于不同浏览器采用的事件流
实现方式不同,事件监听的实现存在兼容性
问题。通常根据浏览器的内核,可以把浏览器划分为两大类,一类是早期版本的IE浏览器(如IE 6~IE 8),一类是遵循W3C标准的浏览器(以下简称标准浏览器)。
注意:该方式注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。
早期IE内核的浏览器,事件监听方式如下:
DOM对象.attachEvent(type, callback);
type
:DOM对象绑定的事件类型,如onclick.。
callback
:事件的处理程序。
标准浏览器,包括IE8版本以上的IE浏览器,以及新版的Firefox、Chrome等浏览器,事件监听方式如下:
DOM对象.addEventListener(type, callback, [capture]);
type
:DOM对象绑定的事件类型,如click。
callback:事件的处理程序。
capture:默认为false,表示冒泡阶段完成事件处理,true为捕获阶段完成事件处理。
事件监听的移除也需要考虑兼容性问题,示例代码如下。
DOM对象.onclick = null; // 传统方式删除事件
DOM对象.detachEvent(type, callback); // 早期版本IE浏览器
DOM对象.removeEventListener(type, callback); // 标准浏览器
当一个事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是event。只有有了事件event才会存在,它是系统自动创建的,不需要传递参数。
在标准浏览器中会将一个event对象直接传入到事件处理程序中,而早期版本的IE浏览器(IE 6~IE 8)中,仅能通过window.event才能获取事件对象。
var 事件对象 = window.event // 早期IE内核浏览器
DOM对象.事件 = function (event) {} // W3C内核浏览器
注意:因为在事件触发时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。所以,在事件处理函数中需要用一个形参来接收事件对象event。
在事件发生后,事件对象event中会包含一些所有事件都有的属性和方法。所有事件基本上都包括的常用的属性和方法如下表所示。
属性 | 说明 | 浏览器 |
---|---|---|
e.target | 返回触发事件的对象 | 标准浏览器 |
e.srcElement | 返回触发事件的对象 | 非标准IE 6-IE 8使用 |
e.type | 返回事件的类型 | 所有浏览器 |
e.stopPropagation() | 阻止事件冒泡 | 标准浏览器 |
e.cancelBubble | 阻止事件冒泡 | 非标准IE 6-IE 8使用 |
e.preventDefault() | 阻止默认事件(默认行为) | 标准浏览器 |
e.returnValue | 阻止默认事件(默认行为) | 非标准IE 6-IE 8使用 |
对比e.target和this的区别
在事件处理函数中,e.target返回的是触发事件的对象,而this返回的是绑定事件的对象。因为e.target支持IE9以上,所以编写以下代码,处理兼容性问题。
div.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
阻止默认行为
在实际开发中,为了使程序更加严谨,想要确定含有默认行为的标签符合要求后,才能执行默认行为时,可利用事件对象的preventDefault()
方法和returnValue
属性,禁止所有浏览器执行元素的默认行为。需要注意的是,只有事件对象的cancelable
属性设置为true
,才可以使用preventDefault()方法取消其默认行为。
可以利用事件对象调用stopPropagation()
方法和设置cancelBubble
属性,实现禁止所有浏览器的事件冒泡行为。
if (window.event) { // 早期版本的浏览器
window.event.cancelBubble = true;
} else { // 标准浏览器
e.stopPropagation();
}
鼠标是计算机的一种输入设备,也是计算机显示系统纵横坐标定位的指示器,所以鼠标事件是Web开发中最常用的一类事件。常见的鼠标事件如下表所示:
事件名称 | 事件触发时机 |
---|---|
onclick | 单击鼠标左键时触发 |
onfocus | 获得鼠标指针焦点触发 |
onblur | 失去鼠标指针焦点触发 |
onmouseover | 鼠标指针经过时触发 |
onmouseout | 鼠标指针离开时触发 |
onmousedown | 当按下任意鼠标按键时触发 |
onmouseup | 当释放任意鼠标按键时触发 |
onmousemove | 在元素内当鼠标指针移动时持续触发 |
禁止鼠标右击菜单
contextmenu主要控制应该何时显示上下文菜单,主要应用于程序员取消默认的上下文菜单,示例代码如下。
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
禁止鼠标选中 selectstart事件是鼠标开始选择文字时就会触发,如果禁止鼠标选中,需要禁止该事件的默认行为,示例代码如下。
document.addEventListener('selectstart', function (e) {
e.preventDefault();
})
鼠标事件对象MouseEvent,是跟鼠标事件相关的一系列信息的集合,可以用来获取当前鼠标的位置信息,鼠标事件位置属性如下表所示。
位置属性(只读) | 描述 |
---|---|
clientX | 鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标) |
clientY | 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标) |
pageX | 鼠标指针位于文档的水平坐标(X轴坐标),IE 6~IE 8不兼容 |
pageY | 鼠标指针位于文档的垂直坐标(Y轴坐标),IE 6~IE 8不兼容 |
screenX | 鼠标指针位于屏幕的水平坐标(X轴坐标) |
screenY | 鼠标指针位于屏幕的垂直坐标(Y轴坐标) |
IE 6~IE 8浏览器中不兼容pageX和pageY属性,在项目开发时需要对IE 6~IE 8浏览器进行兼容处理,示例代码如下所示。
var pageX = event.pageX || event.clientX + (document.body.scrollLeft ||document.documentElement.scrollLeft)
var pageY = event.pageY || event.clientY + (document.body.scrollTop ||document.documentElement.scrollTop)
图片跟随鼠标移动并在下方显示坐标
案例需求
:简单实现图片跟随鼠标移动的效果(不考虑兼容性)。
案例分析
:需要使用鼠标指针移动事件mousemove,每次鼠标移动,都会获得最新的鼠标指针坐标,把这个x和y坐标作为图片的top和left 值就可以实现图片的移动。
效果展示
代码实现<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
/* width: 100px;
height: 100px; */
/* display: block; */
/* background-color: aqua; */
position: absolute;
top:2px;
cursor:pointer;
}
img{
width: 70px;
height: 50px;
position: absolute;
top:2px;
}
</style>
<body>
<img src="../../2021-9-25/2021-11-26/code/images/angel.gif" alt="">
<div></div>
<script>
var pic1 = document.querySelector('img');
document.addEventListener('mousemove',function(e){
var e = e||window.event;
var x = e.pageX;
var y = e.pageY;
pic1.style.left = x+'px';
pic1.style.top = y+'px'
})
</script>
<script>
var pic = document.querySelector('div');
document.addEventListener('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
pic.style.left = x+'px';
pic.style.top = y+50+'px';
var z = ('('+x+','+y+')');
pic.innerText = z;
})
</script>
</body>
</html>
键盘事件是指用户在使用键盘时触发的事件。例如,用户按Esc键关闭打开的状态栏,按Enter键直接完成光标的上下切换等。常用的键盘事件如下表所示。
事件名称 | 事件触发时机 |
---|---|
keypress | 某个键盘按键被按下时触发,不识别功能键,如Ctrl、Shift、箭头等 |
keydown | 某个键盘按键被按下时触发 |
keyup | 某个键盘按键被松开时触发 |
注意 keypress事件保存的按键值是ASCII码
,keydown和keyup事件保存的按键值是虚拟键码
,keydown和keypress如果按住不放的话,会重复触发该对应事件。keyup和keydown事件不区分字母大小写
,而keypress区分字母大小写。
键盘事件对象KeyBoardEvent
,是跟键盘事件相关的一系列信息的集合,根据键盘事件对象中的keyCode属性
可以得到相应的ASCII码值
,进而可以判断用户按下了哪个键。
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.addEventListener('keypress',function(e){
console.log('keypress');
console.log(e.keyCode);
console.log(e);
})
document.addEventListener('keydown',function(e){
console.log('keydown');
console.log(e.keyCode);
console.log(e);
})
document.addEventListener('keyup',function(e){
console.log('keyup');
console.log(e.keyCode);
console.log(e);
})
</script>
</body>
</html>
文本框提示信息 案例需求
:在现实生活中,我们经常会使用快递单号查询功能,查看商品的物流信息状态。有时在用户输入单号时,网站为了让用户看清楚输入的内容,会在文本框上方显示一个提示栏,将用户输入的数字放大。
案例分析
:当用户在文本框中输入内容时,文本框上面自动显示大号字的内容。如果用户输入为空,需要隐藏大号字内容。
成果展示
代码实现<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.search{
position: relative;
width: 300px;
margin: 100px auto;
}
.con{
display: none;
position: absolute;
top: -40px;
left: 80px;
width: 171px;
border: solid 1px rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
padding: 5px 0;
font-size: 18px;;
line-height: 20px;
color: #333;
}
.con::before{
content:'';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-color: #fff transparent transparent;
border-style: solid dashed dashed;
}
</style>
<body>
<div class="search">
<div class="con"></div>
<label for="">
快递单号:
<input type="text" placeholder="请输入快递单号" class="num">
</label>
</div>
<script>
var con = document.querySelector('.con');
var num = document.querySelector('.num');
num.addEventListener('keyup',function(){
if(this.value==''){
con.style.display = 'none';
}else{
con.style.display = 'block';
con.innerText = this.value;
}
})
//给input注册焦点事件
num.addEventListener('blur',function(){
con.style.display = 'none';
})
num.addEventListener('focus',function(){
if(this.value!==''){
con.style.display = 'block';
}
})
</script>
</body>
</html>
以上是脚本宝典为你收集整理的JavaScript事件全部内容,希望文章能够帮你解决JavaScript事件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。