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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
vue总线机制(bus)知识点详解
May 10 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
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
创意广告词
2014/03/17 职场文书
低碳生活倡议书
2014/04/14 职场文书
保护环境倡议书300字
2014/05/19 职场文书
机械专业求职信
2014/05/25 职场文书
教室布置标语
2014/06/26 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
委托书如何写
2014/08/30 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS