11.jQuery—事件和筛选器方法

2022-09-01 22:04:58

一、事件
二、事件冒泡
- 1、阻止事件冒泡
三、事件绑定和移除
四、页面载入
五、表单事件

一、事件

1、事件和事件流

HTML和js的交互是通过事件驱动来实现的，事件流描述的就是页面接受事件的顺序，“DOM2级事件”规定的事件流包括三个阶段：（1）事件捕获阶段；（2）处于目标阶段；（3）事件冒泡阶段。

2、绑定事件的两种方式：

<script src="jquery-3.1.1.js"></script>
    <script>
        //方式一
        $(‘#d1‘).click(function(){
            $(this).css({‘background-color‘:‘green‘});
        })
        //方式二
        $(‘#d1‘).on(‘click‘, function(){
            $(this).css({‘background-color‘:‘green‘});
        })
    </script>

3、常用事件：

click(function(){}) 鼠标单击触发
dbclick(function(){}) 鼠标双击触发
hover(function(){})
focus(function(){}) 鼠标聚焦触发事件
blur(function(){}) 鼠标失焦触发
change(function(){}) 内容发生变化，input等
keydown(function(){}) 键盘按下触发
keyup(function(){}) 键盘弹起触发
mouseover(function(){}) 鼠标移动触发
mouseenter(fucntion(){}) 鼠标进入触发

mouseover和mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者子标签时会连续触发，mouseenter事件不敢管有没有子标签只触发一次，表示鼠标进入这个标签。

mouseover示例：

4、键盘按下和抬起

keydown和keyup事件（键盘按下和抬起事件，还有一些其他的key事件），如：按下shift实现批量操作。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keydown和keyup</title>
    <style>
        .c1{
            height: 100px;
            width: 100px;
            background-color:rgb(173, 111, 30);
        }
    </style>
</head>
<body>
    <from name="" id="">
    keydown<input type="text" id="k1" value="0"><br>
    keyup<input type="text" id="k2">
    </from>
    <div id="" class="c1"></div>

<script src="jquery-3.1.1.js"></script>
<script>
    var num = 0;
    //window对象下的,e\event时当前事件对象
    $(window).keydown(function(e){
        console.log(e.keyCode)
        num++;
        //$("#k1").val(num)
        //e.keyCode    是每个按键对应的keyCode值,通过不同的值触发不同的事件
        if(e.keyCode === 37){
            $(‘.c1‘).css({‘background-color‘:‘red‘});

        }else if(e.keyCode === 39){
            $(‘.c1‘).css({‘background-color‘:‘green‘})
        }
    });
    $(window).keyup(function(e){
        $(‘#k2‘).val(e.keyCode)
    })
</script>
</body>

二、事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。即一个子标签的事件可能会触发父级标签的事件处理函数。

1、阻止事件冒泡

阻止事件冒泡：e.stopPropagation()方法
阻止默认行为：e.prevenDefault()方法
return false 在jQuery中可以阻止事件冒泡和默认事件：jQuery不支持事件捕获

$(‘a‘).click(function (ev) {
    //方法一：同时阻止默认事件和冒泡事件
    ev.preventDefault();    // 阻止默认事件
    ev.stopPropagation();   // 再阻止冒泡事件
    alert(‘不再跳转页面‘);
 
    // 方法二：
    return false;  // 这个可以阻止a标签的默认事件和冒泡事件
})

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
    <style>
        #d1{
            background-color: red;
            height: 100px;

        }
        #d2{
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="d1" class="" >
        <div id="d2" class=""></div>
    </div>
<script src="jquery-3.1.1.js"></script>
<script>
    $(‘#d1‘).click(function(){
        alert(‘父级标签‘);
    });
    $(‘#d2‘).click(function(e){
        alert(‘子级标签‘);
        //解决事件冒泡，这样点击子标签时，父标签的的alert不会弹出，阻止事件冒泡
        //return false;
        //e.stopPropagation();
        
    })
</script>
</body>

三、事件绑定和移除

1、当前dom添加事件的两种方法

// 方式一：给当前dom元素添加click事件
$(‘#box‘).click(fn);
 
// 方式二：给当前的dom元素绑定事件 bind()
// 语法：jquery对象.bind(‘事件类型‘,fn)
$(‘#box‘).bind(‘click mouseenter‘, function () {
    alert(‘事件被绑定了‘)
})

2、详细事件和函数绑定到元素——bind()绑定方法

语法：$(select).bind(event, data,function)

参数：第一个参数是事件类型，常用click,blur,hover等；多个事件类型可以通过将每个空格分隔开来一次绑定。

