菜单 搜索
首页 前端知识 jQuery事件处理机制(4)

jQuery事件处理机制(4)

2024-09-04 23:09:44 前端知识 前端哥 86 602 我要收藏

1.常用事件

在前端开发中，经常使用事件来完成一些交互操作。

举例： 文本框获得焦点、鼠标滑过改变样式等。
jQuery提供的一些事件：

  • 页面加载事件；
  • 鼠标事件；
  • 焦点事件等；

1.1 jQuery事件方法

jQuery中事件方法一般与事件名称相同。

例如： 单机事件click，对应的事件方法是click()方法。

常用事件方法：

分类事件方法描述
鼠标click()单击鼠标左键时触发
dbclick()双击鼠标左键时触发
键盘keypress()键盘按键(Shift、CapsLock等非字符键除外)被按下时触发
keydown()键盘按键被按下时触发
keyup()键盘按键被松开时触发
焦点focus()获取焦点时触发
blur()失去焦点时触发
改变change()元素的值发生改变时触发
其它submit()当表单提交时触发
select()当文本框(包括<input>和<textarea>中的文本被选中的时触发)
scroll()当滚动条发生变化时触发
resize()当调整浏览器窗口大小时触发

click()事件： 为元素绑定事件处理函数后，还可以手动触发事件。

例如：

//点击事件
$('#btn').click();
扩展

与JavaScript中的“DOM对象.onclick = function() {};”这种方式不同的是，jQuery允许为同一个对象的同一个事件绑定多个事件处理函数。

//点击事件
//当触发事件时，其执行顺序与绑定时的顺序相同。
$('#btn').click(function(){
   console.log('text1'); 
});
$('#btn').click(function(){
   console.log('text2'); 
});

1.2 页面加载事件

在网页开发中，操作DOM时，会因为页面元素还没有加载而执行失败，因此引入事件处理函数；

解决办法：

  • jQuery提供了ready事件作为页面加载事件；

  • Javavascirpt提供了onload页面加载事件；

区别： ready事件只需页面DOM元素加载完全后便可触发。

好处： 提高页面的响应速度与onload相比ready事件语法比较灵活；

语法： document参数可以省略，写法2比较简洁。

//写法1
$(document).ready(function(){
    //页面加载后要执行的代码
})；

//写法2
$(function(){
    //页面加载后要执行的代码
})

(1)描述： 一个页面只能编写一个onload的事件，并且只能执行一次。

window.onload = function(){
    console.log('text1');
};
window.onload = function(){
    console.log('text2');
};
//执行结果只输出“text2"

(2)描述： 一个页面中可以包括多个ready事件，多个事件按照编写顺序依次执行。

$(function(){
    console.log('text1');
});
$(function(){
    console.log('text2'); 
});
//在控制台依次输出”text1“和”text2“
扩展：jQuery的load()方法

jQuery提供的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个事件处理函数，对于不同的元素对象，事件触发的时机也不同。

(1)非window对象

​ 如果事件函数绑定在一般元素对象上，则会在元素的内容加载完毕后触发。

$('img').load(function(){
   //元素内容加载完毕后要执行的代码 
});

(2)window对象

​ 如果事件处理函数绑定在window对象上，则与onload事件的使用效果相同。例如，”window.onload =function(){}“,可用如下代码实现：

$(window).load(function(){
    //元素内容加载完毕后要执行的代码 
});

1.3 鼠标事件

鼠标事件是指： 用户在点击鼠标或者移动鼠标时触发的事件。

事件描述
click单击鼠标左键时触发的事件
dblclick双击鼠标左键时触发的事件
mousedown按下鼠标时触发的事件
mouseup松开鼠标时触发的事件
mouseover鼠标指针移入被选元素或其子元素，都会触发的事件
mouseout鼠标指针移出被选元素或任何子元素，都会触发的事件
mouseenter鼠标指针移入被选元素时，才会触发的事件
mouseleave鼠标指针移出被选元素时触发的事件
1.mouseout()和mouseleave()方法
<style>
    div {
        background-color: pink;
        padding: 20px;
        margin: 30px;
        width: 350px;
        height: 100px;
    }
</style>

<body>
    <div class="dv">
        <h3 style="background-color: white;">
            mouseout事件被触发<span id="mOut">0</span>次<br>
            mouseleave事件被触发<span id="mLeave">0</span>次
        </h3>
    </div>
    <script>
        var x = 0;
        var y = 0;
        $('.dv').mouseout(function () {
            $('#mOut').text(x += 1);
        });
        $('.dv').mouseleave(function () {
            $('#mLeave').text(y += 1);
        })
    </script>
