13.4事件类型

最新推荐文章于 2022-05-25 17:05:48 发布
最新推荐文章于 2022-05-25 17:05:48 发布
阅读量148 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taimaigai/article/details/78432022
版权

load事件,加载完成后再触发事件

EventUtil.addHandler(window,"load",function(event)

{alert("loaded");

})

<body οnlοad="alert('loaded')">

<img src="smile.gif"οnlοad="alert('image loaded')">


EventUtil.addHandler(window,"load",function(){

var image=document.createElement("img"):

EventUtil.addHandler(image,"load",function(event){

event=EventUtil.getEvent(event);

alert(EventUtil.getTarget(event).src);

});

document.body.appendChild(image);

image.src="snile.gif";

});

unload事件，这个事件是在文档被完全卸载后触发，，只要用户从一个页面切换到另一个页面就会发生unload事件，利用这个时间最多的情况是清除引用，以避免内存泄漏。

EventUtil.addHandler(window,"unload",function(event){

alert("unload");});

resize事件.不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行(变化1像素就会触发此事件)，从而导致浏览器反应明显变慢

EventUtil.addHandler(window,"resize",function(event){

alert("resized");

});


scroll事件scrollLeft 和scrollTop监控。在文档滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单。

< script >
EventUtil. addHandler( window, "scroll", function( event){
if( document. compatMode= "CSS1Compat"){
alert( document. documentElement. scrollTop);
} else{
alert( document. body. scrollTop);
}
});
</script>

焦点事件focus 和blur    检测浏览器是否支持

var isSupported= document. implementation. hasFeature( "FocusEvent", "3.0");

鼠标与滚轮事件

< script >
var isSupported= document. implementation. hasFeature( "MouseEvent", "3.0");

< / script >
< script >
var isSupported= document. implementation. hasFeature( "MouseEvent", "2.0");

< / script >

客户区鼠标坐标位置

< script >
var div= document. getElementById( "mydiv");
EventUtil. addHandler( div, "click", function( event){
event= EventUtil. getEvent( event);
alert( "client coordinates:"+ event. clientX+ ","+ event. clientY);

});
< / script >

页面鼠标坐标位置

< script >
var div= document. getElementById( "mydiv");
EventUtil. addHandler( div, "click", function( event){
event= EventUtil. getEvent( event);
alert( "client coordinates:"+ event. pageX+ ","+ event. pageY);

});
< / script >

跨浏览器IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区作弊哦啊和滚动信息可以计算出来，这时候需要用到document.body(混杂模式)和document.documentElement(标准模式)中的scrollLeft和scrollTop属性

< body >
< button id= "mybtn" >dd </ button >
</ body >
< script >
var div= document. getElementById( "mydiv");
EventUtil. addHandler( div, "click", function( event){
var pagex= event. pagex;
var pagey= event. pagey;
if( pagex= undefined){
pagex= event. clientX+( document. documentElement. scrollLeft|| document. body. scrollLeft);
}
if( pagey= undefined){
pagey= event. clientY+( document. documentElement. scrollLeft|| document. body. scrollLeft);
}
alert( "page coordinates:"+ pagex+ ","+ pagey);
});
< / script >


相对整个电脑屏幕坐标位置

< body >
< button id= "mybtn" >dd </ button >
</ body >
< script >
var div= document. getElementById( "mydiv");
EventUtil. addHandler( div, "click", function( event){
event= EventUtil. getEvent( event);
alert( "screen coordinates:"+ event. screenx+ ","+ event. screeny);
});
< / script >


修改键 shiftkey altkey ctrlkey metakey四个属性，包含的都是布尔值，如果相应的键被按下了，则值为true，否则值为false

< body >
< button id= "mybtn" >dd </ button >
</ body >
< script >
var div= document. getElementById( "mydiv");
EventUtil. addHandler( div, "click", function( event){
event= EventUtil. getEvent( event);
var keys= new array();
if( event. shiftkey){
keys. push( "shift");
}
if( event. altkey){
keys. push( "alt");
}
if( event. ctrlkey){
keys. push( "ctrl");
}
if( event. metatkey){
keys. push( "meta");
}
alert( "keys:"+ keys. join( ","));
});
< / script >

鼠标按钮跨浏览器