可以通过传递事件类型/处理程序对的对象来同时绑定多个事件处理程序

第二个参数是可选参数，作为envet.data属性值传递给事件对象的额外数据对象

第三个参数是用来绑定的处理函数

function add() {
    console.log(‘click‘);
}
function add2() {
    console.log(‘mouse-over‘)
}
// 给jquery对象添加不同的事件
$(‘#box‘).bind({
    ‘click‘: add,
    ‘mouseenter‘:add2
})

3、移出事件——unbind()

语法：unbind(type,fn)

第一个参数：事件类型。如果不写参数，移除所有的事件：

// 如果没有参数表示移除所有事件
$(‘#box‘).unbind();

第二个参数：将要移除的函数

$( "#foo").unbind( "click" ，function(){})

4、事件委托

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

　事件委托（代理）使用情景：

　　（1）为DOM中的很多元素绑定相同事件：事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。

　　（2）为DOM中尚不存在的元素绑定事件：对js动态添加的子元素可自动绑定事件。

事件代理作用：

　　（1）性能比较好；（2）针对新创建的元素，直接可以拥有事件。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <div id=‘d1‘>
        <button class=‘b1‘>按钮</button>
    </div>
<script src="jquery-3.1.1.js"></script>
<script>
    //这里添加的按钮不会有绑定事件
    //  $(‘.b1‘).on(‘click‘ ,function(){
    //     alert(‘转圈圈‘);
    //     var btn = document.createElement(‘button‘);
    //     $(btn).text(‘按钮‘);
    //     $(btn).addClass(‘b1‘);
    //     console.log(btn);
    //     //添加到div标签里面
    //     $(‘#d1‘).append(btn);
    // })
    //将button点击事件委托给父辈<div id="d1">的标签，按钮有绑定事件
    $(‘#d1‘).on(‘click‘, ‘.b1‘ ,function(){
        alert(‘转圈圈‘);
        var btn = document.createElement(‘button‘);
        $(btn).text(‘按钮‘);
        $(btn).addClass(‘b1‘);
        console.log(btn);
        //添加到div标签里面
        $(‘#d1‘).append(btn);
    })
</script>
</body>

四、页面载入

等待整个页面中的内容加载完成，触发window.onload对应的函数里面的内容

window.onload缺点：有覆盖现象，会被后面的window.onload给重新复制

采用引入js的方式引入事件，会等待页面加载完成再触发，在页面中写，只会等待标签加载完成就触发对应事件，不会等待图片和视频加载完成

1. jquery文件要在使用jquery的代码之前引入

2. js代码最好都放到body标签下面或者里面的最下面来写

3.window.onload
	// window.onload = function () {
    //     $(‘.c1‘).click(function () {
    //         $(this).css({‘background-color‘:‘green‘});
    //     })
    // }
4.页面载入,$(function (){alert(‘xx‘);}) -- $(document).ready(function(){});
	页面载入与window.onload的区别
　　　　1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
　　　　2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
　　　　
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
        // window.onload 有覆盖现象,会被后面的window.onload给重新赋值
        // window.onload = function () {
        //     $(‘.c1‘).click(function () {
        //         $(this).css({‘background-color‘:‘green‘});
        //     })
        // }

        $(function () {
            $(‘.c1‘).click(function () {
                $(this).css({‘background-color‘:‘green‘});
            })
        });

    </script>
    <script src="xx.js"></script>


    <style>
        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<img src="" alt="">
</body>
</html>

五、表单事件

1、change()：表单元素发生改变时触发事件

//change()事件————表单元素发生改变时触发事件
//此事件仅限于input元素、textarea框、select元素。
//对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件。
$(‘select‘).change(function(){
    console.log($(‘select option:selected‘).text());
 
    $(‘.show‘).text($(‘select option:selected‘).text());
})

2、select()：文本元素发生改变时触发事件

// select()事件————文本元素发生改变时触发事件
// 仅限于用在input type=text 或 textarea  表单元素
$(‘#other‘).select(function () {
    console.log($(this).val());
})

3、submit()：表单元素发生改变时触发事件

// form表单和服务端有很大的挂钩：form表单有默认的submit行为，当对input type=submit按钮点击的时候会触发form的默认action行为，
// 此时可以调用 jquery的submit方法通过e.preventDefault()来阻止默认事件，这样我们就能动态的跟服务端来发送数据了
$(‘form‘).submit(function (ev) {
    // alert(1111);  // 触发submit事件弹出1111，再触发form表单的默认行为跳转到路飞官网
 
    // 阻止默认事件
    ev.preventDefault();
    alert(1111);  // 只会触发submit事件弹出1111
})