06- jQuery事件

最新推荐文章于 2023-01-23 15:56:00 发布

guardwhy

最新推荐文章于 2023-01-23 15:56:00 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/111515919

版权

4.4.1 事件绑定

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件绑定</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>按钮</button>
<script type="text/javascript">
  $(function (){
	/*
	可以添加多个相同或者不同类型的事件,不会覆盖
	*/
	$("button").click(function (){
	  alert("hello jQuery!!!");
	});

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

	$("button").mouseleave(function (){
	  alert("移出鼠标");
	});
	// 移入鼠标
	$("button").mouseenter(function (){
	  alert("鼠标移入！！！");
	});
  });
</script>
</body>
</html>

执行结果

4.4.2 事件解绑

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件绑定移除</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>按钮</button>
<script type="text/javascript">
  $(function (){
    function Func1(){
      alert("hello jquery!!!");
	}
	function Func2(){
      alert("hello guardwhy!!!");
	}
	// 1.绑定操作
	$("button").click(Func1);
    $("button").click(Func2);

    /*$("button").mouseleave(function (){
      alert("移出事件...");
	});
    $("button").mouseenter(function (){
      alert("移入事件...");
	});*/

    // 2.1 off方法如果不传递参数, 会移除所有的事件
	// $("button").off();

    // 2.2 off方法如果传递一个参数, 会移除所有指定类型的事件
	// $("button").off("click");

    // 2.3 off方法如果传递两个参数, 会移除所有指定类型的指定事件
	$("button").off("click", Func1);
  });
</script>
</body>
</html>

4.4.3 阻止事件冒泡

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery事件冒泡和默行为</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.div1{
		width: 200px;
		height: 200px;
		background: green;
	}
	.div2{
		width: 100px;
		height: 100px;
		background: rebeccapurple;
	}
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="div1">
  <div class="div2"></div>
</div>
<a href="https://www.icourse163.org/">注册中国大学MOOC</a>
<script type="text/javascript">
  $(function (){
	// 1.阻止冒泡事件
	/*$(".div2").click(function (event){
	  alert("div2");
	  // 1.1 方式
	  // return false;
	  event.stopPropagation();
	});
	$(".div1").click(function (){
	  alert("div1");
	})*/

	// 2.阻止默认行为
	$("a").click(function (event){
	  alert("注册个人信息");
	  // 2.1 方法
	  // return false;
	  event.preventDefault();
	});
  });
</script>
</body>
</html>

执行结果

4.4.4 事件自动触发

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery事件自动触发</title>
  <style type="text/css">
      *{
          margin: 0;
          padding: 0;
      }
      .div1{
          width: 200px;
          height: 200px;
          background: green;
      }
      .div2{
          width: 100px;
          height: 100px;
          background: rebeccapurple;
      }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="div1">
  <div class="div2"></div>
</div>
<a href="https://www.icourse163.org/"><span>注册中国大学MOOC</span></a>
<script type="text/javascript">
  $(function (){
    /*
	trigger: 如果利用trigger自动触发事件,会触发事件冒泡.
	triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡.
	*/
    $(".div2").click(function (event){
      alert("div2子类元素");
	});
    $(".div1").click(function (){
      alert("div1父类元素");
	});

    // $(".div2").trigger("click");
	// $(".div2").triggerHandler("click");

	// 2.超链接自动触发事件
	$("span").click(function (){
	  alert("超链接...")
	});
	// 2.1 自动触发
	$("span").trigger("click");
  });
</script>
</body>
</html>

4.4.5 自定义事件

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery自定义事件</title>
  <style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.div1{
		width: 200px;
		height: 200px;
		background: green;
	}
	.div2{
		width: 100px;
		height: 100px;
		background: gray;
	}
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
	/*
	想要自定义事件, 必须满足两个条件
	1.事件必须是通过on绑定的
	2.事件必须通过trigger来触发
	*/
	$(function (){
      $(".div2").on("myClick", function (){
        alert("jquery自定义事件");
      });
      $(".div2").trigger("myClick");
	});
  </script>
</head>
<body>
<div class="div1">
  <div class="div2"></div>
</div>
</body>
</html>

执行结果

4.4.6 事件命名空间

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery命名空间</title>
  <style type="text/css">
      *{
          margin: 0;
          padding: 0;
      }
      .div1{
          width: 200px;
          height: 200px;
          background: green;
      }
      .div2{
          width: 100px;
          height: 100px;
          background: gray;
      }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    /*
	事件的命名空间有效, 必须满足两个条件
	1.事件必须是通过on绑定的
	2.事件必须通过trigger来触发
	*/
    $(function (){
      $(".div2").on("click.curry", function (){
        alert("jquery事件的命名空间1");
      });
      $(".div2").on("click.james", function (){
        alert("jquery事件的命名空间2");
      });

      $(".div2").trigger("click.james");
    });
  </script>
</head>
<body>
<div class="div1">
  <div class="div2"></div>
</div>
</body>
</html>

执行结果

4.4.7 事件委托

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery事件委托</title>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    /*
	事件委托: 请别人帮忙做事情, 然后将做完的结果返回
	*/
    $(function (){
      $("button").click(function (){
        $("ul").append("<li>新增的li</li>");
	  });
      /*
	  以下代码的含义, 让ul帮li监听click事件
	  之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件之所以this是li。
	  是因为点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul。
	  ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁。
	  */
	  $("ul").delegate("li", "click", function (){
	    // 输出结果
		console.log($(this).html());
	  })
    });
  </script>
</head>
<body>
<ul>
  <li>第1个li</li>
  <li>第2个li</li>
  <li>第3个li</li>
</ul>
<button>新增一个li</button>
</body>
</html>

执行结果

4.4.8 移入移出事件

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery移入移出事件</title>
  <style type="text/css">
      *{
          margin: 0;
          padding: 0;
      }
      .div1{
          width: 200px;
          height: 200px;
          background: green;
      }
      .div2{
          width: 100px;
          height: 100px;
          background: gray;
      }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">

    $(function (){
      /*
	   子元素被移入移出不会触发父元素的事件
	  */

	  /*
		$(".div1").hover(function (){
		  console.log("div1被移入了..");
		}, function (){
		  console.log("div1被移出了");
		})
	  */
	  $(".div1").hover(function (){
	    // 输出结果
		console.log("div1被移入移出了.....");
	  });
    });
  </script>
</head>
<body>
<div class="div1">
  <div class="div2"></div>
</div>
</body>
</html>