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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
JS模板实现方法
Apr 03 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
详解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
JavaScript修改css样式style
2008/04/15 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
javascript 闭包
2011/09/15 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
贷款工作证明模板
2015/06/12 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS