jQuery事件处理

jQuery学习

创建时间:2020-07-16 16:55

字数:1.5k 阅读:

评论:

jQuery事件处理

jQuery事件处理

事件绑定

eventName(fn)：编码效率略高/ 部分事件jQuery没有实现,所以不能添加
1
2
3
$("button").click(function () {
alert("hello lnj");
});

on(enentName,fn)：编码效率略低/ 所有js事件都可以添加

1
2
3

$("button").on("click", function () {
	alert("hello click1");
 });

注意：都可以添加多个相同或者不同类型的事件,不会覆盖

事件解绑

off方法如果不传任何参数，会移除所有的事件
1
$("button").off();
off方法如果传递一个参数, 会移除所有指定类型的事件
1
$("button").off("click");
off方法如果传递两个参数, 会移除所有指定类型的指定事件
1
2
//这里的test1指的是构造函数
$("button").off("click", test1);

事件冒泡和默行为

什么是事件冒泡？
指的是下级对上级，子元素对父元素的响应事件，即子元素的点击会出现父元素点击的响应

如何阻止事件冒泡？
1、在子元素中返回false

<script>
$(".son").click(function(){
	alert("son");
	return false;
});
 </script>

2、参数方法

<script>
$(".son").click(function(event){
	alert("son");
	event.stopPropagation();
});
</script>

什么是默认行为？
例子：加入需要提交，默认会跳转到指定界面；

如何阻止默认行为？
1、相应的阻止事件内部，返回false
2、参数方法

<script>
$("a").click(function (event) {
	alert("弹出注册框");
	event.preventDefault();
});
</script>

事件自动触发

时间冒泡
1、trigger: 如果利用trigger自动触发事件,会触发事件冒泡
2、triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
默认行为
1、trigger: 如果利用trigger自动触发事件,会触发默认行为
2、triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
注意：
上面的规则有一种特殊情况，就是标签，一般利用标签来解决
1
2
//把<span>放到<a>中
<a href="http://www.baidu.com"><span>注册</span></a>
自定义事件

满足条件：
1、事件必须是通过on绑定的
2、事件必须通过trigger来触发

  <script>
	$(function(){
		$(".son").on("myClick", function () {
                alert("son");
           });
     	 $(".son").triggerHandler("myClick");
	});
</script>

事件命名空间

增加代码的可阅读性

<script>
    $(function () {
       $(".son").on("click.zs", function () {
              alert("click1");
        });
       $(".son").on("click.ls", function () {
              alert("click2");
        });
       // $(".son").trigger("click.zs");
       $(".son").trigger("click.ls");
      });
</script>

事件命名空间面试题

1利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
2、利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

实例：
（1）注释过的如果工作，它只会触发行为1和3，即有相同命名空间的会触发事件冒泡
（2）对于未注释的工作，会全部触发

<script>
     $(function () {
		//行为1
          $(".father").on("click.ls", function () {
              alert("father click1");
          });
          //行为2
          $(".father").on("click", function () {
              alert("father click2");
          });
          //行为3
          $(".son").on("click.ls", function () {
              alert("son click1");
          });
          // $(".son").trigger("click.ls");
          $(".son").trigger("click");
      });
  </script>

事件委托

什么是事件委托？
请别人帮忙做事情, 然后将做完的结果反馈给我们

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("ul").append("<li>我是新增的li</li>");
            })
            $("ul").on("click", "li", 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>

注意：
让ul帮li监听click事件之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件；之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁。

事件委托练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
        }
        .login{
            width: 522px;
            height: 290px;
            margin: 100px auto;
            position: relative;
        }
        .login>span{
            width: 50px;
            height: 50px;
            /*background: red;*/
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("a").click(function () {
                var $mask = $("<div class=\"mask\">\n" +
                    "    <div class=\"login\">\n" +
                    "        <img src=\"images/login.png\" alt=\"\">\n" +
                    "        <span></span>\n" +
                    "    </div>\n" +
                    "</div>");
                // 添加蒙版
                $("body").append($mask);
                $("body").delegate(".login>span", "click", function () {
                    // 移除蒙版
                    $mask.remove();
                });
                return false;
            });
        });
    </script>
</head>
<body>
<!--<div class="mask">-->
    <!--<div class="login">-->
        <!--<images src="images/login.png" alt="">-->
        <!--<span></span>-->
    <!--</div>-->
<!--</div>-->
<a href="http://www.baidu.com">点击登录</a>
<div>我是南邮石磊</div>
</body>
</html>

移入移出事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移入移出事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".father").hover(function () {
                console.log("father被移入了");
            },function () {
                console.log("father被移出了");
            });

        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2113132982@qq.com

jQuery事件处理

jQuery事件处理

事件绑定

事件解绑

事件冒泡和默行为

事件自动触发

自定义事件

事件命名空间

事件命名空间面试题

事件委托

事件委托练习

移入移出事件