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

氏族归来

已于 2023-04-05 17:26:55 修改

阅读量691

点赞数

分类专栏：网站文章标签： html javascript 前端

于 2023-04-04 16:59:50 首次发布

本文链接：https://blog.youkuaiyun.com/shizuguilai/article/details/129956424

版权

网站专栏收录该内容

4 篇文章

订阅专栏

<!--我的操作对象，是一个选择器，id为my_selector-->
<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 Model1</option>
        <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>