JavaScript事件详细讲解


Posted in Javascript onJune 27, 2016

事件的概念

事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。

一、事件流

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>
Javascript 相关文章推荐
用jquery实现点击栏目背景色改变
Dec 10 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
深入理解angular2启动项目步骤
Jul 15 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
JS中常用的消息框总结
Feb 24 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
JS原型链怎么理解
Jun 27 #Javascript
js选择器全面解析
Jun 27 #Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 #Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 #Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 #Javascript
全面了解javascript三元运算符
Jun 27 #Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 #Javascript
You might like
世界第一个无线广播电台 KDKA
2021/03/01 无线电
php Memcache 中实现消息队列
2009/11/24 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
详解如何较好的使用js
2016/12/16 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
python实现决策树
2017/12/21 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
详解Python的三种可变参数
2019/05/08 Python
python爬虫 正则表达式解析
2019/09/28 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
集体婚礼策划方案
2014/02/22 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
装修协议书范本
2014/04/21 职场文书
促销活动总结
2014/04/28 职场文书
安全生产宣传标语
2014/06/06 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
致接力运动员加油稿
2015/07/21 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
python全面解析接口返回数据
2022/02/12 Python