首页

# JS 中绑事件的方式

  1. 行内事件 - 不建议使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    JS :
    <div onclick="fun">
        
    </div>
    JQ: 
    <div onclick="fun">
        
    </div>
    js:
    function(){
        //函数体
    }

  2. 给标签的事件属性添加事件处理函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    JS :
    节点.onclick=function(){}
    解绑：节点.onclick=null;
    JQ：
    节点.click(function(){
        
    });
    //解绑
    节点.unbind("click");
    不一样的地方：JQ将事件属性改为函数，并且去掉on

    缺点：绑定相同类型的事件时，会冲突

  3. 事件监听（官方推荐）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    JS:
    节点.addEventListener("事件类型",事件函数,[true]);//第三个参数可选，指定是冒泡还是捕获，默认是冒泡
    可以给一个元素绑定不同的事件类型，也可以给同一个事件类型绑定不同的事件处理函数
    div.addEventListener("click",fun1=function(){})
    div.addEventListener("click",fun2=function(){})
    div.addEventListener("dbclick",fun1=function(){})
    缺点：
        只支持现代浏览器，在IE6、7中不支持。
    div.attachEvent();
    //解绑
    节点.removeEventListener();

    JQ 中用来绑定事件的新的方式： bind。

    怎么写都不会有冲突，解决了兼容性问题。

    解绑：

    1
    2
    3
    4

    $("div").unbind("click");//解绑所有
    $("div").unbind("click",fun1)//解绑某一个点击事件的处理函数

    语法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    <div></div>
    JQ:
    $("div").bind("不带on的事件类型",事件处理函数);//标准的写法,大部分情况下只需要这一种方式

    //2、假设要给他添加不同的事件处理函数，或事件类型,链式操作
    $("div").bind("click",function(){}).bind("mouseout",function(){});
    //3、还可以改成对象的写法
    $("div").bind({
        "click":function(){},
        "dblclick":function(){
        }
    });
    //4、还可以将多个事件类型写在一块，共用一个事件处理函数
    $("div").bind("click dblclick",function(){});

    JQ 特有事件之：one 事件（一次性事件）

    1
    2
    3
    4
    5
    6
    7

    <div></div>
    JS:
    $("div").one(function(){
        alert("这辈子只会弹一次");
    });

  4. JQ 之特有事件：hover 事件（合成事件）。hover==mouseover+mouseout

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    //二级菜单：鼠标摸到div上，让ul显示，离开则隐藏
    <div>
        <ul></ul>
    </div>
    JQ：
    $("div").hover(函数1，函数2);
    //解释：
    1、函数1表示鼠标摸上去时会触发
    2、函数2表示鼠标离开时触发
    $("div").hover(function(){
        
    },function(){
        
    });

  5. trigger 模拟鼠标点击，模拟人为的点击（使用场景不多）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    <div>111</div>
    JQ:
    $("div").click(function(){
        alert(111);
        //写之前的代码
    });
    //自动帮我点击那个div触发函数
    //原先是必须用户亲手点击了那个div才会触发函数，现在有了trigger后，可以自动触发
    setTimeout(function(){
        $("div").trigger("click");
    },2000);

  6. 解绑事件。以上所有的事件解绑时，通通使用 unbind

    1
    2
    3
    4

    $("div").unbind("click");
    $("div").unbind("click",fun);

# 官方推荐的绑事件的方式 ON

作用：

  1. 普通用法，用法同 bind 一模一样
1
2
3
4

$("div").bind("事件类型",事件函数);
$("div").on("事件类型",事件函数);

  1. 给未来的元素绑事件（由 JS 动态生成的元素）（重点）— 事件委托

    如果用常规的方法给未来的元素绑事件：

  2. 使用行内事件

    1
    2
    3

    $("div").append($('<p onclick="fun(this)"></p>'));

  3. 生成元素后再重新绑定一次。现在使用 ON 可以一步到位：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    $("父元素").on("事件类型","要绑定事件的元素",事件处理函数);
    原本是给li绑定，现在将li标签置后，将父元素写前面。
    $("ul").on("click","li",function(){});

    含义：将原本发生在li标签上的事情冒泡给父级，让父级来监听子集身上发生的事情。即子元素的事件委托给父级来监听。

    注意：父元素可以写任意的祖先元素，即不一定是直接父级。

    on绑定的事件解绑：
    使用off
    $("div").off();
    $("div").off("click");
    $("div").off("click",fun1);

