关于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 UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
vuex存值与取值的实例
Nov 06 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
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实现的一段简单概率相关代码
2016/05/30 PHP
JS查看对象功能代码
2008/04/25 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
Angular实现响应式表单
2017/08/04 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python实现大文件排序的方法
2015/07/10 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
python实现人像动漫化的示例代码
2020/05/17 Python
python RSA加密的示例
2020/12/09 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
廉洁自律承诺书
2014/03/27 职场文书
安全生产管理责任书
2014/04/16 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
党员个人党性分析材料
2014/12/18 职场文书
台风停课通知
2015/04/24 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技