< script >
var EventUtil={
getButton: function( event){
if( document. implementation. hasFeature( "MouseEvent", "2.0")){
return event. button;

} else{
switch( event. button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
};

< / script >



< script >

var div= document. getElementById( "myDiv");
EventUtil. addHandler( div, "mousedown", function( event){
event= EventUtil. getEvent( event);
alert( EventUtil. getButton( event));


});

< / script >















taimaigai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
模六十计数器的项目文件
06-02
在电子工程和计算机科学领域，计数器是一种基本的数字电路，用于跟踪序列事件的数量。模六十计数器是一种特定类型的计数器，它的计数值在达到六十后会重置为零，类似于时钟中的分钟或秒指示。 模六十计数器通常采用...
如何做好应急响应工作？常见应急响应流程
HBohan的博客
01-11 5949
1.应急响应的最终目标是保护客户的核心资产，所有行为必须围绕：保护、避害、不损害来进行。 2.在现在愈加复杂的攻击下，上述的常见场景一般会出现复合情况，需要应急人员根据经验去进行。 3.应急人员应有自己的方法论，对不同攻击的威胁建模，拥有威胁情报分析能力，结合工具的辅助进行现场响应与远程支撑。 4.工具和排查点大同小异，提升方法在于应急人员的是否熟悉该种攻击，利用特征和行为去排查更节省时间。 5.红蓝同源，应急响应属于蓝队，但必须具备一定的渗透能力。
JavaScript---EVENT--事件类型-基本类型
xyue_的博客
05-25 406
一、UI事件(不一定与用户操作有关的事件) 1、load 当页面完全加载后在window上触发 图片也可以触发load事件 2、 resize 当窗口大小变化时在window上触发 除火狐外其他浏览器会在浏览器窗口变化1像素时就触发事件，而火狐是在用户停止调整窗口大小时才触发 不建议在此事件中加入大计算量代码，因为可能频繁执行，导致浏览器速度变慢 窗口最大最小化也会触发事件 3、scroll 当用户滚动带滚动条的元素中的内容时，在该元素上面触发 二、鼠标事件 1、事件类型 onclick --
事件类型-基本类型
weixin_52484792的博客
05-25 423
一、UI事件（不一定与用户有关） load：当页面完全加载后在window上触发，图片也可以触发load事件 resize：当窗口大小变化时在window触发 scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发 二、鼠标事件 1.事件类型 onclick 单击 ondbclick 双击 oncontextmenu 右键菜单 onmouseover 鼠标移入 onmouseout鼠标移出 onmouseenter鼠标移入（建议使用） onmouse
CLR.via.C#.(中文第3版)(自制详细书签)Part2
04-04
11.1.1 第一步：定义类型来容纳所有需要发送给事件通知接收者的附加信息 11.1.2 第二步：定义事件成员 11.1.3 第三步：定义负责引发事件的方法来通知事件的登记对象 11.1.4 第四步：定义方法将输入转化为期望...
hostmonitor说明书【中文版】
08-17
信息窗格显示了当前选中测试的详细信息，快速日志窗格则记录了最近的事件和报警，便于追踪系统状态。文件夹栏帮助用户在不同监控组之间切换，而状态栏则显示了软件的状态和系统信息。 超级矩阵窗口是一个强大的视图...
2022医疗卫生行业网络安全分析报告
08-07
弱口令占有 13.4%；在运营风险事件中，弱口令事件占 30.0%。同时，弱口令问题 也是网络安全应急响应事件重要诱因。 数据安全已经成为医疗卫生行业网络安全建设不容忽视的重要一环。例如，在行 业网站漏洞中，信息...
JavaScript之事件类型（事件）
但愿人长久 千里共婵娟
04-15 3336
web浏览器发生的事件有很多类型，不同的事件类型包含不同的信息，“DOM3级”的事件类型大概有：UI事件、焦点事件、滚轮事件、文本事件、鼠标事件、键盘事件、合成事件、变动事件、变动名称事件等。
js判断事件的触发类型
cwc2011xh的专栏
02-17 1378
使用event.target.tagName方法判断： $(function(){ $("ul").click(function(event){ var tar = event.target; if(tar.tagName == "INPUT"){ alert(tar.tagName); } }); }) jquery的写法 $(event.target.tag
qt event 判断事件类型
lcalqf的专栏
02-15 2353
qt event 事件处理： bool CDemo::event(QEvent *event) { if(event->type()==QEvent::keyPress) { QKeyEvent *keyEvent=static_cast(event); if(keyEvent->key()==Qt::key_Tab) {
Event 对象 的应用
世范水晶
02-06 122
&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;function whichElement(e){var targif (!e) var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (tar...
系统日志中出现事件编号13、来源为AutoEnrollment的错误信息的处理方法
weixin_30300225的博客
02-27 927
Troubleshooting error message event 13 from AutoEnrollment in application event 故障现象 事件查看器中出现错误日志 错误 2008-2-27 8:12:58 AutoEnrollment 无 13 N/A SERVER-DC2 详细内容为： 日期：2008-2...
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
b278视频及游戏管理平台-springboot+vue.zip（可运行源码+sql文件+）
07-26
视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
大模型应用-为Ollma开发的简单的HTML网页UI应用-附项目源码-优质项目实战.zip
最新发布
07-26
大模型应用_为Ollma开发的简单的HTML网页UI应用_附项目源码_优质项目实战
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
07-26
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
Oracle 19C EMCC 13.4部署与配置详解
Oracle Enterprise Manager Cloud Control (EMCC) 13.4 是一款用于管理和监控Oracle数据库云环境的关键工具。本文档主要介绍了在Oracle 19c环境下部署和配置13.4版本EMCC的步骤，包括下载、安装过程以及常见组件和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值