DOM事件探秘篇


Posted in Javascript onFebruary 15, 2017

1.事件流

时间流--- 描述的是从页面中接受事件的顺序。

(1)事件冒泡流。

事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。

(2)事件捕获流。

不太具体的节点应该更早接受到事件,而最具体的节点最后接受到事件。

2.JS事件探索

1.HTML事件处理程序 -- 直接写在html标签里面的js触发语句。

2.DOM0级事件处理程序。

把一个函数赋值给一个事件的处理程序属性,用的比较多的方法,简单,跨浏览器的优势。

3.DOM2级事件处理程序。

(1)用于处理制定和删除事件处理程序的操作。

addEventListener(处理的事件名,事件处理程序的函数,布尔值) removeEventListner()。

4.IE事件处理程序。

attachEvent(事件处理程序的名称,事件处理程序的函数) detachEvent()

不需要添加第三个参数:IE8以及更早的浏览器版本只支持事件冒泡。

var eventUtil = {
  addHandler:function(element,type,handler){
  if(element。addEventListener){
  element。addEventListener(type,handler,false); 
  }else if(element。attachEvent){
   element。attachEvent(‘on' + type,handler)  ;
  }else{
    element【‘on' + type】= handler;
  }
}
   removeHandler:function(element,type,handler){
   if(element。removeEventListner){
   element。removeEventListner(type,handler);
  }else if(element。detachEvent){
   element。detachEvent(‘on' + type,handler) ;
  }else{
   element【‘on' + type】 = handler ; 
  }
}
}

3.事件对象

在触发DOM上的事件时会产生一个对象,事件对象event。

(1)DOM中的事件对象。

1.type属性 用于获取事件类型。

2.target属性 用于获取事件目标。

3.stopPropagation()方法  用于阻止事件冒泡。

4.preventDefault()方法  阻止事件的默认行为。

(2)IE中的事件对象。

1.type属性 用于获取事件类型。

2.srcElement属性 用于获取事件的目标。

3.cancelBubble属性 用于阻止事件冒泡。 设置true 表示阻止冒泡   设置false 表示不阻止冒泡。

4.returnValue属性  用于阻止事件的默认行为。设置false表示阻止事件的默认行为。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 #Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 #Javascript
JS 实现随机验证码功能
Feb 15 #Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 #Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 #Javascript
javascript中apply/call和bind的使用
Feb 15 #Javascript
JS实现图片放大缩小的方法
Feb 15 #Javascript
You might like
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
行政专员工作职责
2013/12/22 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
团支部建设方案
2014/05/02 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2015年大学生实习评语
2015/03/25 职场文书
工作会议通知
2015/04/15 职场文书
教师节表彰会主持词
2015/07/06 职场文书
六年级作文之家庭作文
2019/12/12 职场文书