1. 事件流

  1. 事件:用户或浏览器自身执行的某种动作。如click(点击事件)、mouse***(鼠标事件)。
  2. 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。

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跨浏览器的事件处理的更多相关文章

  1. js跨浏览器的事件处理函数

    /* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEvent ...

  2. store.js 跨浏览器的localStorage

    store.js 跨浏览器的localStorage 我们总是想要储存一些数据在浏览器端,却对复杂的兼容性头疼,store.js很好的解决了这些问题. store.js ☍ 使用它相当简单: // 储 ...

  3. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  4. js 跨浏览器实现事件

    我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...

  5. js跨浏览器事件处理

    var EventUtil = { addHandler: function(element,type,handler){ if(element.addEventListener){ element. ...

  6. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  7. 原生JS跨浏览器事件封装处理

    引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法 一.a ...

  8. js跨浏览器复制: ZeroClipboard

    实例结构: demo.html <script type="text/javascript" src='http://code.jquery.com/jquery.js'&g ...

  9. 原生javascript跨浏览器常用事件处理

    var eventUntil = {             getEvent: function (event) {//获取事件                 return event ? eve ...

随机推荐

  1. EVE Online Third Party Development

    第一部分:price_history表 # 建表语句 CREATE TABLE IF NOT EXISTS `price_history` ( `regionID` INT NOT NULL, `ty ...

  2. Qt与PyQT中设置ToolBar在AllowedArea的显示

    因为个人对传统的软件GUI界面不是太喜欢,最近又在学习Qt和PyQt5,所以就有了设置ToolBar在窗口的不同地方的想法,经过浪里淘沙,最终在Qt官网里找到了,原来再添加toolBar的时候是由设置 ...

  3. Google搜索引擎

    一.基本搜索 逻辑符 与(空格).或(OR).非(-). ""全匹配搜索 加入双引号表示完全匹配搜索 *通配符 二.高级搜索 intitle:只搜索网页标题(即html的title ...

  4. chmod chown llinux文件及目录的权限介绍

    linux 文件或目录的读.写.执行权限说明: chmod :设置文件或目录权限. u:所有者 g:所在组 o:其他组 a:所有人(u.g.o的总和) chmod  -R  文件1/文件2…..    ...

  5. Django商城项目笔记No.2项目准备工作

    Django商城项目笔记No.2项目准备工作 接着上篇开始,创建好工程之后,随之而来的是怎么配置工程,这篇文章记录如何进行相关的配置 1.pycharm打开工程,进行相关的配置 通过pycharm打开 ...

  6. Docker 安装 - Docker 与前端(一)

    Docker 是一个开源的容器引擎,可以方便的对容器进行管理.作为一种新兴的虚拟化方式,跟传统的虚拟化方式相比具有众多优势.<Docker 遇见前端>系列文章,旨在记录如何通过 docke ...

  7. Post-installation steps for Chromium | Fedora

    Flash 插件安装 网址: https://fedora.pkgs.org/ 下载: chromium-pepper-flash-version.fc28.x86_64.rpm 安装后重启浏览器 解 ...

  8. Oracle_spatial的常见错误与注意事项

    常见的错误 1.ORA-13226:没有空间索引接口将不被支持 当使用一个空间操作符时,如果没有使用空间索引导致该操作符不能被完成将会返回该错误.这可能会发生在当你使用的列上没有空间索引.或者优化器没 ...

  9. O​r​a​c​l​e​ ​1​1​g​ ​客​户​端​安​装​及​p​l​s​q​l​配​置

    百度文库 http://wenku.baidu.com/link?url=7KyIHuoeUf1EvD5uClFNugDIT9s_dU7bu5_2XhQK4SLarHfG_dBwzhMooedQcsn ...

  10. $.toJSON和eval的区别

    1.$.toJSON是jquery的方法.eval是javascript的方法 2.eval兼容的浏览器多,$.toJSON有可能解析不了的json格式的数据,eval可以.