元素绑定事件的几种方式（以绑定点击事件为例）

最新推荐文章于 2024-03-25 17:12:51 发布

Pop–

最新推荐文章于 2024-03-25 17:12:51 发布

阅读量5.2k

点赞数 3

分类专栏： JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45026839/article/details/115583977

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、在HTML上绑定点击事件

<body>
    <div class="test" id="main">
        这是测试区域的内容
    </div>
    <input type="button" value="变红" onclick="fun1()" id="change">
    <script>
        function fun1() {
            var getId = document.getElementById("main");
            getId.style.backgroundColor = "red";
        }
    </script>
</body>

在这里插入图片描述

二、使用js获取元素并添加绑定事件

传统方式注册事件 onclick = function(){};

 <body>
    <button>传统注册事件</button>
    <script>
        var btn = document.querySelector('button');
        // 1. 传统方式注册事件
        btn.onclick = function () {
            alert('hi');
        }
    </script>
</body>

在这里插入图片描述

事件侦听注册事件 addEventListener

(1) 里面的事件类型是字符串必定加引号而且不带 on
(2) 同一个元素同一个事件可以添加多个侦听器（事件处理程序）

<body>
    <button>方法监听注册事件</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert(22);
        })
    </script>
</body>

ie 9 以前的版本用 attachEvent

 btn.attachEvent('onclick', function() {
            alert(11);
        })

三、jQuery 绑定事件的俩种方式

使用 click (以给按钮添加点击事件为例) 要引入jquery.js

 $("button").click(function(){});

<body>
    <button>方敬傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <script>
        // 给所有的按钮添加点击事件
        $(function () {
            $("button").click(function () {
                // 当前的元素变化背景颜色
                $(this).css("background", "pink");
                //  其它的兄弟去掉背景颜色
                $(this).siblings("button").css("background", "");
            });

        })
    </script>
</body>

使用 on() 方法添加事件（此方法处理程序使用于当前以及未来的元素，推荐使用）

$("button").on("click", function(){});

<body>
    <button>方敬傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <button>傻逼</button>
    <script>
        // 给所有的按钮添加点击事件 
        $(function () {
            $("button").on("click", function () {
                // 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 其它的兄弟去掉背景颜色
                $(this).siblings("button").css("background", "");
            })
        });
    </script>
</body>

注： 要将js注册绑定事件和jquery注册绑定事件分开来有on 和没 on 的区别
1.有on 一般后面接 " = " function(){} 即 onclick = function(){}
2. 没on 一般为 click(funtion(){}) 或者为 addEventListener('click',function(){})

Pop–

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
元素绑定事件的几种方式（以绑定点击事件为例）

一、在HTML上绑定点击事件<body> <div class="test" id="main"> 这是测试区域的内容 </div> <input type="button" value="变红" onclick="fun1()" id="change"> <script> function fun1() { var getId = document.g.
复制链接

扫一扫