JavaScript事件详细讲解
更新时间:2016年7月1日 10:00 点击:1861
事件的概念
事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。
一、事件流
1.事件流:描述的是在页面中接受事件的顺序
2.事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)
3.事件捕获:最不具体的节点先接收事件,而最具体的节点应该最后接收事件
二、事件处理
1.HTML事件处理:直接添加到HTML结构中
2.DOM0级事件处理:把一个函数赋值给一个事件处理程序属性
3.DOM2级事件处理:
addEventListener("事件名","事件处理函数",布尔值)
true:事件捕获
false:事件冒泡
removeEventListener();
4.IE事件处理程序
attachEvent
detachEvent
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div"> <button id="btn1">按钮</button> </div> <!--<script> function demo(){ alert("Hello HTML事件处理"); } </script>--> <!--<script> var btn1 = document.getElementById("btn1"); btn1.onclick = function(){alert("Hello DOM0级事件处理程序")};//被覆盖掉 btn1.onclick = function(){alert("Hello DOM0级事件处理程序2")}; btn1.onclick = function(){alert("Hello DOM0级事件处理程序3")}; </script>--> <!--<script> var btn1 = document.getElementById("btn1"); btn1.addEventListener("click",demo1); btn1.addEventListener("click",demo2); btn1.addEventListener("click",demo3); function demo1(){ alert("DOM2级事件处理程序1"); } function demo2(){ alert("DOM2级事件处理程序2"); } function demo3(){ alert("DOM2级事件处理程序3"); } btn1.removeEventListener("click",demo2) </script>--> <script> var btn1 = document.getElementById("btn1"); if(btn1.addEventListener){ btn1.addEventListener("click",demo); }else if(btn1.attachEvent){ btn1.attachEvent("onclick",demo) }else{ btn1.onclick = demo(); } function demo(){ alert("Hello"); } </script> </body> </html>
三、事件对象
1、事件对象:在触发DOM事件的时候都会产生一个对象
2、事件对象event:
type:获取事件类型
target:获取事件目标
stopPropagation():阻止事件冒泡
preventDefault():阻止事件默认行为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div"> <button id="btn1">按钮</button> <a href="http://www.baidu.com" id="aid">百度</a> </div> <script> document.getElementById("btn1").addEventListener("click",showType); document.getElementById("div").addEventListener("click",showDiv); document.getElementById("aid").addEventListener("click",showA); function showType(event){ // alert(event.type); alert(event.target); event.stopPropagation();//阻止事件冒泡 } function showDiv(){ alert("div") } function showA(event){ // event.stopPropagation(); // event.preventDefault(); } </script> </body> </html>
上一篇: NodeJs——入门必看攻略
下一篇: JQuery控制图片由中心点逐渐放大效果
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06