WEB基础之：jQuery 事件

jQuery 事件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>事件不生效</title>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $('.c1').click(function () {
            $(this).css('background-color', 'lightskyblue')
        })
    </script>
    <style>
        .c1 {
            background-color: lightcoral;
            width: 100px;
            height: 100px;
            margin: 10px 20px;
            border: 4px lightblue solid;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

1. 页面载入

1.1 jQuery 入口函数

$(document).ready(function(){
    // code
});
// or
$(function(){
    // code
});

// 等待网页中的DOM结构加载完毕后执行。
<script src="jquery-3.5.1.js"></script>
<script>
    $(document).ready(function () {
    $('.c1').click(function () {
        $(this).css('background-color', 'lightskyblue')
    });
});
</script>
// 若后面又写入了新的jQuery入口函数，不会覆盖原先的
<body>
    <script>
        $(function (){
            alert('new function');
        });
    </script>
</body>

1.2 JavaScript 入口函数:

window.onload = function () {
    // code
}

//等待所有数据加载完成后执行。
<script>
    window.onload = function () {
    $('.c1').click(function () {
        $(this).css('background-color', 'lightskyblue')
    });
}
</script>
// 若后面又写入了新的JS入口函数，会覆盖原先的
<body>
    <script>
        window.onload = function () {
            alert('new function')
    }
    </script>
</body>

1.3 jQuery 入口函数与 JavaScript 入口函数的区别：

	$(document).ready()	window.onload
执行条件	只需等待网页中的DOM结构加载完毕，就能执行所包含代码。	必须等待网页全部加载完毕（包括图片等），再执行所包含的代码。
执行次数	可以执行多次，且不会覆盖上一次的执行	只能执行一次，如果执行多次，会覆盖上一次的执行。
自执行函数	\	$(function () { // code });

2. 事件处理

示例

<body>
    请选择：
    <select name="city" id="city">
        <option value="city1">city1</option>
        <option value="city2">city2</option>
        <option value="city3">city3</option>
    </select>
    <div id="i1"></div>
    <p>Hello World!</p>
    <button id="old">.trigger("focus")</button>
    <button id="new">.triggerHandler("focus")</button><br/><br/>
    <input type="text" value="To Be Focused"/>
    <input type="text"/>
    <script src="jquery-3.5.1.js"></script>
</body>

click([[data],fn]): 触发每一个匹配元素的click事件。

// click触发事件。
$("[value='city1']").click(function () {
    $('#i1').css('background-color','lightgreen');
});

on(events,[selector],[data],fn): 在选择元素上绑定一个或多个事件的事件处理函数。

// on触发事件，off取消option标签中的click事件。
var foo = function () {
    $(this).css('background-color', 'lightcoral');
};
$("body").on("click", "option", foo);

off(events,[selector],[fn]): 在选择元素上移除一个或多个事件的事件处理函数。
- ```
$("body").off("click", "option", foo);
```

one(type,[data],fn): 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

// one触发事件，只改变div颜色一次
$("[value='city2']").one('click', function () {
    $('#i1').css('background-color', 'lightgoldenrodyellow')
})

trigger(type,[data]): 这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个’submit’，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。
- 所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。
- ```
// trigger触发事件
$("p").click(function (event, message1, message2) {
    alert(message1 + ' ' + message2);
});
// 加载后页面下点击事件时，message1和message2是undefined类型
// 在调试bar的console中用下面语句触发时，"message1"指向"Hello"，"message2"指向"World!"
// $("p").trigger('click', ["Hello","World!"]);
```
triggerHandler(type, [data]): 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。这个方法的行为表现与trigger类似，但有以下三个主要区别：
- 他不会触发浏览器默认事件。
- 只触发jQuery对象集合中第一个元素的事件处理函数。
- 这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
- ```
// trigger与triggerHandler
// 点击显示2次
// $("#old").click(function(){
//     $("input").trigger("focus");
// });
// 点击显示1次
$("#new").click(function(){
    $("input").triggerHandler("focus");
});
$("input").focus(function(){
    $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
```

input事件绑定

/*
  * on('input', fun)能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，在内容修改后立即被触发，不像onchange事件需要失去焦点才触发.
  * on('input', fun)事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
  * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
  * */
$('input').on('input', function () {
    console.log($(this).val());
});

3. 事件切换

示例

<head>
	<style>
        #i1 {
            border: black solid 4px;
            background-color: lightcyan;
            width: 100px;
            height: 100px;
        }
        #i2 {
            border: black solid 4px;
            background-color: lightskyblue;
            width: 50px;
            height: 50px;
            position: relative;
            margin: 0 auto;
            bottom: -21px;
        }
    </style>
</head>
<body>
    <div id="i1">
        <div id="i2"></div>
    </div>
</body>

hover([over,]out): 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件。
- ```
$('#i2').hover(function () {
            $('#i2').css('background-color', 'lightpink')
        }, function () {
            $('#i2').css('background-color', 'lightskyblue')
        });
```
toggle([speed],[easing],[fn]): 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
- speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast；
- ``easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"`
- ```
$('#i2').toggle(1000);
```

4. 事件

示例

<head>
	<style>
        #i1 {
            border: black solid 4px;
            background-color: lightcyan;
            width: 100px;
            height: 100px;
        }
        #i2 {
            border: black solid 4px;
            background-color: lightskyblue;
            width: 50px;
            height: 50px;
            position: relative;
            margin: 0 auto;
            bottom: -21px;
        }
    </style>
</head>
<body>
    <p><input type="text" value="text"/> <span>text.</span></p>
    <hr />
    请选择：
    <select name="myColor" id="myColor">
        <option value="lightseagreen">lightseagreen</option>
        <option value="lightblue" selected="selected">lightblue</option>
        <option value="lightcoral">lightcoral</option>
    </select>
    <div id="i1">
        <div id="i2"></div>
    </div>
    <img src="images/girl.jpg" style="width: 300px; color: lightpink"/>
    <form method="get">
        <input name="username" type="text" value="username">
        <input name="password" type="password" value="password">
        <input name="submit" type="submit">
    </form>
    <script src="jquery-3.5.1.js"></script>
<body>

focus([[data],fn]): 当元素获得焦点时触发

$("[type='text']").focus(function () {
    $(this).css('background-color','lightsalmon');
});

blur([[data],fn]): 当元素失去焦点时触发

$("[type='text']").blur(function () {
    $(this).css('background-color', 'white');
});

change([[data],fn]): 当元素的值发生改变时触发

$("select").change(function () {
    $("#i1").css('background-color', 'lightgreen');
});

dblclick([[data],fn]): 当双击元素时会触发

$('#i1').dblclick(function () {
    alert('dblclict()')
});

focusin([data],fn): 当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
- ```
$('p').focusin(function () {
    $(this).find('span').css('display', 'inline').fadeOut(1000);
});
```
focusout([data],fn): 当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
- ```
$('p').focusout(function f() {
    $(this).find('span').css('display', 'inline').fadeOut(3000);
});
```

keydown([[data],fn]): 当键盘或按钮被按下时，发生 keydown 事件。

$('input').keydown(function (e) {
    switch(e.keyCode) {
        case e.keyCode:
            console.log('keydown: ' + e.keyCode);
            break;
    }
});

keypress([[data],fn]): 当键盘或按钮被按下时，发生 keypress 事件。

$('input').keypress(function (e) {
    switch(e.keyCode) {
        case e.keyCode:
            console.log('keypress: ' + e.keyCode);
            break;
    }
});

keyup([[data],fn]): 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

$('input').keyup(function (e) {
    switch(e.keyCode) {
        case e.keyCode:
            console.log('keyup: ' + e.keyCode);
            break;
    }
});

