蓝鸥原生JS：事件对象及事件类型效果演示

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_33878457

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/11824614/1854797

版权

蓝鸥原生JS：事件对象及事件类型效果演示

事件对象

鼠标事件

event.clientX在可视区中，鼠标点击的x坐标

event.clientY在可视区中，鼠标点击的y坐标

　　示例：

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript">

document.onclick = function () {

alert(event.clientX + ',' + event.clientY);

}

</script></head><body>

</body></html>

　　示例：一个跟随鼠标指针移动的红色块

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#div {

width: 100px;

height: 100px;

background-color :red;

position: absolute;

}

</style>

<script type="text/javascript">

// 鼠标移动时触发改事件

document. = function (ev) {

// 获取距离文档顶部的高度

var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// 获取距离文档左边的的宽度

var oScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

// 获取鼠标事件

var oEvent = event || ev;

// 获取到div

var oDiv = document.getElementById('div');

// 设置div的位置

oDiv.style.left = oEvent.clientX + oScrollLeft + 'px';

oDiv.style.top = oEvent.clientY + oScrollTop + 'px';

}

</script></head><body>

<div id = "div"></div>

</body></html>

　　示例：一串跟着鼠标走的div

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#div {

width: 10px;

height: 10px;

background-color :red;

position: absolute;

}

</style>

<script type="text/javascript">

// 鼠标移动时触发改事件

window.onload = function () {

var oDivs = document.getElementsByTagName('div');

document. = function (ev) {

var oEvent = ev || event;

oDivs[0].style.left = oEvent.clientX+'px';

oDivs[0].style.top = oEvent.clientY+'px';

for (var i = oDivs.length-1; i > 0; i--) {

oDivs[i].style.left = oDivs[i-1].style.left;

oDivs[i].style.top = oDivs[i-1].style.top;

};

}

</script></head><body>

<div id = "div"></div>

</body></html>

键盘事件

keyCode获取用户按下键盘的哪个按键

　　如：键盘控制DIV移动

ctrlKey 返回boolean值，按下时为true

shiftKey 返回boolean值，按下时为true

altKey 返回boolean值，按下时为true

　　示例：用提示框将用户按的按键提示出来：

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript">

// 按动键盘时触发事件

document.onkeydown = function (ev) {

var oEvent = ev || event;

// 获取到按动的是哪个按键

alert(oEvent.keyCode);

}

</script></head><body>

</body></html>

　　示例：通过上下左右按键控制DIV的移动

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

#div1 {

width: 100px;

height: 100px;

left:10px;

top:10px;

background-color: gray;

position: absolute;

}

</style>

<script type="text/javascript">

document.onkeydown = function (ev) {

var oEvent = ev || event;

var oDiv = document.getElementById('div1');

if (oEvent.keyCode == 37) {

oDiv.style.left = oDiv.offsetLeft - 10 +'px';

} else if (oEvent.keyCode==38) {

oDiv.style.top = oDiv.offsetTop - 10 +'px';

} else if (oEvent.keyCode == 39) {

oDiv.style.left = oDiv.offsetLeft + 10 +'px';

} else if (oEvent.keyCode == 40) {

oDiv.style.top = oDiv.offsetTop + 10 +'px';

};

}

</script></head><body>

<div id = "div1"> </div></body></html>

　　示例：按住control+enter键，提交留言框中的文字到留言板中

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript">

window.onload = function () {

var oText1 = document.getElementById('text1');

var oText2 = document.getElementById('text2');

var oBtn = document.getElementById('btn');

// 鼠标点击提交按钮。进行留言

oBtn.onclick = function () {

//点击提交按钮后，把留言框中的文字提交在留言区

oText1.value += oText2.value + '\n';

// 清空留言框

oText2.value = '';

};

// 按下control+enter按钮，进行留言,因为当前焦点在留言框中，所以事件要加载留言框中

oText2.onkeydown = function (ev) {

var oEvent = ev || event;

// 按下回车键和control键

if (oEvent.keyCode == 13 && oEvent.ctrlKey) {

//点击提交按钮后，把留言框中的文字提交在留言区

oText1.value += oText2.value + '\n';

// 清空留言框

oText2.value = '';

};

}

</script></head><body>

<textarea id = 'text1' roes = '10' cols = '40'></textarea>

<br />

<input type = "text" id = 'text2'/>

<input type="button" value = '提交' id = 'btn'/>

</body></html>

事件冒泡

　　子标签发生事件后，向父级发送该事件，一直追溯到document。如：点击一个嵌套在body中的button，则该button的onclick事件也会传递给body、document中，触发他们的onclick里触发的函数.

　　示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div {

width: 100px;

height: 100px;

background-color: red;

display: none;

}

</style>

<script type="text/javascript">

window.onload = function () {

var oBtn = document.getElementById('button');

var oDiv = document.getElementById('div');

// 点击buton后，button的事件会被触发

oBtn.onclick = function() {

oDiv.style.display = 'block';

alert("button被点击了");

}

// 由于事件冒泡，作为父级的document的onclick事件也会被触发

document.onclick = function() {

oDiv.style.display = 'none';

alert("document被点击了")

}

</script>

</head>

<body>

<input type = "button" value = "显示" id = "button">

<div id = "div"></div>

</body>

</html>

取消冒泡

　　由于事件冒泡会触发父级的相关方法，所以我们经常会“取消事件冒泡”。

　　取消事件冒泡的方法:event.cancelBubble=true

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div {

width: 100px;

height: 100px;

background-color: red;

display: none;

}

</style>

<script type="text/javascript">

window.onload = function () {

var oBtn = document.getElementById('button');

var oDiv = document.getElementById('div');

// 点击buton后，button的事件会被触发

oBtn.onclick = function(ev) {

oDiv.style.display = 'block';

alert("button被点击了");

// 在这里取消事件冒泡，防止事件向父级传递

// 兼容性考虑，有的浏览器的事件并不是'event'，所以把点击事件作为参数传递过来

var oEvent = ev || event;

oEvent.cancelBubble=true;

}

// 由于事件冒泡，作为父级的document的onclick事件也会被触发

document.onclick = function() {

oDiv.style.display = 'none';

alert("document被点击了")

}

</script>

</head>

<body>

<input type = "button" value = "显示" id = "button">

<div id = "div"></div>

</body>

</html>

零基础学习HTML5—HTML+CSS基础视频教程

http://edu.51cto.com/course/course_id-6452.html

转载于:https://blog.51cto.com/11824614/1854797

weixin_33878457

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蓝鸥原生JS：事件对象及事件类型效果演示

蓝鸥原生JS：事件对象及事件类型效果演示事件对象鼠标事件event.clientX在可视区中，鼠标点击的x坐标event.clientY在可视区中，鼠标点击的y坐标　　示例：<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title&g...
复制链接

扫一扫