jQuery事件绑定与解绑的方式-优快云博客

本文链接：https://blog.youkuaiyun.com/YYxiaobao0726/article/details/88202270

本文深入讲解了jQuery中事件绑定的两种方法：eventName(fn)和on(eventName,fn)，并对比了它们的优缺点，同时提供了代码示例，展示了如何为同一个元素绑定多个事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery绑定事件的方式很简单，有两种。其优异点都在下面的注释中做好了，请看下面的代码吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件绑定</title>
    <script src="js/jquery.js"></script>
   	<script>
   		$(function(){
            /*
            jQuery中有两种绑定事件方式
            1.eventName(fn)
            编码效率高/部分事件jQUery没有实现，所以不能添加
            2.on(eventName,fn)
            编码效率低/所有js事件都可以添加



            注意点:
            可以添加多个相同或者不同的事件，不会覆盖

            */
            $("button").click(function(){
                alert("hello world1")
            });
            $("button").click(function(){
                 alert("hello 1234")
            });
            $("button").mouseleave(function(){
                 alert("hello mouseleave")
            });
            $("button").mouseenter(function(){
                 alert("hello mouseenter")
            });

            // $("button").on("click",function(){
            //     alert("hello world2")
            // })

			// off方法如果不传递参数，会移除所有的事件
			// off方法如果传递一个参数，会移除所有指定类型的事件
			// off方法如果传递两个参数，会移除所有指定类型的指定事件
        })
   	</script>
</head>
<body>
    <button>我是按钮</button>
</body>
</html>