# event 对象

event 对象是用来记录事件发生时的所有细节 - 黑盒子，行车记录仪。

注意：不同的事件类型的 event 对象的属性有所不同。

直接通过 console.log (event) 即可

JS 的 event 和 JQ 的 event 几乎一致。JQ 的 event 没有兼容性问题。

1
2
3
4
5
//之前的写法
odiv.onclick=function(e){
    //火狐需要写成window.event(曾经)
    var e=e||window.event; 
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$("div").click(function(event){
    console.log(event);
});
回顾：
1、写在那里：直接写在事件处理函数的参数中
2、如何使用：直接在事件处理函数中使用
3、何时生效：事件触发时，即执行了事件处理函数时
4、何时销毁：事件处理函数执行完毕后

常用的event的属性和方法：
1、坐标
	可视点坐标：
	e.clientX;// 鼠标点击的那个点到浏览器可视范围的x坐标
	e.clientY;//鼠标点击的那个点到浏览器可视范围的Y坐标
	绝对坐标点：(JS也可用)
    e.pageX;
	e.pageY;
2、键盘、鼠标值
	e.keyCode  键盘
	e.which    鼠标按键：1左，2中，3表示右
3、事件冒泡和捕获
	e.stopPropagation();
4、阻止默认事件
	e.preventDefault();
小技巧：如果要同时阻止冒泡+默认事件，可以直接写return false；

# 跟位置有关的方法

  1. 元素的绝对距离（到定位父级的距离）
    JQ 中获取的距离其实就是绝对距离，即 JQ 帮我们封装好了那个 getPos ();

    1
    2
    3
    4
    5
    6
    7
    8

    JS：odiv.offsetLeft;//到定位父级的距离
    	odiv.offsetTop;//
    JQ:求出就是绝对距离，跟定位父级无关
    //$("div").offset()就相当于是之前我们写的getPos().top
    $("div").offset().left;//该元素到浏览器最左侧（到HTML）的绝对距离
    $("div").offset().top;//最顶部的绝对距离

  2. 元素的可见宽、占位宽

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    JS:
    样式宽：div.style.width
    	 div.style.height
    JQ： $("div").width();
    	 $("div").height();
    JS:
    可视宽： div.clientWidth
    		div.clientHeight
    JQ:		$("div").innerWidth();
    		$("div").innerHeight();
    JS：
    占位宽： div.offsetWidth
    		div.offsetHeight
    JQ:     $("div").outerWidth();
    		$("div").outerHeight();

  3. 元素的滚动条相关的

    1
    2
    3
    4
    5
    6
    7
    被卷去的高度：
    JS：document.scrollTop;
    JQ:$(document).scrollTop();

    被卷去的宽度
    JS：document.scrollLeft;
    JQ:$(document).scrollLeft();

# on - 事件委托实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="" src="js/jquery-3.5.1.min.js"></script>
    <style type="text/css">
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="text"  name="">
    <button>添加新闻</button>
    <ul>
        <!-- Kong -->
        <!-- <li>111</li> -->
    </ul>
    <script>
    $("button").on("click",function(){
        var $text=$("input").val();
        $("ul").append($("<li>"+$text+"</li>"));
    });

    // 需求：要给li标签绑定事件，点击li标签后，加高亮
    $("body").on("click",'li',function(){
        // this的指向依然不变，还是指向发生事件的元素本身
        $(this).toggleClass('red');
    });
    </script>
</body>
</html>

# jq 拖拽实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="" src="js/jquery-3.5.1.min.js"></script>
    <style type="text/css">
        #box{
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 10px;
            top: 10px
        }
    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <script>
    $("#box").on("mousedown",function(event) {
        // 鼠标点击时，就要确定disx,和disy
        var disx=event.clientX-$(this).offset().left;
        var disy=event.clientY-$(this).offset().top;
        // 鼠标拖拽时
        $(this).on("mousemove",function(e){
            console.log(e.clientX);
            $(this).css({
                left:e.clientX-disx+"px",
                top:e.clientY-disy+"px",
            });

        });
        // 鼠标抬起时
        $(this).on("mouseup",function(){
            $(this).off('mousemove');
        })

        console.log(disx);
    });
    </script>
</body>
</html>

# 小球碰壁运动实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
    <style>
        .box {
            width: 800px;
            height: 500px;
            border: 5px solid #000;
            border-image: linear-gradient(skyblue, pink) 1 10;
            position: relative;
        }

        .ball {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-image: linear-gradient(pink, lightblue);
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="ball"></div>
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            var $box = $(".box");
            var $ball = $(".ball");
            var w = $(".box").innerWidth();
            var h = $(".box").innerHeight();
            var speedX = speedY = 5;
            setInterval(function(){
                var left = $ball.position().left;
                var top = $ball.position().top;
                left += speedX
                top += speedY
                if (left >= w - $ball.outerWidth() || left <= 0) {
                    speedX *= -1
                }
                if (top >= h - $ball.outerHeight() || top <= 0) {
                    speedY *= -1
                }
                $ball.css("left", left + "px")
                $ball.css("top", top + "px")
            },8)
        })
    </script>
</body>

</html>

# 导航平滑滚动实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .navBar {
            height: 42px;
        }

        #nav {
            overflow: hidden;
            background-color: #fff;
            width: 100%;
            padding: 10px 20px;
            margin: 0 auto;
            border-bottom: 1px solid blue;
        }

        #nav li {
            float: left;
            border-right: 1px solid blue;
            list-style: none;
            padding: 0 20px;
            border-left: 1px solid blue;
            margin-left: -1px;
            cursor: pointer;
        }

        .scroll {
            border: 1px solid red;
            height: 400px;
            margin: 20px
        }

        /*让nav固定的样式*/
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div><img src="images/head.jpg"></div>
    <div><img src="images/banner3.jpg"></div>
    <div class="navBar">
        <ul id="nav">
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
        </ul>
    </div>
    <div class="wrapper">
        <div class="scroll">导航1</div>
        <div class="scroll">导航2</div>
        <div class="scroll">导航3</div>
    </div>
    <div>
        <img src="images/foot.jpg">
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        // 这里实现代码
        $(function () {
            var $nav = $("#nav");
            var $t = $nav.offset().top;
            var $d = $(document);
            // 滚动条的吸附
            $d.scroll(function () {
                $d.scrollTop() >= $t ? $nav.addClass("fixed") : $nav.removeClass("fixed");
            });
            // 导航条的点击事件
            $("#nav li").click(function () {
                $('body,html').animate({ scrollTop: $(".wrapper .scroll:eq(" + $(this).index() + ")").offset().top - 45 }, 800);
            })
        });
    </script>
</body>

</html>

