目录
1.获取触发事件的元素，阻止事件冒泡和默认行为的实现。
（1）获取触发事件的元素
（2）阻止事件冒泡
（3）阻止事件默认行为
2.缓动的小球，实现的原理是通过定时器连续地修改当前DOM元素的某个样式值，达到一个动态的特效。
3.图片放大特效
4.按Enter键切换
1.获取触发事件的元素，阻止事件冒泡和默认行为的实现。
事件对象属性和方法
（1）获取触发事件的元素
<button id="btn" class="btnClass">获取event对象</button><script>var btn = document.getElementById('btn');btn.onclick = function(e) {var obj = event.target || window.event.srcElement; // 处理兼容问题：触发此事件的元素对象console.log(obj.nodeName);// 获取元素节点名，如：BUTTONconsole.log(obj.id); // 获取元素的id值，如：btnconsole.log(obj.className);// 获取元素的class名，如：btnClassconsole.log(obj.innerText);// 获取元素的文本值，如：获取event对象};</script>
<style>#red{background:red;width:120px;height:120px;}#green{background:green;width:80px;height:80px;}#yellow{background:yellow;width:40px;height:40px;}</style>
（2）阻止事件冒泡
<div id="red"><div id="green"><div id="yellow"></div></div></div>
<script>// 分别获取互相嵌套的div元素var red = document.getElementById('red');var green = document.getElementById('green');var yellow = document.getElementById('yellow');// 分别为互相嵌套的div元素添加单击事件red.onclick = function() {console.log('red');};green.onclick = function() {console.log('green');};yellow.onclick = function() {console.log('yellow');};</script>
<script>red.onclick = function(e) {// func(e);console.log('red');};green.onclick = function(e) {// func(e);console.log('green');};yellow.onclick = function(e) {// func(e);console.log('yellow');};function func(e) {if (window.event) { // 早期版本的的浏览器window.event.cancelBubble = true;} else {//标准浏览器e.stopPropagation();}}</script>
（3）阻止事件默认行为
<a id="test" href="">默认链接</a><script>document.getElementById('test').onclick = function(e) {if (window.event) { // 早期版本IE浏览器window.event.returnValue = false;} else {//标准浏览器e.preventDefault();}};</script>
运行效果：
2.缓动的小球，实现的原理是通过定时器连续地修改当前DOM元素的某个样式值，达到一个动态的特效。
<style>#box{position:absolute;width:120px;height:120px;line-height:120px;text-align:center;background:red;color:#fff;border-radius:60px;}</style>
<body><div id="box">点我啊，跑！</div><script>function animate(obj, option) {clearInterval(obj.timer); // 防止多次触发事件，重复开启定时器obj.timer = setInterval(function() {var flag = true; // 元素对象移动的标志，true表示已完成for (var k in option) {var leader = parseInt(getStyle(obj, k)) || 0; // 获取指定元素当前属性值var target = option[k];// 获取指定元素目标属性值var step = (target - leader) / 10; // 计算每次移动的步长step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step; // 计算属性值obj.style[k] = leader + 'px';// 设置属性值if (leader != target) { // 判断是否完成移动flag = false;}}if (flag) {// 移动完成后清除定时器clearInterval(obj.timer);}}, 15);}function getStyle(obj, attr) {if (window.getComputedStyle) { // 标准浏览器return window.getComputedStyle(obj, null)[attr];} else {// 早期版本IE的浏览器，IE6~8return obj.currentStyle[attr];}}var obj = document.getElementById('box');obj.onclick = function() {animate(obj, {'left': 200, 'top': 50});};</script></body>
运行效果：
3.图片放大特效
<style>.box{width:350px;height:350px;border:1px solid #ccc;position:relative}.big{width:400px;height:400px;position:absolute;top:0;left:360px;border:1px solid #ccc;overflow:hidden;display:none}.mask{width:175px;height:175px;background:rgba(255,255,0,.4);position:absolute;top:0;left:0;cursor:move;display:none}.small{position:relative}.box img{vertical-align:top}#bigBox img{position:absolute}</style>
<body><div class="box" id="box"><div id="smallBox" class="small"><img src="images/small.jpg"><div id="mask" class="mask"></div></div><div id="bigBox" class="big"><img id="bigImg" src="images/big.jpg"></div></div><script>// 需求：鼠标经过盒子 显示遮罩和大图 鼠标移动的时候 让遮罩跟着移动让大图按照比例移动function $(id) { // 根据id值获取元素对象return document.getElementById(id);}// 鼠标经过盒子 显示遮罩和大图 $('smallBox').onmouseover = function() {$('mask').style.display = 'block';$('bigBox').style.display = 'block';};// 鼠标离开盒子 隐藏遮罩和大图$('smallBox').onmouseout = function() {//隐藏遮罩和大图$('mask').style.display = 'none';$('bigBox').style.display = 'none';};// 鼠标在盒子上移动的时候// 让遮罩跟着鼠标移动$('smallBox').onmousemove = function(event) {var event = event || window.event;//鼠标在页面中的坐标var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;// 计算鼠标的位置 距 盒子 的距离var boxX = pageX - $('box').offsetLeft;var boxY = pageY - $('box').offsetTop;// 计算遮罩的位置var maskX = boxX - $('mask').offsetWidth / 2;var maskY = boxY - $('mask').offsetHeight / 2;// 限定遮罩可移动范围if (maskX < 0) {maskX = 0;}if (maskX > $('smallBox').offsetWidth - $('mask').offsetWidth) {maskX = $('smallBox').offsetWidth - $('mask').offsetWidth;}if (maskY < 0) {maskY = 0;}if (maskY > $('smallBox').offsetHeight - $('mask').offsetHeight) {maskY = $('smallBox').offsetHeight - $('mask').offsetHeight;}// 修改遮罩的显示位置$('mask').style.left = maskX + 'px';$('mask').style.top = maskY + 'px';// 按照比例移动大图 大图片能够移动的总距离 = 大图的宽度 - 大盒子的宽度var bigImgToMove = $('bigImg').offsetWidth - $('bigBox').offsetWidth;// 遮罩能够移动的总距离 = 小盒子的宽度 - 遮罩的宽度var maskToMove = $('smallBox').offsetWidth - $('mask').offsetWidth;// 计算移动比例rate = 大图片能够移动的总距离/遮罩能够移动的总距离var rate = bigImgToMove / maskToMove;// 设置大图片当前的位置 = rate * 遮罩当前的位置$('bigImg').style.left = - rate * maskX + 'px';$('bigImg').style.top = - rate * maskY + 'px';};</script></body>
运行效果：
4.按Enter键切换
键盘事件
<body><p>用户姓名：<input type="text"></p><p>电子邮箱：<input type="text"></p><p>手机号码：<input type="text"></p><p>个人描述：<input type="text"></p><script>var inputs = document.getElementsByTagName('input');for (var i = 0; i < inputs.length; ++i) {inputs[i].onkeydown = function(e) {// 获取事件对象的兼容处理var e = event || window.event;// 判断按下的是不是回车，如果是，让下一个input获取焦点if (e.keyCode === 13) {// 遍历所有input框，找到当前input的下标for (var i = 0; i < inputs.length; ++i) {if (inputs[i] === this) {// 计算下一个input元素的下标var index = i + 1 >= inputs.length ? 0 : i + 1;break;}}// 如果下一个input还是文本框，则获取键盘焦点if (inputs[index].type === 'text') {inputs[index].focus(); // 触发focus事件}}};}</script></body>
运行效果：
js第8章事件案例：获取触发事件的元素 阻止事件冒泡和默认行为的实现 缓动的小球 图片放大特效 按Enter键切换
