1、onclick当按钮被点击时执行Javascript代码
2、onmouseove、onmouseout
3、onfocus、onblur
4、onchange
5、onsubmit
6、onkeyup、onkeydown
7、value 返回属性值
8 window是全局对象,它有一些常见的方法
- 8-1、javascript中声明的全局变量是window的属性,方法是window的方法
9、setInterval();间歇 setTimeout();超时
10、递归
11、onload 当页面载入完毕后执行Javascript代码
12、onresize当浏览器被重置大小时执行Javascript代码
13、onscroll 元素滚动时执行 JavaScript
14、BOM
常见的HTML事件

1、onclick当按钮被点击时执行Javascript代码

<script>
function myFunction(){
    document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>
<p>单击按钮触发函数。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>

2、onmouseove、onmouseout

onmouseover 鼠标悬停在元素上的时候触发
onmouseout 鼠标移开的时候触发

    <p id="p">hello world</p>
    <script>
        /* 
        mouseover  鼠标悬停在元素上的时候触发
        mouseout  鼠标移开的时候触发
         */
        var p =  document.getElementById("p");
        p.onmouseover = function(){
            this.style.background = "red"
        }
        p.onmouseout =  function(){
            this.style.background = "green"
        }
    </script>

3、onfocus、onblur

onfocus获取焦点
onblur遗失焦点

    <input id="app" type="text">
    <script>
       var app = document.getElementById("app");
       app.onfocus = function(){
           this.style.backgroundColor = "red"
       }
       app.onblur =  function(){
           this.style.backgroundColor = "yellow"
       }
    </script>

4、onchange

    <input type="text" id="input">
    <script>
        // 当输入框的内容发生改变的时候,触发
        var input = document.getElementById("input");
        input.onchange =  function(){
            console.log("hello world")
        }
        // onresize窗口大小改变的时候,会触发
        window.onresize =  function(){
            console.log(1)
        }
        // 窗口滚动的时候会触发
        window.onscroll =  function(){
            console.log(2)
        }
    </script>

5、onsubmit

    <form id="form"  onsubmit="alert(1)"  >
        <p>
            用户名: <input type="text" name="user">
        </p>
        <p>
            密码: <input type="password" name="pwd">
        </p>
        <input type="submit" id="input">
    </form>

6、onkeyup、onkeydown

onkeyup 当用户释放键盘按钮时执行Javascript代码
onkeydown 在用户按下一个按键时执行Javascript代码
# keyCode

    <input type="text" id = "input">
    <script>
        /* 
        event.key  获取按下键盘对于的值
        event.keyCode  13回车
        R  82
         */
        var input  = document.getElementById("input");
        input.onkeydown = function(event){
            console.log(event.keyCode)
            if(event.keyCode == 82){
                console.log("放下")
            }
        }
        input.onkeypress =  function(){
            console.log("press")
        }
        input.onkeyup = function(){
            console.log("放开")
        }
    </script>

7、value 返回属性值

    <input type="text" id="input" value="helloworld">
    <script>
        /* element.value */
        var input =  document.getElementById("input");
        input.onkeyup = function(event){
            if(event.keyCode ==13 ){
                console.log(this.value)
            }
        }
    </script>

    <p>还可以输入<em id="em" style="color:red">0</em>/30</p>
    <textarea  id="txt" cols="30" rows="10"></textarea>
    <script>
        var txt =  document.getElementById("txt");
        var em =  document.getElementById("em")
        txt.onkeydown = function(){
            var length = this.value.length;
            if(length<=30){
                em.innerHTML =  this.value.length;
            }else{
                alert("只能输入30个字符")
            }
        }
    </script>

8 window是全局对象,它有一些常见的方法

1、 alert()方法用于显示带有一条指定消息和一个确认按钮的警告框。
2、confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

        // browser object model
        /* 
        window是全局对象,它有一些常见的方法
        alert()
        confirm()
         */
        // window.alert("hello world")
        var t = window.confirm("要不要")
        console.log(t)

8-1、javascript中声明的全局变量是window的属性,方法是window的方法

        var a = 10;
        function go(){
            console.log("hello world")
        }
        // const window = {
        //     a:10,
        //     go:function(){
        //         console.log("hello world")
        //     }
        // }
        // console.log(window.a);
        // window.go();
        console.log(a);
        go();

9、setInterval();间歇 setTimeout();超时

    <button id="btn">停止定时器</button>
    <script>
        /* 设置定时器的时候,会在window下挂载一个属性 */
        /* 
        clearInterval()  清除定时器
         */
        var btn =  document.getElementById("btn");
        var temp = setInterval(function(){
            console.log("2")
        },1000)
        btn.onclick =  function(){
            clearInterval(temp);
        }
    </script>

10、递归

        /* 函数调用函数自身,就叫递归 */
        function show(){
            setTimeout(function(){
                console.log(1)
                show();
            },1000)
        }
        show()

11、onload 当页面载入完毕后执行Javascript代码

在HTML中
在JavaScript中window.onload=function(){SomeJavaScriptCode};

<script>
function myFunction(){
    alert("页面加载完成");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

12、onresize当浏览器被重置大小时执行Javascript代码

<body onresize="myFunction()">
<p>尝试调整浏览器的窗口</p>
<p id="demo">&nbsp;</p>
</body>
<script>
function myFunction(){
    var w=window.outerWidth;
    var h=window.outerHeight;
    var txt="窗口大小: 宽度=" + w + ", 高度=" + h;
    document.getElementById("demo").innerHTML=txt;
}
</script>

13、onscroll 元素滚动时执行 JavaScript

<style>
div {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
</style>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 div 元素中添加 "onscroll" 事件。</p>
<p>尝试滚动 div</p>
<div id="myDIV">In my<br><br>
'Whenever you ....</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").onscroll = function() {myFunction()};
function myFunction() {
    document.getElementById("demo").innerHTML = "你滚动了 div。";
}
</script>

14、BOM

alert();方法用于显示带有一条指定消息和一个 确认 按钮的警告框。
confirm();方法用于显示一个带有指定消息和确认及取消按钮的对话框。
prompt(); 方法用于显示可提示用户进行输入的对话框。
          这个方法返回用户输入的字符串。

prompt()

<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var person=prompt("请输入你的名字","Harry Potter");
    if (person!=null && person!=""){
        x="你好 " + person + "! 今天感觉如何?";
        document.getElementById("demo").innerHTML=x;
    }
}
</script>

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onkeyup	当用户释放键盘按钮时
onload	浏览器已完成页面的加载
onblur	当用户离开input输入框时
onfocus	当 input 输入框获取焦点时
onchange	当用户改变input输入框内容时
onresize	当浏览器被重置大小时
onscroll	元素滚动时执行 JavaScript
keyCode	获取按下的键盘按键Unicode值

第四章 javaScript事件