JavaScript_事件入门

js事件

鼠标事件（Mouse Events）

1 onclick 点击事件
onclick 属性在单击鼠标时触发。

     document.onclick = function(){
            console.log('单击了');
        }

不能应用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

2 ondblclick 双击事件
ondblclick 属性在元素上双击鼠标时触发。

     document.ondblclick = function(){
            console.log('双击了');
        }

不能使用于以下元素： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

3 onmouseover 鼠标移动到HTML元素上方的事件
onmouseover 属性在鼠标指针移至元素之上时触发。

     box.onmouseover = function(){ //对应的子元素也触发
            console.log('over移进');
        }

不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

4 onmouseout 鼠标移出HTML元素上方的事件
onmouseout 属性在鼠标指针移除元素时触发。

      box.onmouseout = function(){ //对应的子元素也可以触发
            console.log('out移出');
        }

不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

5 onmouseenter 鼠标移动到HTML元素上方的事件
onmouseenter 事件在鼠标指针移动到元素上时触发。

     box.onmouseenter = function(){ //只有自己能触发
            console.log('enter移进');
        }

 **提示**： 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
 
**提示**： onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。

不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

6 onmouseleave 鼠标移出HTML元素上方的事件
onmouseleave 事件在鼠标移出元素时触发。。

      box.onmouseleave = function(){ //只有自己能触发
            console.log('leave移出');
        }

 **提示**： 该事件通常与 onmouseenter 事件一起使用， 该事件在鼠标移动到元素上时触发。
 
**提示**: onmouseleave 事件类似于 onmouseout 事件。 唯一的区别是 onmouseleave 事件不支持冒泡 。

不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

7 onmousedown 鼠标按下的时候触发的事件
onmousedown 属性在按下鼠标按钮时触发。

       box.onmousedown = function(){
            console.log('按下');
        }

 **注意** 
  与 onmousedown 事件相关的事件触发顺序 (左/中鼠标按钮):
 
    1. onmousedown
    2. onmouseup
    3. onclick
  与 onmousedown 事件相关的事件触发顺序(右边鼠标按钮):
 
    1. onmousedown
    2. onmouseup
    3. oncontextmenu

不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

8 onmouseup 鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）
onmouseup 属性在用户松开鼠标按键时触发

      box.onmouseup = function(){
            console.log('弹起');
        }

 **注意** 
  与 onmousedown 事件相关的事件触发顺序 (左/中鼠标按钮):
 
    1. onmousedown
    2. onmouseup
    3. onclick
  与 onmousedown 事件相关的事件触发顺序(右边鼠标按钮):
 
    1. onmousedown
    2. onmouseup
    3. oncontextmenu

不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。

9 oncontextmenu 鼠标右键点击
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

      //不会触发点击事件
        box.oncontextmenu = function(){
            console.log('右键点击');
        }

10 onmousemove 鼠标移动
onmousemove 属性在鼠标指针移动到元素时触发。

       box.onmousemove = function(){
            console.log('鼠标移动');
        }

键盘事件（Keyboard Events）

1 onkeydown 键盘按键被按下发生的事件
onkeydown 属性在用户按下按键(在键盘上)时触发。

        window.onkeydown = function(){
            console.log('键盘按下');
        }

2 onkeyup 键盘按键被松开发生的事件
onkeyup 事件会在键盘按键被松开时发生

        window.onkeyup = function(){
            console.log('键盘弹起');
        }

3 onkeypress 键盘按键按下并松开发生的事件
onkeypress 事件会在键盘按键被按下并释放一个键时发生。

        window.onkeypress = function(){
            console.log('字符键按下');
        }

 **提示**：onkeydown onkeyup onkeypress 事件相关的事件发生次序：
 
    1. onkeydown
    2. onkeypress
    3. onkeyup

注意： onkeydown onkeyup onkeypress 属性不能用于以下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或 <title>。

窗口事件属性（Window Event Attributes）

1 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
onload 属性在文档对象加载完成后触发。
onload 通常使用于 <body> 元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)。

     window.onload = function(){ //窗口的加载 图片的加载 等等
            console.log('窗口加载');
        }

2 onunload 用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）
onunload 属性在用户关闭一个页面时触发。

      window.onunload = function(){ //清除对应的内存 销毁
            console.log('窗口卸载');
        }

onunload 在用户离开页面(通过点击链接，提交表单，关闭浏览器窗口等)触发。

 注意： 如果你重新载入页面，unload 事件将被触发( onload 事件)。

3 onresize 窗口或者框架被重新调整大小
onresize 属性在调整窗口大小时触发。
onresize 属性常用于调整窗口大小。

      window.onresize = function(){
            console.log('窗口大小已改变'); //浏览器窗口改变即打印
        }

表单事件(Form Events)

1 onchange 内容变化事件（常结合对输入字段的验证来使用）
onchange 事件会在域的内容改变时发生。

       var input = document.querySelector('input')
        input.onchange = function(){ //必须要失去焦点
            console.log('value值变化了');
        }

onchange 事件也可用于单选框与复选框改变后触发的事件。

2 onfocus 元素获取焦点事件
onfocus 事件在对象获得焦点时发生。
onfocus 通常用于 <input>, <select>, 和<a>
onfocus 事件的相反事件为 onblur 事件。

       input.onfocus = function(){
            console.log('获取焦点');
        }

3 onblur 元素失去焦点事件
onblur 事件会在对象失去焦点时发生。
onblur 经常用于Javascript验证代码，一般用于表单输入框。
onblur 相反事件为 onfocus 事件。

       input.onblur = function(){
            console.log('失去焦点');
        }

4 onselect 文本被选中
onselect 属性在选取元素文本后触发。

       input.onselect = function(){ //禁止复制粘贴
            console.log('当前内容被选择');
        }

onselect 属性可使用于以下元素: <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>。

5 onreset 重置按钮被点击
onreset 事件在表单被重置后触发。

       document.querySelector('form').onreset = function(){
            console.log('表单重置');
        }

6 onsubmit 提交按钮被点击
onsubmit 属性在表单提交时触发。

       document.querySelector('form').onsubmit = function(){
            console.log('表单提交');
        }

onsubmit 属性只适用于 <form> 元素。

7 oninput 在input框内输入时
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

       document.querySelector('input').oninput = function(){
            console.log('内容输入'); //内容框输入时打印
        }

提示：该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

posted @ 2022-08-06 11:11 苏沐~ 阅读(316) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步

相关博文：

· JS实现同一DOM元素上onmousedown、onclick、ondblclick事件并存解决方法（实现左键单击、双击、长按，右键点击）

· JavaScript_事件（中）

· JS常见的事件

· js-DOM事件

· JS常用事件

阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix