DOM之事件(一)
DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件。它是用户和页面交互的核心。当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实现的功能。
总结一下,事件有三个要素:事件源(是谁发生了事情),事件类型(发生了什么事),事件处理程序(怎么应对)。
为了方便理解下面即将要讲解的内容,在正式开始之前,让我们先来了解一个最常用的事件:click,点击事件:当我们用鼠标点击页面时,如果我们为页面绑定了事件处理程序(一般是一个函数),那么这时该程序将被执行。
这里先放一段HTML代码片段供讲解使用:
<head>
<style>
.wrapper{width:400px;height:400px;background-color:red}
.main{width:300px;height:300px;background-color:yellow}
.content{width:200px;height:200px;background-color:green}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="content"></div>
</div>
</div>
</body>
一 事件处理程序的绑定和解除
1, 句柄
绑定:element.on+事件类型(type) = function (e){};
同一事件类型只能绑定一个事件处理程序,无兼容性问题。
var wrap = document.getElementsByClassName("wrapper")[0];
wrap.onclick = function (){
alert("wrapper");
};//现在点击红色块将会弹出提示框
解除:element.on+type = false/null/’’;
wrap.onclick = null;
//现在再点击红色块将不会再弹出提示框了
2, 监听
绑定:element.addEventListener(事件类型,fn,boolean)
W3C标准方法,同一事件类型可以绑定一个或多个事件处理程序,IE老版本不兼容
wrap.addEventListener("click",test,false);
function test() {
alert("wrapper");
}
//也可以在第二个参数的位置直接使用匿名函数
解除:element.removeEventListener(事件类型,fn,false)
wrap.removeEventListener("click",test,false);
//现在点击将不会再弹出提示框了
另外:IE有个独有的方法,obj.attchEvent(‘on’+type,fn),功能和监听方式一样。解除方式是:element.detachEvent(‘on’+type,fn)
注意,如果绑定的是匿名函数,则无法解除。
二 事件处理模型
1,事件捕获和冒泡
事件的触发其实分为两个阶段,捕获阶段和冒泡阶段。我们既可以把事件处理函数绑定在事件捕获阶段,也可以绑定在冒泡阶段。当某一事件被触发时,先执行捕获再执行冒泡。
事件捕获:当父元素的某类型事件被触发时,所有后代元素上绑定的同类型事件均会被层层触发。
事件冒泡:当子元素的某类型事件被触发时,所有父元素上绑定的同类型事件均会被层层触发。
句柄方式绑定的事件都是在冒泡阶段,监听方式根据提供的第三个参数设置事件捕获或冒泡:true则在捕获阶段,false则在冒泡阶段。
var main = document.getElementsByClassName("main")[0];
main.addEventListener("click",function(){
alert("main");
},false);
/*现在点击绿色区域会先弹出main,点击确认后再弹出wrapper。如果wrap和main绑定程序的第三个参数都是true,则会先弹出wrapper,后弹出main。
6 如果同一个元素在两个阶段都绑定了同一类型事件,则按照绑定的先后顺序执行*/
2,事件对象
每当有事件被触发,浏览器都会记录当前事件触发的详细信息,并把它们封装成一个对象,可以传递给事件处理函数。IE浏览器有一点不同,它是把该对象存储在window.event里面,而不是直接传递给事件处理函数。
main.onclick = function(e){
ev = e || window.event;
};
事件对象有许多属性和方法,比如点击事件有反映鼠标坐标的 screenX/screenY、clientX/clientY,键盘事件有检测 Alt、Ctrl 键的 altKey 和 ctrlKey等。 更多属性和方法请在控制台打印查看。
3,阻止事件冒泡
有时候我们并不想让绑定的事件层层向上传递,只想被点击的那个元素执行相关任务,那么我们就需要通过事件对象阻止事件冒泡:
main.addEventListener("click",function(e){
alert("main");
e.stopPropagation();
//e.cancelBubble = true;IE的方法
},false);
4,阻止事件默认行为
诸如点击submit类型的按钮,页面会提交表单、鼠标右键页面会出现右键菜单、点击a标签会跳转页面等等都是事件的默认行为,是浏览器预定义的处理程序,我们可以通过以下几种方式阻止它们。
return false;句柄方式绑定的事件处理程序才能实现。
e.preventDefault();W3C标准方式。
e.returnValue = false;兼容低版本IE浏览器。
document.oncontextmenu = function (e){
e.preventDefault();
alert("现在右键点击不会出现菜单栏了");
};
5,事件委托
事件对象有两个属性:target或srcElement(IE),它存储的是事件源对象,即实际触发该事件的对象。不是捕获的,也不是冒泡的。通过事件源对象,可以轻松实现事件委托功能。
事件委托的功能是:当子元素个数很多或不确定,且每个子元素都需要绑定执行类似功能的事件处理函数时,通过在父元素上绑定该事件处理函数,在函数内部获取事件源对象(某子元素),通过事件冒泡机制,确保能让每个子元素在被触发相应事件时,事件处理函数都能被正确执行。
/*
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
。。。
</ul>
假如现在有这样一个列表,数目很多,而且还会动态更新,我们要实现的功能是点击每个li都弹出它自己的内容
*/
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e){
var ev = e || window.event;
target = ev.target || ev.srcElement;
alert(target.innerText);
};
//这样就可以很简单的实现这个功能了,即使后面假如了新的li,点击新的li依然可是弹出正确的内容
三 鼠标事件
1, click:点击事件
等同于mousedown+mouseup,不管这两个事件间隔多久,都会触发一次click事件。
2, mousedown:鼠标按下事件
3, mouseup:鼠标弹起事件
4, mouseover/mouseenter:鼠标移入事件
5, mouseout/mouseleave:鼠标移出事件
注意:ES5添加的mouseenter和mouseleave阻止了事件冒泡。
6, mousemove:鼠标移动事件
7, contextmenu:右键出现菜单事件
8, selectstart:选中文字事件
小技巧:通过事件对象的button属性可以判断鼠标左右键,0:左键;1滚轮;2,:右键。另外,click事件只能由左键触发,只有mousedown和mouseup可以触发右键点击事件。
四 键盘事件
1,keydown:按键按下事件
可以检测所有按键,但不会返回字符编码。
2,keypress:按键按下事件
只能响应字符类按键,可以返回字符的编码,charCode属性。
3,keyup:按键弹起事件
五 输入框事件
1, input
每输入一次就会触发一次,即只要输入框的内容有变化都会触发该事件。
2, change
聚焦和失去焦点两个时刻内容不同才触发。
3, focus,获取焦点
当输入框获取焦点时触发
4, blur,失去焦点
当输入框失去焦点时触发
DOM之事件(一)的更多相关文章
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- javascript 原生方法监听DOM结构改变事件
js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...
- 5事件DOM零级事件跟DOM二级事件
事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- AngularJS中的DOM与事件
前 言 AngularJS中的DOM与事件 AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled="true/false" ...
- 节点操作,节点属性的操作及DOM event事件
##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.ins ...
- jacascript DOM变动事件
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非 ...
- 10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...
随机推荐
- sql server 怎么查看blocked的线程
select spid ,blocked from master..sysprocesses
- FIS 插件机制
FIS 插件机制 author: @TiffanysBear 当我们使用 FIS 插件的时候,有没有想过自己也开发一个基于 FIS 的插件,参与 FIS 打包编译的整个流程:那么问题就来了: FIS ...
- Linux应用开发自学之路
前言 在 「关于我 」那篇博文里,朋友们应该知道了我不是科班出身,是由机械强行转行到Linux应用开发方向.下面我就详细向大家介绍自己这一路上的转行历程,希望对大家有所启发. 我是学机械专业的,对于机 ...
- Linux浏览创建文件
pwd:打印当前工作目录(Print Working Directory) ls:列出文件和目录(List) - Ubuntu的清单默认有颜色区分:蓝色(目录).浅蓝色(链接文件).绿色(可执行文件) ...
- ZooKeeper异步调用命令
在ZooKeeper中,所有的同步调用命令,都会有一个相应的异步调用方法.异步调用能在一个单独线程中同时提交更多的命令,也能在一定程度上简化代码实现. 1 异步create方法 如创建zNode的命令 ...
- MSIL实用指南-给字段、属性、方法、类、程序集加Attribute
C#编程中可以给字段.方法.类以及程序集加特性即继承于Attribute的类.这里讲解怎么在IL中给它们加上特性. 生成字段的对应的类是FieldBuilder,生成属性的对应的类是PropertyB ...
- gin-jwt对API进行权限控制
前言 之前文章简单介绍了如何运行gin+vue的前后端分离开源项目,该项目是学习了Gin实践教程后结合vue-element-admin写的,该教程讲得很详细,适合入门Gin.本篇文章将介绍gin+v ...
- iframe中使用模态框提交表单后,iframe加载父页面的解决方法
在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...
- ScrollView中页面显示自动滑到最后问题的解决
转载:https://blog.csdn.net/a644904088/article/details/80241176 原因:ScrollView中包含其余控件,但控件显示不全,此时会存在焦点问题, ...
- map()函数映射
map()函数(映射) pattern = "abba" str = "dog cat cat dog" res=str.split() print(list( ...