# 游戏排序实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li {
            margin-bottom: 3px;
        }

        input {
            margin: 0 3px
        }

        ul,
        ol {
            padding-left: 20px;
        }
    </style>
    <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
    <h4>游戏排序</h4>
    <p>输入你喜欢玩的游戏(每输入一次点击一次确定)：</p>
    <div>
        <input type="text" name="">
        <input type="button" value="确定" name="btn">
    </div>
    <ol>
        <!-- <li>今晚吃鸡&nbsp;&nbsp;<input type="button" name="up" value="↑"><input type="button" name="down" value="↓"></li> -->
    </ol>
    <script>
        // 这里写JQ代码
        $(function () {
            var $text=$('input[type="text"]');
            var $btn=$('input[value="确定"]');
            var $ol=$("ol")
            // 给确定按钮绑定单击事件
            $btn.click(function(){
                var $val=$text.val();
                // 文本框内容的非空判断
                if(!$val){
                    alert("您输入的游戏不能为空！");
                    return;
                }
                $ol.append('<li>'+$val+'&nbsp;&nbsp;<input type="button" name="up" value="↑"><input type="button" name="down" value="↓"></li>')
                $text.val("");
            });
            // 给向上按钮绑定单击事件
            $ol.on("click",'input[value="↑"]',function(){
                    $(this).parent().prev().before($(this).parent())
            })
            //给向下按钮绑定单击事件
            $ol.on("click",'input[value="↓"]',function(){
                    $(this).parent().next().after($(this).parent())
            })
        })
    </script>
</body>

</html>

# 拖动到底部触发事件实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #notice {
      display: inline-block;
      margin-bottom: 12px;
      border-radius: 5px;
      width: 600px;
      padding: 5px;
      border: 2px #7FDF55 solid;
    }

    #rules {
      width: 600px;
      height: 130px;
      padding: 5px;
      border: #2A9F00 solid 2px;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <form name="registration">
    <p>
      <textarea id="rules">
        众所周知：陌陌APP是一款约泡神器。所以您得知道以下协议：

        北京陌陌科技有限公司（以下简称“陌陌科技”）在此特别提醒您（用户）在注册成为用户之前，请认真阅读本《用户协议》（以下简称“协议”），确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。

本协议约定陌陌科技与用户之间关于“陌陌”软件服务（以下简称“服务”）的权利义务。“用户”是指注册、登录、使用本服务的个人。本协议可由陌陌科技随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本网站查阅最新版协议条款。在陌陌科技修改协议条款后，如果用户不接受修改后的条款，请立即停止使用陌陌科技提供的服务，用户继续使用陌陌科技提供的服务将被视为接受修改后的协议。

一、帐号注册
1、用户在使用本服务前需要注册一个“陌陌”帐号。“陌陌”帐号应当使用手机号码绑定注册，请用户使用尚未与“陌陌”帐号绑定的手机号码，以及未被陌陌科技根据本协议封禁的手机号码注册“陌陌”帐号。陌陌科技可以根据用户需求或产品需要对帐号注册和绑定的方式进行变更，而无须事先通知用户。

2、“陌陌”系基于地理位置的移动社交产品，用户注册时应当授权陌陌科技公开及使用其地理位置信息方可成功注册“陌陌”帐号。故用户完成注册即表明用户同意陌陌科技提取、公开及使用用户的地理位置信息。如用户需要终止向其他用户公开其地理位置信息，可自行设置为隐身状态。

3、鉴于“陌陌”帐号的绑定注册方式，您同意陌陌科技在注册时将使用您提供的手机号码及/或自动提取您的手机号码及自动提取您的手机设备识别码等信息用于注册。

4、在用户注册及使用本服务时，陌陌科技需要搜集能识别用户身份的个人信息以便陌陌科技可以在必要时联系用户，或为用户提供更好的使用体验。陌陌科技搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；陌陌科技同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束。</textarea>
    </p>
    <p>
      <input type="checkbox" name="accept" id="agree" disabled="disabled" />
      <label for="agree">别说了，我同意！</label>
      <input type="submit" id="nextstep" value="下一步" disabled="disabled" />
    </p>
  </form>
  <script src="jquery-3.3.1.min.js"></script>
  <script>
    $(function () {
      $("#rules").scroll(function () {
        if ($(this).scrollTop() + $(this).outerHeight() >= $(this)[0].scrollHeight) {
          $("#agree").removeAttr("disabled");
        };
        $("#agree").click(function () {
          if ($("#agree")[0].checked) {
            $("#nextstep").removeAttr("disabled");
          }
        })
      })
    })
  </script>
</body>

</html>

更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

tz 微信支付

微信支付

tz 支付宝

支付宝