HTML之JavaScript DOM(document)编程处理事件

HTML之JavaScript DOM(document)编程处理事件

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        /*
            事件:本质是行为,用户的行为或者浏览器的行为;事件发生指的是处罚js函数执行
            事件的三要素:事件源、事件、事件处理程序
            事件的绑定:
            1.通过元素的属性绑定 on***
            2.通过DOM编程动态绑定
            注:
                1.一个事件可以绑定多个函数;eg:onclick="show(),show1()
                2.一个元素可以绑定多个事件  eg:onclick="show()" ondblclick="show2()"

            常见的事件:
            1.鼠标事件
            2.键盘事件
            3.表单事件
            4.页面加载事件onload :页面加载完毕事件

            事件的触发
                1.行为触发
                2.DOM编程触发
                

            
        */
    script>
    
    <script>
        // 方法一:
        // function ready() {
        //     // 通过DOM获得要操作的元素
        //     var btn = document.getElementById("btn1"); //返回一个对象
        //     // 绑定一个单击事件
        //     btn.onclick = function () {  //隐函数
        //         alert("11");
        //     }
        // }
        // 方法二:此方法无需在body标签中再加onload
        window.onload = function () {
            // 通过DOM获得要操作的元素
            var btn = document.getElementById("btn1"); //返回一个对象
            // 绑定一个单击事件
            btn.onclick = function () {  //隐函数
                alert("11");
            }

            // 为div1绑定事件
            var d1 = document.getElementById("div1");
            d1.onclick = function () {
                console.log("已点击")
                div1.style.backgroundColor = "red"
            }

            // 通过按钮触发div事件
            btn.onclick = function () {  //隐函数
                alert("变色")
                //通过dom编程触发事件,相当于触发了某些事件发生了
                d1.onclick()
            }
        }



    script>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px;
        }
    style>
head>



<body>
    <input type="button" id="btn1" value="按钮">

    <div class="div1" id="div1">


    div>

body>

html>

你可能感兴趣的:(前端,HTML,JavaScript,javascript,html,前端)