JavaScript事件概览
时间:2022-04-22
本文章向大家介绍JavaScript事件概览,主要内容包括JavaScript事件、事件类型、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
JavaScript事件
JavaScript是单线程,在同一个时间点,不可能同时运行两个“控制线程”。
事件句柄和事件对象
1.注册事件句柄
标准和非标准
var button=documenbt.elementByID("#button");
button.addEventListener('click',function(){
//do something.
},false);
//第三个参数表明事件是否阻止冒泡。true阻止冒泡,false类似默认行为一样进行事件冒泡。
var button=documenbt.elementByID("#button");
button.attachEvent('onclick',function(){
//do something.
});
早期兼容性代码,查看浏览器支持哪种事件模型:
function registerEventHandler(node,event,handler){
if(typeof node.addEventListener=='function'){
node.addEventListener(node,event,handler);
} else{
node.attachEvent("on"+event,hander);
}
}
registerEventHandler(button,"click",function(){
//to do
});
2.获得事件对象
标准 event
非标准: window.event
兼容性代码:
registerEventHandler(document.body,"click",function(event){
event=event||window.event;
print(event.clientX,",",event.clientY);
});
3.从事件对象中获取数据
鼠标事件,event
对象中的属性(部分):
4.标记事件已经完成
function unregisterEventHandler(node,event,handler){
if(typeof node.removeEventListener=='function'){
node.removeEventListener(node,event,handler);
} else{
node.detachEvent("on"+event,hander);
}
}
registerEventHandler(button,"click",function(){
//to do
});
事件类型
1.鼠标事件, 2.键盘事件 3.停止行为 事件冒泡和阻止默认行为。标准和非标准如下:
阻止事件冒泡:
event.stopPropagation
cancelBubble
阻止默认行为:
event.preventDefault();
returnValue=false;
4.跟踪焦点事件
focus
和blur
5.表单事件
submit
事件
6.window事件
load
事件:在文档完全加载完毕时触发
resize
事件: 每次窗口发生改变时被触发
scroll
事件: 文档滚动的时候,浏览器都会触发window对象上的scroll事件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 探索在网页中使用“标注”
- 笔试题:了解穷举算法吗?如何用代码实现
- 硬核看房利器——Web 全景的实现
- 超级播放器tcplayer如何设置logo
- 【Flutter 实战】1.20版本更新及新增组件
- 手把手教你使用Python实现常用的假设检验 !
- Oracle 每日一题系列合集
- Arrow更好用的python时间序列处理库,你用过吗?
- 死信队列监听补充
- 手把手教你用Python查询你的物流信息
- Selenium自动登录淘宝,我无意间发现了登录漏洞!
- 【DB宝20】在Docker中分分钟即可拥有OGG Director环境
- mq监听死信队列后如何处理
- 【小白学PyTorch】7 最新版本torchvision.transforms常用API翻译与讲解
- 小白学PyTorch | 8 实战之MNIST小试牛刀