JS跨浏览器的事件处理
1. 事件流
- 事件:用户或浏览器自身执行的某种动作。如click(点击事件)、mouse***(鼠标事件)。
- 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
DOM事件流包括三个阶段:
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
IE 采用事件冒泡的方式(div-->body-->html-->Document)
NetScape 采用事件捕获的方式(Document-->html-->body-->div)
DOM 采用先捕获后冒泡的方式
2. 事件处理程序
事件是用户或浏览器自身执行的某种动作,而响应某个事件的函数就叫做事件处理程序。事件处理程序的方式有以下4种:
2.1 HTML事件处理程序
方法:使用一个与相应事件处理程序同名的HTML属性来指定,可以直接在属性中的js代码中通过event变量获取到event对象,代码中的this指的是事件的目标元素。
<input type="button" value="click" onclick="alert(event.type);alert(this.value);" />
2.2 DOM0级事件处理程序
方法: 将一个函数赋值给一个事件处理程序属性。如下:
var btn = document.getElementById("btn")
btn.onclick = function (event) {
console.log(event)
}
优点: 跨浏览器。
缺点: 若绑定多个事件处理程序,会形成覆盖,只执行最后的函数。
2.3 DOM2级事件处理程序
DOM2级事件定义了两个方法,用于处理指定和删除事件程序的操作,该方法可以添加多个事件处理程序
var btn = document.getElementById("btn")
function handler(event) {
console.log(event)
}
btn.addEventListener("click", handler, false) // 添加事件
btn.removeEventListener("click", handler, false) // 移除事件
2.4 IE事件处理程序
IE实现了与DOM中类似的两个方法:
- attachEvent(type, listener)
- detachEvent(type, listener)
其中type是on+事件名,如点击事件:onclick
btn.attachEvent("onclick", function (event){
console.log(event)
})
3. 《JavaScript高级程序设计》中跨浏览器事件绑定
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;
}
},
// 跨浏览器获得对象event
getEvent: function(event){
return event ? event : window.event;
},
// 跨浏览器获得对象event的目标
getTarget: function(event){
return event.target || event.srcElement;
},
// 跨浏览器阻止默认行为
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 跨浏览器移除事件
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;
}
},
// 跨浏览器阻止事件冒泡
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
// 跨浏览器检测鼠标按钮
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
} else {
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4: return 1;
}
}
},
// 跨浏览器获取键盘事件的键码
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},
// 跨浏览器获得相关元素(仅对mouseover和mouseout有效)
getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
// 跨浏览器鼠标滚轮事件
getWheelDelta: function(event){
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
}
};
参考:https://zhangguixu.github.io/2016/12/06/event-basis/
JS跨浏览器的事件处理的更多相关文章
- js跨浏览器的事件处理函数
/* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEvent ...
- store.js 跨浏览器的localStorage
store.js 跨浏览器的localStorage 我们总是想要储存一些数据在浏览器端,却对复杂的兼容性头疼,store.js很好的解决了这些问题. store.js ☍ 使用它相当简单: // 储 ...
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...
- js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...
- js跨浏览器事件处理
var EventUtil = { addHandler: function(element,type,handler){ if(element.addEventListener){ element. ...
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- 原生JS跨浏览器事件封装处理
引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法 一.a ...
- js跨浏览器复制: ZeroClipboard
实例结构: demo.html <script type="text/javascript" src='http://code.jquery.com/jquery.js'&g ...
- 原生javascript跨浏览器常用事件处理
var eventUntil = { getEvent: function (event) {//获取事件 return event ? eve ...
随机推荐
- EVE Online Third Party Development
第一部分:price_history表 # 建表语句 CREATE TABLE IF NOT EXISTS `price_history` ( `regionID` INT NOT NULL, `ty ...
- Qt与PyQT中设置ToolBar在AllowedArea的显示
因为个人对传统的软件GUI界面不是太喜欢,最近又在学习Qt和PyQt5,所以就有了设置ToolBar在窗口的不同地方的想法,经过浪里淘沙,最终在Qt官网里找到了,原来再添加toolBar的时候是由设置 ...
- Google搜索引擎
一.基本搜索 逻辑符 与(空格).或(OR).非(-). ""全匹配搜索 加入双引号表示完全匹配搜索 *通配符 二.高级搜索 intitle:只搜索网页标题(即html的title ...
- chmod chown llinux文件及目录的权限介绍
linux 文件或目录的读.写.执行权限说明: chmod :设置文件或目录权限. u:所有者 g:所在组 o:其他组 a:所有人(u.g.o的总和) chmod -R 文件1/文件2….. ...
- Django商城项目笔记No.2项目准备工作
Django商城项目笔记No.2项目准备工作 接着上篇开始,创建好工程之后,随之而来的是怎么配置工程,这篇文章记录如何进行相关的配置 1.pycharm打开工程,进行相关的配置 通过pycharm打开 ...
- Docker 安装 - Docker 与前端(一)
Docker 是一个开源的容器引擎,可以方便的对容器进行管理.作为一种新兴的虚拟化方式,跟传统的虚拟化方式相比具有众多优势.<Docker 遇见前端>系列文章,旨在记录如何通过 docke ...
- Post-installation steps for Chromium | Fedora
Flash 插件安装 网址: https://fedora.pkgs.org/ 下载: chromium-pepper-flash-version.fc28.x86_64.rpm 安装后重启浏览器 解 ...
- Oracle_spatial的常见错误与注意事项
常见的错误 1.ORA-13226:没有空间索引接口将不被支持 当使用一个空间操作符时,如果没有使用空间索引导致该操作符不能被完成将会返回该错误.这可能会发生在当你使用的列上没有空间索引.或者优化器没 ...
- Oracle 11g 客户端安装及plsql配置
百度文库 http://wenku.baidu.com/link?url=7KyIHuoeUf1EvD5uClFNugDIT9s_dU7bu5_2XhQK4SLarHfG_dBwzhMooedQcsn ...
- $.toJSON和eval的区别
1.$.toJSON是jquery的方法.eval是javascript的方法 2.eval兼容的浏览器多,$.toJSON有可能解析不了的json格式的数据,eval可以.