20、jQuery 事件机制

作者: 一直流浪 | 来源:发表于2022-08-31 23:31 被阅读0次

20、jQuery 事件机制

原生js事件与jQuery事件：

（1）用原生的js给div注册事件

原生js注册相同的事件，后面的会把前面的覆盖

document.getElementById("one").onclick=function(){
    alert("单击事件1");
};

document.getElementById("one").onclick=function(){
    alert("单击事件2");
}

（2）jQuery注册相同的事件，不会吧前面的覆盖

$('#one').click(function(){
    alert("单击事件1");
});
$('#one').click(function(){
    alert("单击事件2");
});

jQuery事件的发展历程：

（1）简单的事件绑定 click()

不支持同时注册，也不支持动态注册（新创建的组件不能自动注册应有的事件）

//不支持同时注册
$('div').click(function(){
    console.log("鼠标单击事件");
});

$('div').mouseenter(function(){
    console.log("鼠标移入事件");
});

//新创建的节点对click()事件不支持动态注册
$('#btn').click(function(){
            var $divNew = $('<div class="two"></div>');
            $('body').append($divNew);
});

（2）bind方式注册事件

支持同时注册，也不支持动态注册（新创建的组件不能自动注册应有的事件）

//支持同时注册
$('div').bind({
    mouseenter:function(){
        console.log("鼠标移入事件");
    },
click:function(){
        console.log("鼠标单击事件");
    }
});

//新创建的节点对bind()事件不支持动态注册
$('#btn').click(function(){
            var $divNew = $('<div class="two"></div>');
            $('body').append($divNew);
});

（3） delegate注册委托事件

支持同时注册，也支持动态注册（新创建的组件可以自动注册应有的事件）
需要把事件注册在父亲节点上面
原理是事件冒泡

$('body').delegate('div',{
    mouseenter:function(){
        console.log("鼠标移入事件");
    },
    click:function(){
        console.log("鼠标单击事件");
    }
});

（4）jQuery1.7之后，jQuery用on统一了所有事件的注册

on 注册事件：

jQuery1.7之后，jQuery用on统一了所有事件的注册
最现代的方式，兼容zepto（移动端类似jQuery的一个库），强烈建议使用。

（1）on简单注册事件

不支持动态创建

$('div').on('click',function(){
    console.log("我是点击事件");
});

（2）on委托注册

需要把事件注册到父亲节点

$('body').on('click','div,span',function(){
    console.log("我是点击事件");
});

案例：动态数据的添加和删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格删除</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            table{
                border-collapse:collapse ;
                border-spacing: 0;
                
            }
            
            thead{
                display: table-header-group;
                vertical-align: middle;
                border-color:inherit ;
            }
            
            tbody{
                display: table-row-group;
                vertical-align: middle;
                border-color: inherit;
            }
            th{
                padding: 10px 10px;
                background-color: skyblue;
                border: 1px solid white;
            }
            td{
                padding: 10px 10px;
                background-color: #eeeeee;
                border: 1px solid #999999;
            }
            .mask{
                position: absolute;
                left: 0px;
                top:0px;
                background-color: #EEEEEE;
                opacity:0.5;
                width: 100000px;
                height: 10000px;
                display: none;
            }
            
            .form-add{
                width: 400px;
                height: 300px;
                background: skyblue;
                position:absolute;
                left:0;
                top: 0;
                bottom: 0;
                right: 0;
                display: none;
            }
            
            #j_hideFormAdd{
                position:absolute;
                top: 0px;
                right: 0px;
                font-size: 50px;
            }           
        </style>
    </head>
    <body>
        <div class="wrap">
            <input type="button" value="添加数据" id="btn" />
            <table>
                <thead>
                    <tr>
                        <th>专栏名称</th>
                        <th>内容描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tb">
                    <tr>
                        <td>JavaSE 学习笔记</td>
                        <td>参考Oracle官方文档，系统学习JavaSE</td>
                        <td><button class="del">删除</button></td>
                    </tr>
                    <tr>
                        <td>Oracle数据库笔记</td>
                        <td>参考Oracle官方文档，系统学习Oracle数据库</td>
                        <td><button class="del">删除</button></td>
                    </tr>
                    <tr>
                        <td>LeetCode热门算法100道</td>
                        <td>刷题的必选之路</td>
                        <td><button class="del">删除</button></td>
                    </tr>
                    <tr>
                        <td>Linux学习笔记</td>
                        <td>从零学习Linux系统</td>
                        <td><button class="del">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div id="j_mask" class="mask"></div>
        
        <div id="j_formAdd" class="form-add">
            <div class="form-add-title">
                <span>添加数据</span>
                <div id = "j_hideFormAdd">×</div>
            </div>
            <div class="form-item">
                <label class="lb" for="j_txtLesson">专栏名称:</label>
                <input class="txt" type="text" id="column" placeholder="请输入专栏名称" />
            </div>
            <div class="form-item">
                <label class="lb" for="j_txtBelSch">内容简述:</label>
                <input class="txt" type="text" id="content" placeholder="请输入内容描述" />
            </div>
            <div class="form-submit">
                <input type="button" id="j_btnAdd" value="添加" />
            </div>
        </div>
        
        
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){       
        //1.删除一行
        //使用on委托注册事件
        $('#tb').on('click','.del',function(){
            //jQuery为了使用方便,把this修改了,为点击元素,不是父亲节点tbody
            $(this).parent().parent().remove();
        })
            
            
        
        //2.设置添加数据按钮事件
        $('#btn').click(function(){
            $('#j_formAdd').show();
            $('#j_mask').show();
        });
        
        //3.设置关闭按钮事件
        $('#j_hideFormAdd').click(function(){
            $('#j_formAdd').hide();
            $('#j_mask').hide();
        });
        
        //4.设置添加按钮事件
        $('#j_btnAdd').click(function(){
            //获取专栏名称和内容描述
            var $column = $('#column').val();
            var $content = $('#content').val();
            
            //把用户的输入专栏名称和内容描述，创建一个tr
            var $trNew = $('<tr>'+
            '<td>'+$column+'</td>'+
            '<td>'+$content+'</td>'+
            '<td><button class="del">删除</button></td></tr>');
            
            //把新创建的tr标签添加到tbody中
            $('#tb').append($trNew);
            
            //把添加数据面板和遮罩隐藏
            $('#j_hideFormAdd').click();    
        });
    })
</script>

事件解绑：

（1）unbind方式解绑事件（不推荐使用）

//解绑所有事件
$('div').unbind();
//解绑指定事件
$('div').unbind('click');

（2）undelegate方式解绑事件（不推荐使用）

//解绑所有事件
$('div').undelegate();
//解绑指定事件
$('div').undelegate('click');

（3）off方式解绑事件（推荐使用）

//解绑所有事件
$('div').off();
//解绑指定事件
$('div').off('click');

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #one{
                width: 200px;
                height: 200px;
                border: 2px solid red;
            }
        </style>
    </head>
    <body>
        <input type="button" value="注册事件" id="btn1" />
        <input type="button" value="解绑事件" id="btn2" />
        <br />
        <div class="one" id="one"></div>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        //jQuery用on注册事件,用off来解绑
        //off()不给参数就是解绑所有的事件
        //off(参数)解绑指定事件
        
        //添加注册事件
        $('#btn1').click(function(){
            //给div注册事件
            $('#one').on({
                'click':function(){
                    console.log("这个单击事件");
                }
            });
            $('#one').on({
                'mouseenter':function(){
                    console.log("这个鼠标移入事件");
                }
            });
        });
        
        //添加解绑事件
        $('#btn2').click(function(){
            //给div解绑事件(无参数,解绑所有参数)
//          $('#one').off();
            
            //解绑指定事件(有参数,解绑指定事件)
            $('#one').off('click');
        })
        
        //添加解绑事件(不是用on注册的也可以用off解绑)
        $('#btn2').click(function(){
            $('#btn1').off('click');
        })
    })
</script>

事件触发：

方法：trigger()

（1）代码的方式触发事件

        var i = 0;
        $('#btn').on('click',function(){
            i++;
            if(i>=3){
                //条件满足，触发事件
//              $('#one').click();
                $('#one').trigger('click');
            }
        });

（2）可以触发自定义事件

        //给div注册一个自定义事件（没有触发事件）
        $('#one').on('kill',function(){
            console.log('我是kill事件');
        });
        
        //使用触发器触发
        $('#btn2').on('click',function(){
            var res = confirm('是否启动kill事件');
            if(res){
                //触发自定义kill事件
                $('#one').trigger('kill');
            }
        });

jQuery事件对象：

什么是事件对象？
- 注册一个事件，系统会帮我们生成一个对象记录这个事件触发时候的一些信息
- 比如事件是按那个键触发的，触发的位置坐标。。。
- jQuery在事件中由参数e来获取
- jQuery的事件对象是对元素js的事件进行了封装，处理了兼容性
三个常用坐标
- screenX,screenY触发事件的点距离屏幕左上角的坐标

