DOM_innerHTML标签设置和事件监听机制概述

innerHTML标签设置

1.标签体的设置和获取：innerHTML

2.使用html元素对象的属性

3.控制元素样式

  • 使用元素的style属性来设置
div1.onclick = function(){
                div1.style.border = "1px solid red";
                div1.style.border = "200px";
                div.style.fontSize="20px";
  • 提前定义好类选择器的样式 通过元素的className属性来设置其class属性值

事件监听机制概述

概念:某些组件被执行了某些操作后 触发某些代码的执行

  • 事件：某些操作 如：单击，双击，键盘按下了 鼠标移动了
  • 事件源：组件 如:按钮 文本输入框...
  • 监听器：代码
  • 注册监听：将事件，事件源，监听结合在一起 当事件源上发生了某个事件 则触发执行某个监听器代码

 常见的事件：

1.点击事件：

  • onclick:单击事件
  • ondblclick:双击事件

2.焦点事件

  • onblur:失去焦点
  • onfocus:元素获得焦点

3.加载事件

  • onload:一张页面或一幅图像完成加载

4.鼠标事件

  • onmousedown:鼠标按钮被按下
    • 定义方法时 定义一个形参 接受event对象
    • event对象的button属性可以获取鼠标按钮键被点击
  • onmouseup:鼠标按键被松开
  • onmousemove:鼠标被移动
  • onmouseover:鼠标移到某元素之下
  • onmouseout:鼠标从某元素移开

5.键盘事件

  • onkeydown:某个键盘按键被按下
  • onkeyup:某个键盘按键被松开
  • onkeypress:某个键盘按键被按下并松开

6.选择和改变

  • onchange:域的内容被改变
  • onselect:文本被选中

7.表单事件

  • onsubmit:确认按钮被点击
    • 可以阻止表单的提交
    • 方法返回false则表单被阻止提交
  • onreset:重置按钮被点击

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件演示</title>
        <script>
            //2.加载完成事件
            window.onload=function(){
                //1.失去焦点事件
                document.getElementById("username").onblur=function(){
                    alert("失去焦点了...");
                }
            /*     //2.绑定鼠标移动的元素之上事件
                document.getElementById("username").onmouseover = function(){
                    alert("鼠标来了...");
                } */
                //3.绑定鼠标点击事件
                document.getElementById("username").onmousedown=function(){
                    alert("鼠标点击了....")
                }
                
                document.getElementById("username").onkeydown=function(event){
                    //alert("鼠标点击了....")
                    alert(event.keyCode);
                }
                
                document.getElementById("city").onchange=function(event){
                    //alert("鼠标点击了....")
                    alert("改变了...");
                }
            }
            
            
        </script>
    </head>
    <body>
        <form action="#" id="form">
        <input id="username">
        <select id="city">
            <option>--请选择--</option>
            <option>北京</option>
            <option>上海</option>
            <option>西安</option>
        </select>
        <input type="submit" value="提交">
        </form>
        
    </body>
</html>
复制代码
posted @   baimingze  阅读(438)  评论(0)  编辑  收藏  举报
相关博文：
· DOM简单学习和事件的简单学习
· HTML-表单标签概述和表单项
· HTMLDOM_样式控制事件_概述
· HTMLDOM样式控制和事件概述
· HTMLDOM_样式控制和事件的_概述
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示