【js事件详解】js事件封装函数,js跨浏览器事件处理机制
来源:互联网 发布:淘宝雷恩体育是正品吗 编辑:程序博客网 时间:2024/06/04 18:42
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
相关知识链接:js的事件冒泡和事件捕获
二、事件处理程序
1、HTML事件处理程序2、DOM0级事件处理程序
3、DOM2级事件处理程序
DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
相关知识链接:addEventListener第三个参数作用
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序
三、事件对象
事件对象event1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target:事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement:事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
js跨浏览器事件处理机制,封装代码如下:
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.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, //获取事件 getEvent: function(event) { return event ? event : window.event; }, //获取事件类型 getType: function(event) { return event.type; }, //获取事件源 getElement: function(event) { return event.target || event.srcElement; }, //阻止默认事件比如a链接跳转 preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, //阻止事件冒泡 stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }}
更详细的事件讲解链接:javascript打造跨浏览器事件处理机制:详解
相关文章: addEventListener第三个参数作用
js的事件冒泡和事件捕获
javascript打造跨浏览器事件处理机制:详解
【js事件详解】js事件封装函数,js跨浏览器事件处理机制
0 0
- 【js事件详解】js事件封装函数,js跨浏览器事件处理机制
- 【js事件详解】js事件封装函数,js跨浏览器事件处理机制
- js事件封装函数,js跨浏览器事件处理机制
- js事件驱动机制 浏览器兼容处理
- JS事件处理函数
- JS事件封装函数,跨浏览器添加事件和删除事件
- js定时器与事件函数处理机制
- Cocos2d-JS事件处理机制
- JS中事件处理机制
- Cocos2d-JS 事件处理机制
- Cocos2d-js 事件处理机制
- JS:事件鼠标处理机制
- js跨浏览器事件处理程序
- js跨浏览器的事件处理程序
- JS DOM事件机制详解
- JS添加事件处理函数
- js原生事件封装
- js封装自定义事件
- 交通灯管理系统
- 《自控力》笔记
- 今天第一次上班
- Creating Apps With Material Design —— Maintaining Compatibility
- 判断当前有没有点击NGUI的界面
- 【js事件详解】js事件封装函数,js跨浏览器事件处理机制
- Cocoapod 升级
- ural 1017. Staircases(dp数的划分)
- 密码设置为明文和密文
- xpath使用
- Java中会存在内存泄漏吗
- 【Java】在Java中如何把用户绑定信息入库
- linux I/O内存驱动设备--学习笔记
- Android端 第三方qq登陆