jQuery事件处理

jQuery事件处理

jQuery事件绑定

jQuery事件绑定的方式

  1. eventName(fn)
    • 编码效率略高 部分事件jQuery没实现 不能使用
$('button').click(function(){
    console.log("hello 王二狗")
})
//给button元素绑定点击事件
  1. on(eventName, funcion(){})
    • 编码不方便, 但更通用
$('button').on("click",function(){
    console.log("hello 王二狗")
})
//给button元素绑定点击事件

jQuery事件解除绑定

off方法

  1. 作用:接触绑定事件
  2. 如果不传递参数, 会移除所有的事件
  3. 如果传递一个参数, 会移除所有指定类型的事件
  4. 如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off()
//一个参数
$("button").off("click") //移除所有指定类型的事件
//两个参数
$("button").off("click",test1) //移除所有指定类型的指定事件

jQuery事件冒泡和默认行为

  • 事件冒泡

    • 从目标元素逐级向上传播到根节点的过程
  • 阻止冒泡

    • stopPropagation方法
  • 默认行为

    • 元素的默认行为 例如a元素被点击会打开另外的网页
  • 阻止默认行为

    • preventDefault方法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery事件冒泡和默行为</title>
		<script src="../../../jquery-1.12.4.js"></script>
		<style>
		    *{
		        margin: 0;
		        padding: 0;
		    }
		    .father{
		        width: 200px;
		        height: 200px;
		        background: red;
		    }
		    .son{
		        width: 100px;
		        height: 100px;
		        background: blue;
		    }
		</style>
	</head>
	<body>
		
		<div class="father">
		    <div class="son"></div>
		</div>
		<a href="http://www.baidu.com">注册</a>
		<form action="http://www.taobao.com">
		
		<script type="text/javascript">
			
			$(".son").click(function(event){
				console.log("冒泡")
				// 在子元素中停止事件冒泡,事件不会继续向上传播,所以父元素click方法不会被触发
				event.stopPropagation() //阻止冒泡方法
			})
			
			//阻止默认行为
			$("a").click(function(event){
				alert("哈哈哈哈")
				event.preventDefault() //不会跳转到百度页面
			})
		</script>
	</body>
</html>

jQuery事件自动触发

  • 通过代码控制事件,直接触发事件

trigger方法

  1. 触发事件的同时会触发事件冒泡
  2. 触发事件的同时会触发事件默认行为

triggerHandler方法

  1. 触发事件的同时不会触发事件冒泡
  2. 触发事件的同时不会触发事件默认行为
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery事件自动触发</title>
		<script src="../../../jquery-1.12.4.js"></script>
		<style type="text/css">
			*{
			    margin: 0;
			    padding: 0;
			}
			.father{
			    width: 200px;
			    height: 200px;
			    background: red;
			}
			.son{
			    width: 100px;
			    height: 100px;
			    background: blue;
			}
		</style>
	</head>
	<body>
		<div class="father">
		    <div class="son"></div>
		</div>
		<a href="http://www.baidu.com"><span>注册</span></a>
		
		<script type="text/javascript">
			
		   $(".son").click(function(event){
			   alert("son")
		   })
		   
		   $(".father").click(function () {
		       alert("father");
		   });
		   
		   $("a").click(function(event){
		   			   alert("哈哈哈哈")
		   })
		   
		   //trigger -> 自动触发事件,会触发事件冒泡		   
		   // $(".son").trigger("click");
		   
		   //trigger ->自动触发事件,会触发默认行为
		   //$("a").trigger("click") //会跳转到百度
		   
		   //triggerHandler -> 自动触发事件, 不会触发事件冒泡		   
		   $(".son").triggerHandler("click")
		   
		   //triggerHandler ->自动触发事件, 不会触发默认行为
		   $("a").triggerHandler("click")
		   
		</script>
	</body>
</html>

jQuery自定义事件

  • 设置一个不存在的事件名称来注册事件,通过这个名称还能触发对应的方法
  • 自定义事件条件
    • 事件必须是通过on绑定的
    • 事件必须通过trigger来触发
//.son元素绑定了自定义事件 myClick
$(".son").on("myClick",function(){
    alert("myClick")
})
$(".son").triggerHandler("myClick")

jQuery事件命名空间

  • 解决一个元素绑定多个相同类型的事件
  • 事件命名空间条件
    • 事件是通过on来绑定的
    • 通过trigger触发事件
  • 不带命名空间事件被trigger调用,会触发带命名空间事件
  • 带命名空间事件被trigger调用,只会触发带命名空间事件
  • 下级不带命名空间事件被trigger调用,会冒泡触发上级不带命名空间和带命名空间事件
  • 下级带命名空间事件被trigger调用,不会触发上级不带命名空间事件
  • 下级带命名空间事件被trigger调用,会触发上级带命名空间事件
$(".son").on("click.son",function(){
    alert("click.son")
})

$(".son").on("click.son2",function(){
    alert("click.son2")
})

$(".son").trigger("click.son2")

jQuery事件委托

  • 事件委托的好处
    • 减少监听数量
    • 新增元素自动有事件响应处理
  • 事件委托关键字 delegate

<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery事件委托title>
		<script src="../../../江南jQuery/jQuery基础/js/jquery-1.12.4.js">script>
	head>
	<body>
		<ul>
			<li>第一个lili>
			<li>第二个lili>
			<li>第三个lili>
		ul>
		<button type="button">新增libutton>
		
		<script type="text/javascript">
			//如果通过核心函数找到的元素不止一个 在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
			$("button").click(function(){
				$("ul").append("
  • 我是新的li
  • "
    ) }) $("ul").delegate('li',"click",function(){ console.log($(this).html()) })
    script> body> html>

    jQuery移入移出事件

    • mouseentermouseleave:移动到子元素不会触发事件
    $(".father").mouseenter(function () {
        console.log("移入");
    });
    $(".father").mouseleave(function () {
        console.log("移出");
    });
    
    • mouseovermouseout :移动到子元素会触发事件
    $(".father").mouseover(function(){
        console.log("移入")
    })
    $(".father").mouseout(function(){
        console.log("移出")
    })
    
    • hover :同时监听移入和移出

    • 接收两个函数为参数

      • 第一个参数代表移入时执行的函数
      • 第二个参数代表移出时执行的函数
    $(".father").hover(function(){
        console.log("移入");
    },function(){
        console.log("移出");
    })
    

    你可能感兴趣的:(JavaScript,jquery)