1.获取触发事件的元素，阻止事件冒泡和默认行为的实现。

事件对象属性和方法

分类	属性/方法	描述
公有的	type	返回当前事件的类型，如click
标准浏览器事件对象	target	返回触发此事件的元素（事件的目标节点）
	currentTarget	返回其事件监听器触发该事件的元素
	bubbles	表示事件是否是冒泡事件类型
	cancelable	表示事件是否取消默认动作
	eventPhase	返回事件传播的当前阶段。1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段
	stopPropagation()	阻止事件冒泡
	preventDefault()	阻止默认行为
早期版本IE浏览器事件对象	srcElement	返回触发此事件的元素（事件的目标节点）
	cancelBubble	阻止事件冒泡，默认为false表示允许，设置true表示阻止
	returnValue	阻止默认行为，默认为true表示允许，设置false表示阻止

（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="http://www.example.com">默认链接</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="data:images/small.jpg"><div id="mask" class="mask"></div></div><div id="bigBox" class="big"><img id="bigImg" src="data: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键切换

键盘事件

事件名称	事件触发时机
keypress	键盘按键（Shift、Fn、CapsLock等非字符键除外）按下时触发
keydown	键盘按键按下时触发
keyup	键盘按键弹起时触发

 <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键切换相关推荐

用JS写出JS事件中京东图片放大特效
图片放大特效准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...
js手动触发页面元素点击事件，程序触发，自定义点击事件模拟点击
页面有时候的使用场景需要手动控制某个元素响应点击事件,可以达到不直接点击元素来响应事件,这里可以使用element.dispatchEvent(),在使用element.dispatchEvent() ...
html 未来元素绑定事件,jquery on如何给未来元素绑定事件？
我们要想在一个元素上绑定一个事件,那么这个元素必须先存在,也就是绑定事件动作前就已有这个元素. 这是一个给元素绑定任何事件的前提. 如果按照这种思路走,那么"给未来元素绑定事件"将 ...
js第7章DOM案例：获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
目录 1.获取操作的元素 document对象的方法 document对象的属性 Element对象的方法和属性 2. 元素内容操作 3.元素属性操作 4.classList的使用 5. 获取节点 6 ...
如何获得onblur中的值,从onBlur事件中获取新聚焦的元素（如果有）。
I need to get the newly focussed element (if any) while executing an onBlur handler. How can I do th ...
js实现图片放大特效
HTML代码如下: <div class="box"><div class="pic1"> < ...
91 案例——图片放大特效
文章目录 1.HTML页面 2.显示与隐藏"遮罩"和"局部放大图" 3.遮罩的移动 4.限定遮罩的移动范围 5.按照比例移动大图在网站中,经常可以看到商品详情 ...
事件冒泡及阻止事件冒泡事件的触发事件参数对象获取用户按下键盘的键
事件冒泡及阻止事件冒泡 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...

js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换

1.获取触发事件的元素，阻止事件冒泡和默认行为的实现。

（1）获取触发事件的元素

（2）阻止事件冒泡

（3）阻止事件默认行为

2.缓动的小球，实现的原理是通过定时器连续地修改当前DOM元素的某个样式值，达到一个动态的特效。

3.图片放大特效

4.按Enter键切换

js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换相关推荐

最新文章

热门文章