</body>

在这里插入图片描述

2.click()、dblclick()、mousedown()和mouseup()方法
<body>
    <ul>
        <li id="btn1">click事件触发<span id="click">0</span></li>
        <li id="btn2">dblclick事件触发<span id="dblclick">0</span></li>
        <li id="btn3">mousedown事件<span id="mousedown">0</span></li>
        <li id="btn4">mouseup事件<span id="mouseup">0</span></li>
    </ul>
    <script>
        var a = 0;
        var b = 0;
        var c = 0;
        var d = 0;
        //单击事件
        $('#btn1').click(function () {
            $('#click').text(a += 1);
        });
        //双击事件
        $('#btn2').dblclick(function () {
            $('#dblclick').text(b += 1);
        });
        //鼠标按下事件
        $('#btn3').mousedown(function () {
            $('#mousedown').text(c += 1);
        });
        //鼠标按下松开事件
        $('#btn4').mouseup(function () {
            $('#mouseup').text(d += 1);
        });
    </script>
</body>

在这里插入图片描述

3.mouseover()和mouseenter()方法
<div class="dv1">
        <h3 style="background-color: white;">
            mouseover事件被触发<span id="mOver">0</span>次<br>
            mouseenter事件被触发<span id="mEnter">0</span>次
        </h3>
    </div>
    <script>
        var x = 0;
        var y = 0;
        $('.dv1').mouseover(function () {
            $('#mOver').text(x += 1);
        });
        $('.dv1').mouseenter(function () {
            $('#mEnter').text(y += 1);
        })
    </script>

在这里插入图片描述

扩展：hover()方法

jQuery中提供了hover()语法对鼠标的移入和移出操作进行处理。

语法：

$(selector).hover(inFunction, outFunction);

hover()方法在jQuery中源代码：

hover: function( fnOver, fnOut ) {
	return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

<!--案例-->
<body>
    <p>你好！</p>
    <script>
        $('p').hover(function () {
            $('p').css('background', 'red');
        }, function () {
            $('p').css('background', 'blue');
        });
    </script>
</body>

在这里插入图片描述

1.4焦点事件

jQuery中元素获得焦点时，触发 focus事件，元素失去焦点时触发blur事件。

<body>
    输入框：<input type="text">
    <script>
        //获取焦点
        $('input').focus(function () {
            $('input').css('background-color', 'gray');
        });
        //失去焦点
        $('input').blur(function () {
            $('input').css('background-color', 'white');
        });
    </script>
</body>

在这里插入图片描述

1.5 改变事件

jQuery提供的change()事件监控表单中元素内容是否改变。

仅适用于： input、textarea、select元素控件。

例如： 文本框、单选按钮、下拉列表等。

<body>
    <P>名称：<input type="text" class="info"></P>
    <P>密码：<input type="password" class="info"></P>
    <P>
        <select class="info" name="male">
            <option value="boy">男</option>
            <option value="girl">女</option>
        </select>
    </P>
    <script>
        //注册改变事件
        $('.info').change(function () {
            $(this).css('background', 'pink');
        });
    </script>
</body>

在这里插入图片描述

2. 事件的绑定与解绑

  • 事件绑定方式，分别是on()、bind()和delegate()方法。

  • 用off()、unbind()和undelegate()方法来解除绑定。

2.1 绑定事件

使用on()方法绑定事件不仅适用于当前元素，也适用于动态添加的元素。

语法：

$(selector).on(event, childSelector, data, function)；
参数描述
event必须。事件类型，如click、change、mouseover等
childSelector可选。要绑定事件的一个或多个子元素
data可选。传入事件处理函数的数据，可通过“事件对象.data”获取参数值
function必须。事件被触发运行的事件处理函数
1.on方法绑定事件

on()方法在不设置任何可选参数时，表示为指定的元素绑定指定的事件。

//on()
$('#btn').on('click',function(){
   alert('我被单击了')； 
});
2.多个事件使用相同的事件处理函数

当多个事件处理函数相同时可以利用on方法依次为多个事件绑定相同处理函数。

//on(events,function(){})
$('#btn').on('mouseover mouseout',function(){
    console.log('事件被触发')；
})
3.绑定多个事件

为on方法传递对象型的参数时，可以为指定元素绑定多个事件。

//on({})
$('#btn').on({'click':function(){
    alert('我被单击了')；
},'mouseover':function(){
    $(this).css('backgroundColor','red');
}});
4.事件委托

为on方法设置可选参数chidSelector时，表示将子元素的事件委托给了父元素进行进行监控。

//on(event,childSelecter,function(){})
$('#dv').on('click','p',function(){
    $(this).css('backgroundColor','red');
})

<!--案例-->
<body>
    <input type="button" id="btn" value="添加两个p元素">
    <div id="dv"></div>
    <script>
        //为div中p元素绑定事件
        $('#dv').on('click', 'p', function () {
            $(this).css('background', 'pink');
        });
        //单击按钮通过on()方法为div中添加一个元素
        $('#btn').on('click', function () {
            //创建两个p标签，添加到div中
            $('<p>这是第一个p</p>').appendTo('#dv');
            $('<p>这是第二个p</p>').appendTo('#dv');
        });
    </script>
</body>

在这里插入图片描述

on()方法–扩展[了解]
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 200px;
        height: 400px;
        border: 2px solid black;
        margin: 50px auto;
    }

    #box p {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 50px auto;
    }
