node.js 阿里巴巴 分布式 Apache Pivot教程 Nginx环境搭建 海思 authentication session razor junit collections tfs jboss vue动态绑定class webpack视频 git下载代码到本地命令 python语言 python加入环境变量 java中的tostring java遍历集合 java读取文件 java电子书下载 linux命令详解词典 高等数学同济第七版 如何强行退出小米账号 pr转场特效下载 3389扫描器 修改ip地址软件 kafka权威指南 梦想世界答题器 通灵学院在哪 优酷app播放器下载 php验证码 js数组操作 祸星龙 mysql定时备份 mysql密码重置 pandas中文手册 脚本生成器 下载网络电视
当前位置: 首页 > 学习教程  > 编程语言

Java Script Dom事件

2021/1/13 20:22:30 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

鼠标事件 1.onclick 语法: object.οnclickfunction(){SomeJavaScriptCode}; 定义和用法 onclick 事件会在元素被左键点击时发生。 实例: // 鼠标左键单击事件box.onclick function() {box.style.backgroundColor "red";} 支持 oncl…

鼠标事件

1.onclick

语法:

object.οnclick=function(){SomeJavaScriptCode};

定义和用法

onclick 事件会在元素被左键点击时发生。

实例:

// 鼠标左键单击事件
            box.onclick = function() {
                    box.style.backgroundColor = "red";

                }

支持 onclick 事件的 HTML 标签:

onclick 属性可以使用与所有 HTML 元素,除了 :<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

2.ondblclick

语法:

object.ondblclick=function(){SomeJavaScriptCode};

定义和用法

ondblclick事件会在元素左键被双击时发生。

实例:

// 鼠标左键双击事件
            box.ondblclick = function() {
                    box.style.backgroundColor = "chocolate";
                }

3.oncontextmenu

语法:object.oncontextmenu=function(){SomeJavaScriptCode}

定义和用法

oncontextmenu事件会在元素右键键被点击时发生。

实例:

    // 鼠标右键单击事件
            box.oncontextmenu = function() {
                    box.style.color = "#fff";
                }

 

属性

描述

onclick

在用户点击鼠标左键打开上下文菜单时触发

oncontextmenu

在用户点击鼠标右键打开上下文菜单时触发

ondblclick

在用户点击鼠标左键打开上下文菜单时触发

onmousedown

鼠标按钮被按下。

onmouseenter

当鼠标指针移动到元素上时触发。

onmouseleave

当鼠标指针移出元素时触发

onmousemove

鼠标被移动。

onmouseover

鼠标移到某元素之上。

onmouseout

鼠标从某元素移开。

onmouseup

鼠标按键被松开。

键盘事件

属性

描述

DOM

onkeydown

某个键盘按键被按下。

2

onkeypress

某个键盘按键被按下并松开。

2

onkeyup

某个键盘按键被松开。

2

表单事件

 <script>
        window.onload = function(){
            var inp = document.querySelector("input");
            var form = document.querySelector("form");
            inp.onchange = function(){
                console.log("表单内容发生了变化");
            }
            inp.oninput = function(){
                console.log("你输入了内容");
            }
            inp.onfocus = function(){
                console.log("获取了焦点");
                this.style.backgroundColor = "red";
            }
            inp.onblur = function(){
                console.log("失去了焦点");
                // this.style.backgroundColor = "red";
            }
            form.onsubmit = function(){
                alert("表单提交了");
            }
            form.onreset = function(){
                // alert("表单重置");
                console.log("表单重置");
            }


        }
    </script>
</head>
<body>
    <form action="">
        <input type="text" value="">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>

属性

描述

onblur

元素失去焦点时触发

onchange

该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

onfocus

元素获取焦点时触发

onfocusin

元素即将获取焦点时触发

onfocusout

元素即将失去焦点时触发

oninput

元素获取用户输入时触发

onreset

表单重置时触发

onsearch

用户向搜索域输入文本时触发 (<input="search">)

onselect

用户选取文本时触发 ( <input> 和 <textarea>)

onsubmit

表单提交时触发

 


本文链接: http://www.dtmao.cc/news_show_600281.shtml

附件下载

上一篇:java玩具谜题

下一篇:JAVA选择题

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?