javaScript事件学习小结(四)event的公共成员(属性和方法)


Posted in Javascript onJune 09, 2016

相关阅读:

JavaScript事件学习小结(五)js中事件类型之鼠标事件

b、通过type属性,可以在一个函数中处理多个事件。

原理:通过检测event.type属性,对不同事件进行不同处理。

举例:定义一个handler函数用来处理3种事件:click,mouseover,mouseout。

<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
 switch (event.type){
 case "click":
 alert("clicked");
 break;
 case "mouseover":
 event.target.style.backgroundColor="pink";
 break;
 case "mouseout":
 event.target.style.backgroundColor="";
 }
};
 var btn=document.getElementById("btn");
 btn.onclick=handler;
 btn.onmouseover=handler;
 btn.onmouseout=handler;
</script>
</body>

运行效果:点击按钮,弹出框。鼠标经过按钮,按钮背景色变为粉色;鼠标离开按钮,背景色恢复默认。

c、stopPropagation()和stopImmediatePropagation()对比

同:stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。

异:二者的区别在于当一个事件有多个事件处理程序时,stopImmediatePropagation()可以阻止之后事件处理程序被调用。

举例:

<body>
<input id="btn" type="button" value="click"/>
<script>
 var btn=document.getElementById("btn");
 btn.addEventListener("click",function(event){
 console.log("buttn click listened once");
// event.stopPropagation();//取消注释查看效果
// event.stopImmediatePropagation();//取消注释查看效果
 },false);
 btn.addEventListener("click",function(){
 console.log("button click listened twice");
 },false);
 document.body.onclick= function (event) {
 console.log("body clicked");
 }
</script>
</body>

运行效果:

javaScript事件学习小结(四)event的公共成员(属性和方法)

d、eventPhase

eventPhase值在捕获阶段为1,处于目标阶段为2,冒泡阶段为3。

例子:

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function (event) {
 console.log("按钮DOM0级方法添加事件处理程序eventPhase值为?"+event.eventPhase);
}
btn.addEventListener("click",function(event){
 console.log("按钮DOM2级方法添加事件处理程序,且addEventListener第三个参数为true时eventPhase值为?"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
 console.log("按钮DOM2级方法添加事件处理程序,且addEventListener第三个参数为false时eventPhase值为?"+event.eventPhase);
},false);
 document.body.addEventListener("click", function (event) {
 console.log("body上添加事件处理程序,且在捕获阶段eventPhase值为?"+event.eventPhase);
 },true);
document.body.addEventListener("click", function (event) {
 console.log("body上添加事件处理程序,且在冒泡阶段eventPhase值为?"+event.eventPhase);
},false);
</script>

运行效果:

javaScript事件学习小结(四)event的公共成员(属性和方法)

2、IE中event的公共成员

IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同,但是也有一些是所有对象都有的公共成员,且这些成员大部分有对应的DOM属性或方法。

javaScript事件学习小结(四)event的公共成员(属性和方法)

以上所述是小编给大家介绍的javaScript事件学习小结(四)event的公共成员(属性和方法)的相关知识,希望对大家有所帮助,如果大家有疑问欢迎给我留言!

Javascript 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
javascript折半查找详解
Jan 26 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 #Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 #Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 #Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 #Javascript
Node.js中npm常用命令大全
Jun 09 #Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 #Javascript
Active控件问题小结(附解决办法)
Jun 09 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
Python从MP3文件获取id3的方法
2015/06/15 Python
Python实现的Excel文件读写类
2015/07/30 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python numpy 常用函数总结
2017/12/07 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python 实现线程之间的通信示例
2020/02/14 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
值传递还是引用传递
2015/02/08 面试题
初中班主任寄语
2014/04/04 职场文书
高中教师评语大全
2014/04/25 职场文书
推荐信格式范文
2014/05/09 职场文书
物业消防安全责任书
2014/07/23 职场文书
好人好事新闻稿
2015/07/17 职场文书
禁毒主题班会教案
2015/08/14 职场文书
环保建议书作文300字
2015/09/14 职场文书
JavaScript函数柯里化
2021/11/07 Javascript