频道导航

易被忽视的js事件问题总结

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了易被忽视的js事件问题总结，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、跨平台事件

什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。

什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。

下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：

DOM属性和方法 IE属性和方法

charcode keycode preventDefault returnValue=false relatedTarget fromobj|toobj stopPropation cancelBuble=true target srcobj

我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题：

eventUtil

上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。

首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。

{
event.charCode=(event.type=="keypress")?event.keycode:0;
event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段
}
return event;
}

二、关于冒泡中的target和currentTarget

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。

我是目标div

----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV

----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV

  <br> ----点击这部分，<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>：e.target.tagName : DIV || e.currentTarget.tagName : DIV

//看下第二个变列：
<div id="outer" style="background:#099">

我是目标div

----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV

----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV

  <br> ----点击这部分，<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>：e.target.tagName : DIV || e.currentTarget.tagName : DIV

三、IE和DOM区别

DOMIE

获取目标 event.target event.srcElement 获取字符代码event.charCode event.keyCode 阻止默认行为event.prevetDefault() event.returnvalue=false 冒泡 event.stopPropagation()event.cancelBubble=true

关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：

四、鼠标事件

<div class="jb51code">
<pre class="brush:xhtml;">

use your mouse to click and double click the red square

</p> @H_<a href="https://www.jb51.cc/tag/301/" target="_blank" class="keywords">301</a>_80@ <p><input type="text" id="textbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p> <p><textarea id="txt2" rows="10" cols="45">

js文件如下：

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文链接：https://www.f2er.com/js/48784.html

js 事件事件事件

上一篇：Angularjs中UI Router的使用方法下一篇：JavaScript绑定事件监听函数的通用

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章