JavaScript中常用事件

菜园前端
• 阅读 328

原文链接:https://note.noxussj.top/?source=helloworld


鼠标事件

鼠标单击事件 click

在文档中鼠标进行单击,就会触发事件。

var i = 0

document.addEventListener('click', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标双击事件 dblclick

在文档中鼠标进行双击,就会触发事件。

var i = 0

document.addEventListener('dblclick', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标按下事件 mousedown

在文档中鼠标进行单击按下,同时不要松开,就会触发事件。

var i = 0

document.addEventListener('mousedown', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标按下松开事件 mouseup

在文档中鼠标进行单击按下并且松开后,就会触发事件。

var i = 0

document.addEventListener('mouseup', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标移入事件 mouseenter

鼠标光标移入文档内时会触发事件。

var i = 0

document.addEventListener('mouseenter', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标移出事件 mouseleave

鼠标光标移出文档内时会触发事件。

var i = 0

document.addEventListener('mouseleave', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标移动事件 mousemove

鼠标光标在文档内移动时会触发事件。

var i = 0

document.addEventListener('mousemove', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标触碰子元素/离开子元素/离开元素事件 mouseout

鼠标光标移出文档内时会触发事件。若文档内存在子元素,那么子元素也会被绑定上移入移出事件。

var i = 0

document.addEventListener('mouseout', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标触碰子元素/离开子元素/触碰元素事件 mouseover

鼠标光标移入文档内时会触发事件。若文档内存在子元素,那么子元素也会被绑定上移入移出事件。

var i = 0

document.addEventListener('mouseover', function () {
    console.log(i++)
})

JavaScript中常用事件

鼠标滚轮事件 mousewheel

不管是否出现了滚动条,只要在文档内部使用了鼠标滚轮就会触发事件。

var i = 0

document.addEventListener('mousewheel', function () {
    console.log(i++)
})

JavaScript中常用事件

文档事件

加载事件 onload

HTML 代码被渲染完毕后会触发事件

window.onload = function () {
    console.log(1)
}

卸载事件 onunload

当前页面被关闭后会触发事件,目前这个无法调试验证。

window.onunload = function () {
    console.log(1)
}

窗口尺寸更改事件 onresize

浏览器窗口大小改变时会触发事件。

window.onresize = function () {
    console.log(1)
}

表单事件

获取焦点事件 onfocus

输入框内进行单击后鼠标光标会出现,代表激活状态,同时也属于获取焦点。

<input type="text" onfocus="fn()" />

<script>
    var i = 0

    function fn() {
        console.log(i++)
    }
</script>

JavaScript中常用事件

失去焦点事件 onblur

输入框光标激活时,鼠标点击输入框以外的地方会取消光标,同时也属于失去焦点。

<input type="text" onblur="fn()" />

<script>
    var i = 0

    function fn() {
        console.log(i++)
    }
</script>

JavaScript中常用事件

改变事件 onchange

在输入框输入内容后并按下回车键,inputvalue 就会变成你输入的内容,同时也会触发 onchange 事件。

<input type="text" onchange="fn()" />

<script>
    var i = 0

    function fn() {
        console.log(i++)
    }
</script>

JavaScript中常用事件

内容选中事件 onselect

当在输入框输入一些内容后,拖动鼠标去选中文字时触发事件。

<input type="text" onselect="fn()" />

<script>
    var i = 0

    function fn() {
        console.log(i++)
    }
</script>

JavaScript中常用事件

表单提交事件 onsubmit

表单提交默认是会刷新页面的,这样的用户体验会很差,所以需要搭配 e.preventDefault() 阻止原生事件执行。

<form onsubmit="fn(event)">
    <input type="submit" value="Submit" />
</form>

<script>
    var i = 0

    function fn(e) {
        console.log(i++)

        e.preventDefault()
    }
</script>

JavaScript中常用事件

点赞
收藏
评论区
推荐文章
USB中文网 USB中文网
3年前
USB中文网之虚拟鼠标功能演示
该功能是USB中文网的开发例程,其设计原理见:使用驱动程序实现的是虚拟USB鼠标功能。鼠标的事件由应用应用层下发:当前完成的功能:鼠标指针的移动鼠标的点击事件动态创建和销毁鼠标设备支持WIN7,WIN10X64,X86使用WDM框架开发应用层是VS2019编译驱动,生成驱动文件,然后再使用批处理调用devcon.exe安装
Python进阶者 Python进阶者
2年前
一文解读JavaScript中的事件知识
前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。1.事件1).鼠标事件onclick鼠标单击ondblclick双击鼠标onmousedown鼠标
达里尔 达里尔
2年前
用css的方式取消div的鼠标点击事件
有时候一些场景需要禁止对div等元素进行点击事件,这个时候如果用js的方法会费时费力,代码量还多,这个时候可以用这个css方法来禁止鼠标点击事件css.divpointerevents:auto|none;/这里的属性为none就是不可被点击/
Easter79 Easter79
3年前
tornadofx响应鼠标点击事件
!(https://oscimg.oschina.net/oscnet/603d45e5725405eab02f29cfd107cf427b1.jpg)importjavafx.application.Applicationimportjavafx.beans.property.SimpleStringProperty
LinMeng LinMeng
3年前
v-on绑定多个方法
von绑定多个方法触发机制不同语法如下:<divvon"{click:getSome,mousemove:MouseClick}"von绑定多个方法</div一个事件绑定多个函数触发机制相同,较少<div@click"getA(),getB()"一个事件绑定多个函数</div
Stella981 Stella981
3年前
Cocos Creator 鼠标事件
鼠标事件//使用枚举类型来注册node.on(cc.Node.EventType.MOUSE\_DOWN,function(event){console.log('Mousedown');},this);//使用事件名来注册node.on('mousedown',function(event){co
Easter79 Easter79
3年前
Swing自定义事件
1.Swing自定义事件将一个组件的事件传递给另一个组件.使用EventListenerList来管理事件,当A组件触发事件的时候,调用方法fireActionPerformed()来触发事件,然后再B组件中actionPerformed()方法来接收事件.当在容器KeyTextComponent中按下鼠标,我们就可以在Jframe中捕获触发的事
Wesley13 Wesley13
3年前
JS的事件冒泡和事件捕获
什么是事件?事件是文档和浏览器窗口中发生的特定的交互瞬间。事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是web浏览器中发生的事情,比如说某
Easter79 Easter79
3年前
Spring事件机制之ApplicationListener与ApplicationEvent 一、一些概念 二、spring事件机制
一、一些概念 事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事,等等。事件有系统事件和用户事件。系统事件由系统激发,如时间每隔24小时,银行储户的存款日期增加一天。用户事件由用户激发,如用户点击按钮,在文本框中显示特定的文
Stella981 Stella981
3年前
JavaScript事件 ——常见事件
1.什么是事件?      当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。常见事件:(http://www.runoo