</style>

<body>
    <div id="box">
        <p></p>
        <p></p>
    </div>
    <script>
        //on()方法
        //第一个参数为事件名，多个事件用空格隔开
        //第二个参数为选择器，筛选后代元素（可选，用的少）
        //第三个参数传递数据给事件处理函数（可选，用的少）
        //第四个参数事件函数function
        $(function () {
            // 1.最常用的方法
            $('#box').on('click', function () {
                console.log('单机事件');
            });

            // 2.一个元素绑定多个事件
            $('#box').on("mouseenter mouseleave", function () {
                console.log('鼠标移入移出事件');
            });

            // 3.第二个参数
            /* $('#box p').on('dblclick',function(){
                console.log('鼠标双击事件');
            }); */
            //和上面注释一样
            $('#box').on('dblclick', 'p', function () {
                console.log('鼠标双击事件');
            });

            // 4.传递数据给事件处理函数
            $('#box').on('click', { dome: 'green' }, function (e) {
                $('#box p').css('backgroundColor', e.data.dome);
            });

            //绑定多个不同事件，并且执行不同函数
            $('#box').on({
                'mouseover': function () {
                    alert('移入事件');
                }, 'mouseout': function () {
                    alert('移出事件');
                }
            });
        });
    </script>
</body>
扩展:bind()和delegate()绑定方法

在jQuery中还有bind()和delegate()方法也可以完成事件绑定，但在jQuery新版本中已经由on()方法替代。

bind()和delegate()这两个方法都是利用on()方法实现的。两者的区别在于，bind()方法将on()方法的第2个参数设为null，而delegate()方法传递了selector参数。

bind()和delegate()在jquery中的源代码：

bind:function(types,data,fn){
    return this.on(types,null,data,fn);
}

delegate:function(selector,types,data,fn){
    return this.on(types,selector,data,fn);
}
扩展：one()方法绑定单次事件

使用jQuery绑定事件时，如果事件只需要在页面中执行一次，便可以使用one()方法绑定事件。该事件在触发一次后就会失效，不需要手动解绑事件。

$('div').one('click',function(){
   console.log('1次单击就失效'); 
});

2.2 事件解绑

元素上绑定的事件，在不需要使用时，可以利用jQuery提供的方法进行事件解绑。

**off()方法：**适用于解绑事件方法（如click()事件）或on()方法绑定的事件。

$(selector).off(); //解绑匹配元素的所有事件
$(selector).off('click');//解绑匹配元素的指定事件，如click

off()方法还可以在第2个参数中传入特殊值“**”，用于解绑被委托的事件。

//li元素将click事件委托给父元素ul监听
$('ul').on('click','li',function(){
    console.log('哈哈')；
})

//解绑ul元素上被委托的click事件
$('ul').off('click','*');
扩展：jQuery中的bing()和delegate()方法

对于jQuey中bind()方法和delegate()方法，jQuery也提供了相应解绑事件的方法unbind()和undelegate()，但在jQuery新版本中已经由off()方法替代。

jQuery中的bing()和delegate()方法的源代码：

//unbind()
unbind:function(types,fn){
 return this.off(types,null,fn);   
}

//undelegate()
undelegate:function(selector,types,fn){
    //(namespace) or (selector,types [,fn])
    return arguments.length === 1 ?
        this.off(selector,'**'):
    	this.off(types,selector || '**',fn);
}

<!--案例-->
<!--无论是单击div元素或p元素都会弹出当前元素被单击的提示框。-->
<!--
点击解绑事件”按钮后，div元素和p元素的click事件都会被解绑。
	分析：父元素调用off()方法，父元素和子元素上的相同事件都会被解绑。
	需要注意：点击p元素后，其父元素上的click事件也会被触发。
-->
<style>
    div {
        width: 200px;
        height: 100px;
        border: 1px solid black;
    }

    p {
        background-color: aqua;
    }
</style>

<body>
    <input type="button" value="绑定事件" id="btn1">
    <input type="button" value="解绑事件" id="btn2">
    <div id="dv">
        <p>这是div中的p元素</p>
    </div>
    <script>
        //单击第一个按钮为div和div中p元素绑定单击事件
        $('#btn1').click(function () {
            $('#dv').on('click', function () {
                alert('div元素被单击了');
            });
            $('#dv').delegate('p', 'click', function () {
                alert('p元素被单击了');
            });
            alert('事件绑定成功');
        });

        //单击第二个按钮为div中p元素解除绑定事件
        $('#btn2').click(function () {
            $('#dv').off('click');
        });
    </script>
</body>

在这里插入图片描述

3.事件触发

<!--HTML代码-->
<!--案例：单击事件触发后，id值为btn1的按钮会将背景色改为red-->
<input type='button' value='第一个按钮' id='btn1'>
<input type='button' value='第二个按钮' id='btn2'>
<script>
    //单击事件
    $('#btn1').click(function(){
        $(this).css('backgroundColor','red')
    })
</script>

1.使用普通事件方法触发事件

//调用匹配元素click()事件来触发事件
//click()
$('#btn2').click(function () {
	$('#btn1').click();
});

2.使用trigger()方法触发事件

//调用对象是待触发事件对象，参数是要触发的事件名称
//trigger()
$('#btn2').click(function () {
    $('#btn1').trigger('click');
});

3.使用triggerHandler()方法触发事件

//不会触发浏览器的默认行为
//triggerHandler()
//文本框获取焦点后的光标闪烁行为
$('#btn2').click(function () {
    $('#btn1').triggerHandler('click');
})；

在这里插入图片描述

<!--示例-->
<body>
    <input type="button" value="触发事件1" id="btn1">
    <input type="button" value="触发事件2" id="btn2">
    <input type="text" id="txt">
    <span id="sp"></span>
    <script>
        $('#txt').focus(function () {
            $('#sp').text('输入框获取到到焦点了');
        });
        $('#btn1').click(function () {
            //触发输入框的获取焦点的事件
            $('#txt').trigger('focus');
        });
        $('#btn2').click(function () {
            $('#txt').triggerHandler('focus');
        });
    </script>
</body>

在这里插入图片描述

4.事件冒泡

1.什么是事件冒泡

事件传播的两种策略： 事件捕获和事件冒泡。

事件捕获： 当页面触发一个事件，事件传播的顺序是最外层元素向触发事件的元素传递。

在这里插入图片描述

事件冒泡： 当元素中嵌套（一层或多层）元素，一旦最里层元素的事件被触发，那么此事件会向该元素的父级对象传播，并触发父对象上定义的同类事件。 事件传播顺序是从触发事件元素向最外层元素传递。jQuery中注册的事件默认拥有事件冒泡的特点。

在这里插入图片描述

2.如何实现事件冒泡

<style>
    div,
    p,
    span {
        border: 1px solid black;
        margin: 0 auto;
    }

    div {
        width: 200px;
        height: 150px;
        background-color: pink;
    }

    p {
        width: 150px;
        height: 100px;
        background-color: chartreuse;
    }

    span {
        width: 80px;
        margin-top: 25px;
        background-color: antiquewhite;
        display: inline-block;
    }
</style>

<body>
    <div>
        div元素
        <p>
            p元素
            <span>span元素</span>
        </p>
    </div>
    <script>
        $('span').click(function () {
            console.log('span元素被单击了');
        });
        $('p').click(function () {
            console.log('p元素被单击了');
        });
        $('div').click(function () {
            console.log('div元素被单击了');
        });
    </script>
