为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript 事件都在这里啦!

标签:
JavaScript

JavaScript 事件

鼠标事件

鼠标单击事件 click

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

var i = 0

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

鼠标双击事件 dblclick

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

var i = 0

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

鼠标按下事件 mousedown

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

var i = 0

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

鼠标按下松开事件 mouseup

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

var i = 0

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

鼠标移入事件 mouseenter

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

var i = 0

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

鼠标移出事件 mouseleave

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

var i = 0

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

鼠标移动事件 mousemove

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

var i = 0

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

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

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

var i = 0

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

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

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

var i = 0

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

鼠标滚轮事件 mousewheel

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

var i = 0

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

文档事件

加载事件 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>

失去焦点事件 onblur

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

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

<script>
    var i = 0

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

改变事件 onchange

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

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

<script>
    var i = 0

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

内容选中事件 onselect

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

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

<script>
    var i = 0

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

表单提交事件 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>
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消