在html中使用script脚本为元素绑定响应的事件


<html>

<style>
    body {
        background-color: rgb(240, 240, 240);
        /* 禁止页面滚动 */
        overflow: hidden;
    }

    .panal_top_element {
        float: left;
    }
    /* 决定select选择框的字体大小和粗细 */
    .form-select {
            font-weight: 600;
            font-size: 16px;
        }
style>


<body>
    <select class="panal_top_element  form-select  form-select-sm  shadow-none" aria-label="model selection"
        id="my_selector">
        <option selected>Select Model1option>
        <option value="01">第一个选择option>
        <option value="02">第二个选择option>
    select>
body>

<script>
    function change_function(){
        console.log("你选择了:", Btn.value)
    }

    // querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项,则返回null。
    // 官方参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
    const Btn = document.querySelector("#my_selector");
    
    //为元素对象添加change事件(选框一般都是change事件,按钮一般都是click事件)
    //官方参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
    Btn.addEventListener("change", change_function);

script>

html>

在html中使用script脚本为元素绑定响应的事件_第1张图片
    精确查找对象的方法:document.getElementById(),注意的是这个通过id的方式获取element的方式前面就不用再加#号了,直接输入element的id就能行,加了反而会返回空值。

你可能感兴趣的:(网站,html,javascript,前端)