js事件(Event)知识整理

 更新时间:2012年10月11日 16:52:01   作者:  
事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下
鼠标事件

鼠标移动到目标元素上的那一刻,首先触发mouseover
之后如果光标继续在元素上移动,则不断触发mousemove
如果按下鼠标上的设备(左键,右键,滚轮……),则触发mousedown
当设备弹起的时候触发mouseup
目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。)触发scroll
滚动滚轮触发mousewheel,这个要区别于scroll
鼠标移出元素的那一刻,触发mouseout

事件注册

平常我们绑定事件的时候用dom.onxxxx=function(){}的形式
这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄。
但很多时候我们需要绑定多个处理句柄到一个事件上,而且还可能要动态的增删某个处理句柄
下面的事件注册方式就能解决这个需求。

先介绍一下四个方法
复制代码 代码如下:

//IE以外
target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture);
target :文档节点、document、window 或 XMLHttpRequest。
type :字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false。
//IE
target.attachEvent(type, listener);
target.detachEvent(type, listener);
target :文档节点、document、window 或 XMLHttpRequest。
type :字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
两者使用的原理:可对执行的优先级不一样,实例讲解如下:
ele.attachEvent("onclick",method1);
ele.attachEvent("onclick",method2);
ele.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
ele.addEventListener("click",method1,false);
ele.addEventListener("click",method2,false);
ele.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
兼容后的方法
var func = function(){};
//例:addEvent(window,"load",func)
function addEvent(elem, type, fn) {
if (elem.attachEvent) {
elem.attachEvent('on' + type, fn);
return;
}
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
}
}
//例:removeEvent(window,"load",func)
function removeEvent(elem, type, fn) {
if (elem.detachEvent) {
elem.detachEvent('on' + type, fn);
return;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
}
}

获取事件对象和事件源(触发事件的元素)
复制代码 代码如下:

function eventHandler(e){
//获取事件对象
e = e || window.event;//IE和Chrome下是window.event FF下是e
//获取事件源
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target
}

取消事件默认行为(例如点击一个<a>后不跳转页面而是执行一个函数)
复制代码 代码如下:

function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;//IE
//注意:这个地方是无法用return false代替的
//return false只能取消元素
}
}

阻止事件冒泡
复制代码 代码如下:

function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();//IE以外
} else {
e.cancelBubble = true;//IE
}
}


事件委托

例如,你有一个很多行的大表格,在每个<tr>上绑定点击事件是个非常危险的想法,因为性能是个大问题。流行的做法是使用事件委托。

事件委托描述的是将事件绑定在容器元素上,然后通过判断点击的target子元素的类型来触发相应的事件。
事件委托依赖于事件冒泡,如果事件冒泡到table之前被禁用的话,那以下代码就无法工作了。

复制代码 代码如下:

myTable.onclick = function () {
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 测试如果点击的是TR就触发
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
}


事件(Event)知识整理(二)

事件流

DOM同时支持两种事件模型:捕获型事件和冒泡型事件
并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获)

捕获阶段是由上层元素到下层元素的顺序依次。而冒泡阶段则正相反。

如下图


当事件触发时body会先得到有事件发生的信息,然后依次往下传递,直到到达最详细的元素。这就是事件捕获阶段。
还记得事件注册方法ele.addEventListener(type,handler,flag)吧,Flag是一个Boolean值,true表示事件捕捉阶段执行,false表示事件冒泡阶段执行。
接着就是事件冒泡阶段。从下往上 依次执行事件处理函数(当然前提是当前元素为该事件注册了事件句柄)。
在这个过程中,可以阻止事件的冒泡,即停止向上的传递。
阻止冒泡有时是很有必要的,例如

复制代码 代码如下:

<div onclick=funcA()>
<button onclick=funcB()>Click</button>
</div>


本意是如果点击div中按钮以外的位置时执行funcA,点击button时执行funcB。但是实际点击button时就会先后执行funcB,funcA。
而如果在button的事件句柄中阻止冒泡的话,div就不会执行事件句柄了。

相关文章

  • 原生JavaScript实现拖动校验功能

    原生JavaScript实现拖动校验功能

    这篇文章主要介绍了原生JavaScript实现拖动校验功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js读取注册表的键值示例

    js读取注册表的键值示例

    读取注册表的键值的方法有很多,在本文将为大家详细介绍下使用js如何实现注册表的键值读取,感兴趣的朋友可以参考下
    2013-09-09
  • js遍历对象数组并获取对象相应的属性值实例代码

    js遍历对象数组并获取对象相应的属性值实例代码

    对于数组或者对象的遍历,筛选,提取等操作是前端开发中经常有的需求,下面这篇文章主要给大家介绍了关于js遍历对象数组并获取对象相应的属性值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 网页右侧悬浮滚动在线qq客服代码示例

    网页右侧悬浮滚动在线qq客服代码示例

    这篇文章主要介绍了网页右侧悬浮滚动qq在线客服代码示例,需要的朋友可以参考下
    2014-04-04
  • 浅谈webpack构建工具配置和常用插件总结

    浅谈webpack构建工具配置和常用插件总结

    这篇文章主要介绍了浅谈webpack构建工具配置和常用插件总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-05-05
  • JavaScript判断输入值是否为正整数(判断变量为数字)

    JavaScript判断输入值是否为正整数(判断变量为数字)

    在项目开发中,有时候需要使用JavaScript验证用户输入的是否为正整数,这篇文章主要给大家介绍了关于JavaScript判断输入值是否为正整数(判断变量为数字)的相关资料,需要的朋友可以参考下,
    2023-11-11
  • uniapp H5 https跨域请求实现

    uniapp H5 https跨域请求实现

    这篇文章主要介绍了uniapp H5 https跨域请求实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JavaScript ES2019中的8个新特性详解

    JavaScript ES2019中的8个新特性详解

    这篇文章主要介绍了JavaScript ES2019中的8个新特性详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JavaScript的变量作用域深入理解

    JavaScript的变量作用域深入理解

    深入理解JavaScript的变量作用域,需要的朋友可以参考下。
    2009-10-10
  • JS实现的点击按钮图片上下滚动效果示例

    JS实现的点击按钮图片上下滚动效果示例

    这篇文章主要介绍了JS实现的点击按钮图片上下滚动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01

最新评论