js中绑定事件的几种方法和JQ中绑定事件的方法

最新推荐文章于 2023-07-07 16:55:54 发布

HZ514

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量1.2k

点赞数 1

分类专栏： html、js、jQ

html、js、jQ 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js中绑定事件可以通过以下三个方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--<button onlclick="sayHello">确定</button> <!--ondbclick 鼠标点击两次-->
        <!-- 如果希望点击按钮时会执行对应的操作 -->
        <!-- 那么需要通过JavaSceipt为按钮绑定事件回调函数 -->
        <!-- 绑定事件回调函数大致有三种方式: -->
        <!--1. 通过标签的onXXX属性来指定需要执行的函数-->
        <!--<script type="text/javascript">
            function sayHello(){
                alert("大家好！");
            }
        </script>
        -->
        <!-- 2.通过元素的onXXX属性来绑定需要执行的事件回调函数 -->
        <!--<button id="ok">确定</button>
        <script type="text/javascript">
            var btn = document.getElementById("ok");
            function sayHello(){
                alert("大家好！")
            }
            btn.onclick = sayHello;
        </script>-->
        <!-- 3.通过元素的addEventListener方法来绑定事件回调函数 -->
        <button id="ok">确定</button>
        <script type="text/javascript">
            var btn = document.getElementById("ok");
            function sayHello(){
                alert("大家好！")
            }
            function sayGoodbye(){
                alert("再见!")
            }
            btn.addEventListener("click", sayHello);
            btn.addEventListener("click", sayGoodbye);
            btn.addEventListener("click", function(){
                btn.removeEventListener("click", sayGoodbye)
            });
        </script>
    </body>
</html>

JQ绑定事件的方法

// 拿到所有的a标签，全部绑定事件，并且自动解决浏览器兼容问题
                $("#fruits>li>a").on("click", removerItem);
                // 解除绑定事件
//                $("#fruits>li>a").off()
                // 拿到按钮标签
                $("#ok").on("click", addItem)

注意:jqery绑定事件的时候$(this)代表当前的标签，通过$(this)就可以实现给多个标签绑定相同事件，达到可以操作当前点击的标签
如果不使用jQuery，原生js需要使用this.getArrribute('ga')可以获得当前点击的标签的ga属性的值

绑定复选框事件


给select绑定事件的方法:
 $("#select").change(function(){
    alert('sdfas')
 })

1、要使用jquery库，务必要引用 jquery-1.7.2.min.js 文件

2、option 触发 click事件，首先要给 select 加 onchange 事件，因为option 不能直接触发click事件

3、if 判断option选项值时，务必要 使用 $("option:selected",this),后面用索引值index()或val()根据自己的喜好吧