js事件(十二)
一、事件三要素
1、事件目标【谁触发的该事件(引起该事件触发的源头:target)】
2、事件处理程序【处理相应事件的函数】
3、事件对象【触发事件产生的携带事件信息的对象】
二、事件流【从页面中接受事件的顺序】
1、事件捕获流 相同事件从外到内依次执行
2、事件冒泡流 相同事件从内到外依次执行
3、DOM事件流 先事件捕获,再处理目标,再冒泡
三、事件处理程序
1.HTML事件处理程序【HTML特性来指定】
eg:
<div onclick="test()"></div>
<script type="text/javascript">
function test(){};
</script>
缺点:
1)时差问题:可能在加载页面是无意间就触发相应的事件处理程序。
2)兼容性问题:存在浏览器兼容性问题。
3)代码划分问题:HTML与JavaScript代码紧密耦合。
2.DOM0级的事件处理程序【相应元素指定,this指向事件绑定元素】(特点是简单,跨浏览器。)
eg:
var div = document.getElementsByTagName("div")[0];
div.onclick = function(){};
div.onclick = null; //事件解除绑定
说明:
可以同一元素添加多个相同类型的事件,但后面的相同的事件会覆盖前面的事件【同一元素相同事件只会执行一次】
3.DOM2级事件处理程序
function handle(){}; //事件处理函数
a、非ie8以下浏览器 【不要对事件使用 "on" 前缀 eg:请使用 "click" 代替 "onclick"】
addEventListener(事件名,事件处理函数,布尔值) 事件绑定
eg:
div.addEventListener('click',handle,false);
removeEventListener(事件名,事件处理函数,布尔值) 事件解绑
eg:
div.removeEventListener('click',handle,false);
函数说明:
布尔值:true在捕获阶段调用事件处理程序;false在冒泡阶段调用事件处理程序(默认为:false)
可以同一元素添加多个相同类型的事件,并且按照她们添加的的顺序依次触发执行
添加事件时如果使用匿名函数将无法删除
b、ie8及以下浏览器【事件名:要添加on在前面】
attachEvent(事件名,事件处理函数,布尔值) 事件绑定
eg:
div.attachEvent('onclick',handle,false);
detachEvent(事件名,事件处理函数) 事件解绑
eg:
div.detachEvent('onclick',handle,false);
函数说明:
布尔值:true在捕获阶段调用事件处理程序;false在冒泡阶段调用事件处理程序(默认为:false)
如果同一节点同一事件绑定多个事件处理程序,逆序执行
四、事件对象【里面的属性均为只读】
1、DOM中的事件对象【event】
currentTarget [Element] 事件处理程序当前正在处理事件的那个元素【绑定该事件处理程序的元素】
target [Element] 事件真正目标【引发事件发生的源头】
preventDefault() [Function] 取消事件的默认行为
stopPropagation() [Function] 取消事件的进一步捕获或者冒泡
bubbles [Boolean] 事件是否冒泡
cancelable [Boolean] 是否可取消事件默认行为
说明:
a、在事件处理程序内部,对象this===currentTarget值,而target则只包含事件的实际目标。
b、如果直接将事件处理程序指定给了目标元素,this,currentTarget,target包含相同的值。
c、兼容DOM的浏览器默认会将event对象传入到事件处理函数中
2、ie(COM)中的事件对象【window.event】opera也是使用window.event
type [String] 被触发的事件 的类型
srcEvent [Element] 事件的目标 【类似target】
returnValue [Boolean] 取消时间默认行为,值为false阻止【类似preventDefault()】
cancelBubble [Boolean] 是否取消事件冒泡,值为true取消冒泡【类似stopPropagation()】
3、js中兼容性处理问题
对相关兼容性问题封装为对象的相关方法
eg:
//事件兼容性对象eventUtil
var eventUtil = {
// 1.事件的绑定
bind:function(el,type,handle){
if (el.addEventListener) {
//非ie8及以下浏览器
el.addEventListener(type,handle);
}else if(el.attachEvent){
//ie8及以下浏览器
el.attachEvent('on'+type,handle);
}else{
el.['on'+type] = handle;
}
},
// 2.事件的解绑
unbind:function(el,type,handle){
if (el.removeEventListener) {
//非ie8及以下浏览器
el.removeEventListener(type,handle);
}else if(el.detachEvent){
//ie8及以下浏览器
el.detachEvent('on'+type,handle);
}else{
el.['on'+type] = null;
}
},
// 3.事件对象
getEvent:function(event){
//ie及opera使用window.event;其他基本使用event
return event?event:window.event;
},
// 4.事件目标
getTarget:function(event){
//ie使用srcElement;DOM中事件对象使用target
return event.target?event.target:event.srcElement;
},
// 5.事件冒泡
stopProp:function(event){
if(event.stopPropagation){
//DOM事件对象下使用
event.stopPropagation();
}else{
//ie下使用cancelBubble
event.cancelBubble = true;
}
},
// 6.事件默认
preventDef:function(event){
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue = false;
}
}
};
封装对象 Code
js事件(十二)的更多相关文章
- Node.js实战(十二)之Stream
Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http 服务器发起请求的request 对象就是一个 Stream,还有stdout(标准输出). Node.js,Str ...
- Mysql-学习笔记(==》事件 十二)
事件 计划任务(定期定时执行) -- 查看当前mysql数据库是否开启时间功能,默认关闭SHOW VARIABLES LIKE 'event_scheduler'; -- event_schedule ...
- JS事件(二)事件对象
html事件处理程序中,变量event中保存着事件对象 <button onclick="alert(ev.type)" id="btn">clic ...
- js上 十二、函数初步-1
11-1.引入(认识函数) 引入: 说起函数,其实我们并不陌生,在初中数学中我们就接触过函数:例如我们所学的 y = 2X+1 ; 这是一个二元一次方程,也是我们数字中的函数: 当我们每次输入 ...
- 【D3.V3.js系列教程】--(十二)坐标尺度
[D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...
- {Python之线程} 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程(了解) 七 python与线程 八 Threading模块 九 锁 十 信号量 十一 事件Event 十二 条件Condition(了解) 十三 定时器
Python之线程 线程 本节目录 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程(了解) 七 python与线程 八 Thr ...
- js的事件机制二
js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...
- D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形
D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...
- js获取近十二个月
1.获取近十二个月 var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data ...
随机推荐
- Spring Boot-Error:(3, 32) java: 程序包org.springframework.boot不存在
问题分析 -由于加载的项目没有加载相应的依赖的包文件导致 解决方案 setting 选中图中的设置,点击apply,IDE就会自动下载所需要的包文件
- 工具系列 | 如何在阿里云负载均衡上启用WS/WSS支持
官方文档:https://help.aliyun.com/document_detail/63421.html?spm=5176.10695662.1996646101.searchclickresu ...
- Eclipse离线安装svn插件
Eclipse离线安装svn插件 1,下载插件 百度网盘:链接: https://pan.baidu.com/s/1lP7J2_7bdj1Tp4YdnrdllQ 提取码: v3nq 2,在eclips ...
- 什么时候会进行 SpringMVC重定向保存参数(FlashMap)?
SpringMVC重定向保存参数(FlashMap):两种情况会保存参数: 1. 当前视图为RedirectView,也即是说当前请求为重定向请求. org.springframe ...
- JMeter压测上对于并发的认识误区
1.误区 在JMeter压测过程中,我们通常认为1s内100的并发量(即:QPS为100)的设置如下: 此时,没有再添加额外的控制器.上述中的参数设置解释:Number of Threads(user ...
- vmare_mac 关闭完整性检查
今天在vmware 15 安装mac10.13,安装之后不能全屏,查了很多资料最后完美解决 首先我们需要进入mac的恢复模式 等待出现苹果LOGO,直到进度条加载完毕 然后打开实用工具-终端 关闭SI ...
- 中国大互联网公司在github上的开源项目
公司名 账号数 账号名 总项目数 非fork项目数 百度 13 baidu.ApolloAuto. brpc. mipengine.Clouda-team.mesalock-linux. ecomfe ...
- 僵尸进程bug排除方法
多进程处理存在的问题 直接return 200 子进程 signal.signal(signal.SIGCHLD, signal.SIG_IGN) #不管子进程,不然R的多进程切图会产生僵尸进程
- PMP 第4章错题总结
变更步骤: 1.配置管理活动:配置识别.配置状态记录.配置核实与审计2.项目章程中记录项目的目的和总体预算3.变更控制系统规定了变更管理流程及批准的权限4.项目章程是授权项目经理动用组织资源的文件5. ...
- ubuntu16.04+cuda8.0+cudnn6.0安装mxnet(极简!+成功!)
安装MXNet 1.安装 CUDA8.0对应的mxnet版本是mxnet-cu80(同理如果是CUDA9.0对应版本则是mxnet-cu90). 如果pip安装过慢,请参考 Ubuntu16.10下配 ...