mousedown([[data],fn]): 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
- ```
$('#i1').mousedown(function () {
    $('img').slideToggle();
});
```
mouseenter([[data],fn]): 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
- ```
$('#i2').mouseenter(function () {
    $('img').slideToggle();
});
```
mouseleave([[data],fn]): 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
- ```
$('#i2').mouseleave(function f() {
    $('img').slideToggle();
});
```
mousemove([[data],fn]): 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象。
- ```
$(document).mousemove(function (e) {
    $('span').text(e.pageX + ','+ e.pageY);
});
```
mouseout([[data],fn]): 当鼠标指针从元素上移开时，发生 mouseout 事件。与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
- ```
$('#i2').mouseout(function () {
    $(this).css('background-color','lightcoral');
});
```
mouseover([[data],fn]): 当鼠标指针位于元素上方时，会发生 mouseover 事件。与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
- ```
$('#i2').mouseover(function () {
    $(this).css('background-color','lightsalmon');
});
```
mouseup([[data],fn]): 当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
- ```
$('#i2').mouseup(function () {
    $(this).css('background-color','lightpink');
});
```
resize([[data],fn]): 当调整浏览器窗口的大小时，发生 resize 事件。
- ```
$(window).resize(function () {
    alert('Window resize.');
});
```
scroll([[data],fn]): 当用户滚动指定的元素时，会发生 scroll 事件。
- ```
$(window).scroll(function () {
    console.log('window scroll!');
});
```
select([[data],fn]): 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
- ```
$(":text").select(function () {
    console.log('text select');
});
```
submit([[data],fn]): 当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
- ```
$("form:first").submit(function () {
    // 阻止表单提交:
    return false;
});
```

5. 阻止后续事件执行

return false;

e.stopPropagation();

<head>
    <!--<meta http-equiv="refresh" content="2;URL="2s后跳转到指定的URL"> -->
    <!--指定文档的编码类型-->
    <meta http-equiv="content-Type" charset="UTF-8">
    <!--告诉IE以最高级模式渲染文档-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="description" content="HTML学习">
    <title>阻止事件冒泡</title>
    <style>
        #i1 {
            border: black solid 4px;
            background-color: lightcyan;
            width: 100px;
            height: 100px;
        }
        #i2 {
            border: black solid 4px;
            background-color: lightskyblue;
            width: 50px;
            height: 50px;
            position: relative;
            margin: 0 auto;
            bottom: -21px;
        }
    </style>
</head>
<body>
    <div id="i1">
        <div id="i2"></div>
    </div>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $('#i1').click(function () {
            alert('father label.');
        });
        $('#i2').click(function (e) {
            alert('child label.');
            // return false;
            // or 
            e.stopPropagation();
        });
    </script>
</body>

6. 事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <!--<meta http-equiv="refresh" content="2;URL="2s后跳转到指定的URL"> -->
  <!--指定文档的编码类型-->
  <meta http-equiv="content-Type" charset="UTF-8">
  <!--告诉IE以最高级模式渲染文档-->
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="description" content="HTML学习">
  <title>Title</title>
</head>
<body>
<div id="i1">
  <button class="c1">Btn</button>
</div>

<script src="jquery-3.5.1.js"></script>
<script>
  // 事件委托：没有利用父标签去捕获子标签的事件，只能第一个标签可以执行以下动作。
  // HTML文件已经加载完成，新添加的按钮并没有执行绑定动作。
  // 可以将绑定事件委托给父元素标签，任意子元素标签添加进来，都可以触发绑定动作。
  $('.c1').on('click', function () {
      const btn = document.createElement('button');
      $(btn).text('Btn');
      $(btn).addClass('c1');
      $(this).after(btn);
  });

  // 使用内部插入实现事件委托
  $('#i1').on('click', function () {
      const btn = document.createElement('button');
      $(btn).text('Btn');
      $(btn).addClass('c1');
      $(this).append(btn);
  });

  // 使用外部插入实现事件委托
  $('#i1').on('click', '.c1', function () {
      const btn = document.createElement('button');
      $(btn).text('Btn');
      $(btn).addClass('c1');
      $(this).after(btn);
  });

  // 使用clone实现事件委托
  $("#i1").on('click', '.c1', function () {
      console.log($(this));   // selector存在时，"$(this)"表示'button.c1'；不存在，则表示 "div#i1";
      const  btnClone = $(this).clone();
      $(this).after(btnClone);
  });

</script>
</body>
</html>

posted @ 2021-02-28 17:02 f_carey 阅读(7) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

f_carey

个人学习笔记，文章欢迎转发，愿与各位师傅一起学习交流。