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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
浅谈JavaScript面向对象--继承
Mar 20 Javascript
react中Suspense的使用详解
Sep 01 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
JavaScript如何操作css
Oct 24 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
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python读写json文件的简单实现
2017/04/11 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
写给保洁员表扬信
2014/01/08 职场文书
区三好学生主要事迹
2014/01/30 职场文书
迎八一活动主题
2014/01/31 职场文书
书法比赛获奖感言
2014/02/10 职场文书
毕业生自荐信格式
2014/03/07 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
企业党员一句话承诺
2014/05/30 职场文书
大学生毕业评语
2014/12/31 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle