关于js中的鼠标事件总结

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中的鼠标事件总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

  • js动态设置鼠标事件示例代码

    复制代码 代码如下: obj.onmouseover=function (){ $("#vote").html("赞过了"); } obj.onmouseout=function (){ $("#ssvote").html("赞(" + vote_num+")"); }

  • JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3

  • 关于js中的鼠标事件总结

    js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的这些事件都包含有一个事件对象event,当然在IE低版本下,event对象是挂在window底下的.这个我们另行讨论. 1.通过html添加事件 <input type="button" click="alert(1)"/> 2.通过DOM0级方式添加事件 <input type="button"

  • JS中dom0级事件和dom2级事件的区别介绍

    dom0级事件 <a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(

  • js中获取键盘事件的简单实现方法

    <script type="text/javascript" language=JavaScript charset="UTF-8"> document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27){ // 按 Esc //要做的事情 } if(

  • Node.js中的events事件模块知识点总结

    通过对Node的学习及应用,我们知道NodeJS其采用单线程.事件驱动.非阻塞I/O等架构设计,非常适用于高并发.I/O密集型应用. 1. 什么是事件驱动? 事件驱动,简单来说就是通过有效方法来监听事件状态的变化,并在发生变化时做出相应的动作. 举一个生活应用的场景来理解:当我们去饭店吃饭点餐,当我们下单之后,服务员告诉我们的订单号(这时候可以理解为注册了一个事件),我们在坐着等候,这时候我们的耳朵就一直监听着服务员的喊号,当喊到我们的时候,我们可以去前台取餐. 2. 事件模型 NodeJS的事

  • 关于js中removeEventListener取消事件监听的坑

    从addEventListener说起,上代码 onMounted(() => { window.addEventListener("click", ()=>{ doSth(param)//param为参数 }) }) addEventListener有一个箭头函数回调函数,这个函数本身不能传参(当然event除外),如果你要传参,只能在doSth函数上传,我们也可以将箭头函数回调函数替换成一个函数,但是这个函数明显不能有参数 onMounted(() => { wi

  • 详解Java图形化编程中的鼠标事件设计

    鼠标事件的事件源往往与容器相关,当鼠标进入容器.离开容器,或者在容器中单击鼠标.拖动鼠标时都会发生鼠标事件.java语言为处理鼠标事件提供两个接口:MouseListener,MouseMotionListener接口. MouseListener接口 MouseListener接口能处理5种鼠标事件:按下鼠标,释放鼠标,点击鼠标.鼠标进入.鼠标退出.相应的方法有: (1) getX():鼠标的X坐标 (2) getY():鼠标的Y坐标 (3) getModifiers():获取鼠标的左键或右键

  • 浅谈Vue.js 中的 v-on 事件指令的使用

    v-on 事件指令用于绑定事件. 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件. html: <div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button> </div> 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: . js: <script&g

  • js中的触发事件对象event.srcElement与event.target详解

    js中的触发事件对象event.srcElement与event.target详解

    介绍 IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: firefox 下的 event.target = IE 下的 event.srcElement 解决方法 使用obj = event.srcElement ? event.srcElement : event.target; 或:var evtTarget = event.target || eve

  • js中的eventType事件及其浏览器支持性介绍

    一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3

  • js 绑定键盘鼠标事件示例代码

    1.绑定键盘回车事件(注意:用jq提交时想同时按回车键可以提交,此时就不要用form了.) 复制代码 代码如下: document.onkeydown = function(evt){ var evt = window.event?window.event:evt; if(evt.keyCode==13){ subcomment(); //如果按下的是回车键,则执行对应的js函数 } }

随机推荐