clientX,clientY触发事件的点距离可视区左上角的坐标（忽视滚动条）
- pageX,pageY触发事件的点距离页面左上角的坐标

//screenX,screenY触发事件的点距离屏幕左上角的坐标
console.log('ScreenX'+':'+e.screenX+'---'+'ScreenY'+':'+e.screenY);

//clientX,clientY触发事件的点距离可视区左上角的坐标（忽视滚动条）
console.log('ClientX'+':'+e.clientX+'---'+'ClientY'+':'+e.clientY);

//pageX,pageY触发事件的点距离页面左上角的坐标
console.log('pageX'+':'+e.pageX+'---'+'pageY'+':'+e.pageY);

stopPropagation() : 阻止事件冒泡

$('#btn').on('click',function(e){
 alert('我是按钮的点击事件');
 e.stopPropagation();
});

preventDefault() : 阻止默认行为,阻止a标签跳转

$('a').on('click',function(e){
    alert('我是a标签的单击事件');
    //stopPropagation():阻止事件冒泡
    e.stopPropagation();

    //4.preventDefault():阻止默认行为,阻止a标签跳转
    e.preventDefault();
});

return false 既能阻止事件冒泡，又能阻止a标签跳转

$('a').on('click',function(e){
 alert('我是a标签的单击事件');

 //5.return false 既能阻止事件冒泡，又能阻止a标签跳转
 return false;
});

keydown 获取键盘按键
```
$(document).on('keydown',function(e){}
```

案例：按键变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #bgChage{
                height: 50px;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div class="wrop">
            <h1>按键变色</h1>
            <div id="bgChage" style="background-color: blue">
                keyCode为:
                <span id="keyCodeSpan"></span>
            </div>
        </div>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        //获取div
        var $div = $('#bgChage');
        
        //显示按键的span
        var $showCode = $('#keyCodeSpan');
        
        //给页面注册一个键盘按键事件
        $(document).on('keydown',function(e){
            console.log(e.keyCode); // r:82   g:71   b:66    y:89  
            switch(e.keyCode){
                case 82:
                    $div.css('background-color','red');
                    $showCode.text('82');
                break;
                case 71:
                    $div.css('background-color','green');
                    $showCode.text('71');
                break;
                case 66:
                    $div.css('background-color','blue');
                    $showCode.text('66');
                break;
                case 89:
                    $div.css('background-color','yellow');
                    $showCode.text('89');
                break;  
                default:
                    $div.css('background-color','pink');
                    $showCode.text('没有这个键');
            }
        })
    })
</script>

案例：五角星评分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>五角星评分案例</title>
        <style>
            ul{
                list-style: none;
            }
            li{
                display: inline-block;
            }
            .comment{
                font-size:40px ;
                color: red;
            }
        </style>
    </head>
    <body>
        <ul class="comment">
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
        </ul>
    </body>
</html>

<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
    $(function(){
        //需求1:鼠标移入五角星，会把当前li标签和前面的li标签显示为实心五角星，后面的显示空心五角星
        //需求2:鼠标离开li，会把所有的li标签设为空心五角星
        //需求3:点击li，鼠标离开后，刚才被点击的li标签及前面的li标签为实心，后面为空心
        
        //prev():上一个兄弟
        //prevAll():前面所有兄弟
        //next():下一个兄弟
        //nextAll():后面所有兄弟
        
        
        //需求1：
        $('.comment>li').on('mouseenter',function(){
//          console.log('鼠标进入');
            //需求1
            $(this).text('★').prevAll().text('★');
            $(this).nextAll().text('☆');
            
        }).on('mouseleave',function(){
//          console.log('鼠标离开');
            //需求2
            $('.comment>li').text('☆');
            
            //获取刚才点击的li(属性选择器)
            $('.comment>li[flag]').text('★').prevAll().text('★');
            
            $('.comment>li[flag]').nextAll().text('☆');

        }).on('click',function(){
//          console.log('鼠标单击');
            //需求3：给当前的li添加记号
            //给当前鼠标点击的li添加独一无二的属性
            $(this).attr('flag','flag').siblings().removeAttr('flag');
        })  
    })
</script>

20、jQuery 事件机制

20、jQuery 事件机制

原生js事件与jQuery事件：

jQuery事件的发展历程：

on 注册事件：

案例：动态数据的添加和删除

事件解绑：

事件触发：

jQuery事件对象：

案例：按键变色

案例：五角星评分

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读