</body>

在这里插入图片描述

**案例演示：**事件冒泡的事件传播的方向是从触发事件的元素到顶层。

在这里插入图片描述

3.如何阻止事件冒泡

单击子元素，会向上触发其父元素，祖先元素的单击事件。

1.使用event.stopPropagation()方法阻止事件冒泡

事件的使用会涉及到一个事件对象，即HTML DOM Event对象。

//event.stopPropagation()
$('span').click(function () {
    console.log('span元素被单击了');
    event.stopPropagation();
});
2.使用return false语句阻止事件冒泡

在p元素的单击事件程序完成之后，调用return false语句。

//return false
$('p').click(function () {
    console.log('p元素被单击了');
    return false;
});

5.事件对象

1.什么是事件对象

通过事件对象可以获取事件的状态。

举例： 触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

//封装
$('element').on('click',function(event){
    //event:事件对象
});
属性/方法描述
type事件类型，如果使用一个事件处理函数来处理多个事件，可以使用此种属性获得事件类型，比如click
data传递给事件处理程序的额外数据(即事件方法中的data参数)
pageX/Y鼠标事件中，鼠标相对于页面原点的水平/垂直坐标
keyCode键盘事件中，键盘按键代码
delegateTarget当前调用的jQuery事件处理程序的元素对象
currentTarget当前触发事件的DOM对象，等同于this
target事件源，也叫做事件触发者DOM对象，不一定等同于this
stopPropagation()阻止事件冒泡
preventDefault()阻止默认行为，例如a元素的href链接加载、表单提交以及click引起复选框的状态切换

注意：

delegateTarget、curentTarget和target属性的使用。通过调用事件本身的方法（如click()）为元素绑定事件，并且不通过事件冒泡触发事件时，3个属性返回的元素是相同的。使用事件委托的方式（例如使用on()方法）绑定事件，或者通过事件冒泡触发事件时，3个属性返回的元素便有所不同。

对象属性delegateTarget/currentTarget/target的不同使用情况：

<!--HTML代码-->
<style>
    div,
    span {
        border: 1px solid black;
        margin: 0 auto;
    }

    div {
        width: 200px;
        height: 100px;
        background-color: antiquewhite;
    }

    span {
        width: 80px;
        margin-top: 25px;
        background-color: aqua;
        display: inline-block;
    }
</style>

<body>
    <div>
        <span>span元素</span>
    </div>
</body>
1.使用普通方法绑定事件
$('span').click(function (event) {
    console.log('delegateTarget:' + event.delegateTarget);
    console.log('currenTarget:' + event.currentTarget);
    console.log('target:' + event.target);
});

在这里插入图片描述

2.通过事件委托绑定事件
$('div').on('click', 'span', function (event) {
    console.log('delegateTarget:' + event.delegateTarget);
    console.log('currenTarget:' + event.currentTarget);
    console.log('target:' + event.target);
})

在这里插入图片描述

3.通过事件冒泡触发事件
$('span').click(function(){
    console.log('span元素被单击了');
});
$('div').click(function(event){
    console.log('div元素被单击了');
    console.log('delegateTarget:' + event.delegateTarget);
    console.log('currenTarget:' + event.currentTarget);
    console.log('target:' + event.target);
});

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17672.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

javascript jQuery

2024-09-21 22:09:33

【若依】表格固定列宽

2024-09-21 22:09:30

全面探索 jQuery EasyUI 1.3 版本：功能丰富与实战应用

2024-09-21 22:09:29

Knockout-jQueryUI 使用指南

2024-09-21 22:09:29

提升Ajax请求稳定性：jQuery Ajax Retry插件推荐

2024-09-21 22:09:28

HTML5 WebSocket、PHP 和 jQuery 实时 Web 应用（三）

2024-08-14 00:08:20

使用v-if操作两个echarts图显示的时候的渲染问题（图表实例没有）

2024-09-21 22:09:49

spring boot vue2 echarts5 实现中国地图各个省份数据统计

2024-09-21 22:09:41

echarts柱状图X轴底部文字 部分不显示出来？

2024-09-21 22:09:41

vue3中使用echarts：tooltip的trigger为axis tooltip不显示问题

2024-09-21 22:09:41

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
3

vue使用datav echarts

2024-09-06 00:09:381000
4

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
5

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
6

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
7

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
8

npm的使用

2024-08-18 00:08:131000
9

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
10

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！