关于js中的鼠标事件总结


Posted in Javascript onJuly 11, 2017

js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的这些事件都包含有一个事件对象event,当然在IE低版本下,event对象是挂在window底下的。这个我们另行讨论。

1.通过html添加事件 

<input type="button" click="alert(1)"/>

2.通过DOM0级方式添加事件

<input type="button" value="点击"/>
<script>
  var btn=document.getElementsByTagName('input')[0];
  btn.onclick=function(){
     alert(1);
}
</script>

3.通过DOM2级方式添加事件

事件监听主要接受三个参数,事件类型,事件需要执行的函数,是否冒泡,默认情况下是允许冒泡的

document.addEventListener('click',function( ){ },true)

以上是关于事件添加的三种方式,通过DOM0级方式添加事件有一个缺点就是当添加同一个事件是,后写的会把先写的给覆盖掉,但是通过DOM2级方式添加的相同事件是不会覆盖前面的事件的。同时,需要注意的是通过DOM2级添加的事件类型前面是没有‘on'的,接着就是如果要移除事件的话,DOM0级直接让事件为null就能清除事件,但是如果是DOM2级添加的函数是匿名函数,通过removeEventListener()方法是没办法移除的,因为两者指向的不是同一个函数,如果要移除,请记得使用有名函数。关于最后一个参数true是代表冒泡,false是代表捕获。

/*
* 当触发onclick事件时,console.log(ev.which),鼠标左键的which值为1
* 当触发oncontextmenue时,鼠标的右键值为3,不会触发onclick事件
* 当mousewheel时,鼠标的中键键值为0
* 当document.down时,可以根据按键的不同,从左到右鼠标键值依次为1,2,3
* 在chrome底下,查看ev.wheelDelta,向上是120,向下是-120
* 在FirFox底下,通过addEventListenner()来给鼠标添加滚轮事件,事件类型是DOMMouseScroll,查看是使用ev.detail
* 向上是3,向下是-3
*

以上这篇关于js中的鼠标事件总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
Augularjs-起步详解
Jul 08 Javascript
jquery validate表单验证插件
Sep 06 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 #Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 #Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
Angular2生命周期钩子函数的详细介绍
Jul 10 #Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 #Javascript
在vue中获取dom元素内容的方法
Jul 10 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
javascript原始值和对象引用实例分析
2015/04/25 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
jsTree使用记录实例
2016/12/01 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
python中常用的九种预处理方法分享
2016/09/11 Python
Python操作csv文件实例详解
2017/07/31 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
护士的岗位职责
2013/12/04 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
安全生产大检查方案
2014/05/07 职场文书
忠诚教育心得体会
2014/09/03 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
政风行风评议心得体会
2014/10/21 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
Python上下文管理器Content Manager
2021/06/26 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
vue+iview实现手机号分段输入框
2022/03/25 Vue.js