JQuery中的事件 (八.其他用法)-CSDN博客

本文链接：https://blog.csdn.net/NDKHBWH/article/details/65633110

1.绑定多个事件类型bind("mouseover mouseout",...)

  <style>
  div{
	width:100px;
	height:50px;
  }
  .over{
  color:red;
  background:#888;
  } 
  </style>
  <script type="text/javascript">
  $(function(){
     $("div").bind("mouseover mouseout", function(){
        $(this).toggleClass("over");
     });
  })
  </script>
</head>
<body>
<div >滑入.</div>
</body>

2.添加时间命名空间,便于管理

 <style>
	div{width:100px;height:50px;background:#888;color:white;}
 </style>
  <script type="text/javascript">
  $(function(){
	$("div").bind("click.plugin",function(){
	       $("body").append("<p>click事件</p>");
	});
	$("div").bind("mouseover.plugin", function(){
	       $("body").append("<p>mouseover事件</p>");
	});
	$("div").bind("dblclick", function(){
		   $("body").append("<p>dblclick事件</p>");
	});
	$("button").click(function() {
		$("div").unbind(".plugin");  
	})
	/*
		click,mouseover 事件被删除，
	*/
  })
  </script>
</head>
<body>
<div>test.</div>
<button >根据命名空间，删除事件</button>
</body>

3.相同事件名称,不同命名空间执行方法,!执行除去命名空间的点击事件

 <style>
	div{width:100px;height:50px;background:#888;color:white;}
 </style>
  <script type="text/javascript">
  $(function(){
	$("div").bind("click",function(){
	       $("body").append("<p>click事件</p>");
	});
	$("div").bind("click.plugin", function(){
	       $("body").append("<p>click.plugin事件</p>");
	});
	$("button").click(function() {
		  $("div").trigger("click!");    // 注意click后面的感叹号
	});
  })
  </script>
</head>
<body>
<div >test.</div>
<button >根据命名空间，触发事件</button>
</body>