本文介绍了JavaScript事件的概念，包括事件流的冒泡和捕获，通过实例展示了如何阻止冒泡。详细讲解了event事件，如实现提交留言功能和获取鼠标坐标。探讨了鼠标、键盘及表单事件，并提供了各种触发事件的练习。此外，还分享了JavaScript动态效果的实现，如周期性弹框、div的动态移动以及鼠标移入移出时div的宽度变化效果。
目录
事件
事件概念
JavaScript可以创建动态页面，网页中的每个元素都可以出发一些JavaScript函数。事件就是可以被JavaScript侦测到的一种行为
事件流
分为冒泡事件和捕获事件
冒泡事件：ie、火狐、Chrome 捕获事件：
列：阻止冒泡实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById('box');
var btn=document.getElementById('btn');
btn.onclick=function(ev){
alert('btn');
ev.stopPropagation(); //阻止冒泡
}
box.onclick=function(ev){
alert('box');
ev.stopPropagation();
}
document.body.onclick=function(ev){
alert('body');
ev.stopPropagation();
}
}
</script>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="点我吧!" />
</div>
</body>
</html>
结果：
事件常用属性
event事件
列：实现提交留言
<script type="text/javascript">
window.onload = function() {
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
txt1.onkeydown = function(ev) {
//keyCode 属性返回onkeypress事件触发的键的值的字符代码
//当按下ctrl与entry时传输信息
if (ev.keyCode = 13 && ev.ctrlKey) {
txt2.value += txt1.value + "\n";
txt1.value = '';
}
}
}
</script>
</head>
<body>
<input type="text" id="txt1" /><br />
<textarea id="txt2" rows="10" cols="50"></textarea>
</body>结果：
当同时按下ctrl与entry时，发送消息
最低0.47元/天 解锁文章
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
