网站首页 > 基础教程 正文
八、jQuery事件
1. 常用事件
- click() 鼠标单击
- blur() 元素失去焦点
- focus() 元素获得焦点
- mouseover() 鼠标进入(进入子元素也触发)
- mouseout() 鼠标离开(离开子元素也触发)
- ready() DOM加载完成
示例代码:
<script>
$(function(){
var $li = $('.list li');
var $button = $('#button1')
var $text = $("#text1");
var $div = $("#div1")
// 鼠标点击
$li.click(function(){
// this指的是当前发生事件的对象,但是它是一个原生js对象
// this.style.background = 'red';
// $(this) 指的是当前发生事件的jquery对象
$(this).css({'background':'gold'});
// 获取jquery对象的索引值,通过index() 方法
alert($(this).index());
});
// 一般和按钮配合使用
$button.click(function(){
alert($text.val());
});
// 获取焦点
$text.focus(function(){
$(this).css({'background':'red'});
});
// 失去焦点
$text.blur(function(){
$(this).css({'background':'white'});
});
// 鼠标进入
$div.mouseover(function(){
$(this).css({'background':'gold'});
});
// 鼠标离开
$div.mouseout(function() {
$(this).css({'background':'white'});
});
});
</script>
<div id="div1">
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<input type="text" id="text1">
<input type="button" id="button1" value="点击">
</div>
说明:
- this指的是当前发生事件的对象,但是它是一个原生js对象
- $(this) 指的是当前发生事件的jquery对象
九、事件代理
1. 事件代理介绍
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
事件冒泡代码:
<script>
$(function(){
var $div1 = $('#div1');
var $div2 = $('#div2');
$div1.click(function(){
alert($(this).html());
});
$div2.click(function(){
alert($(this).html());
});
});
</script>
<div id="div1" style="width:200px; height:200px; background: red;">
<div id="div2" style="width:100px; height:100px;background: yellow;">
哈哈
</div>
</div>
说明:
当点击子元素div,它的点击事件会向它父元素传递,也会触发了父元素的点击事件,这就是事件冒泡。
2. 事件代理的使用
一般绑定事件的写法:
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件代理的写法
$(function(){
$list = $('#list');
// 父元素ul 来代理 子元素li的点击事件
$list.delegate('li', 'click', function() {
// $(this)表示当前点击的子元素对象
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
delegate方法参数说明:
delegate(childSelector,event,function)
- childSelector: 子元素的选择器
- event: 事件名称,比如: 'click'
- function: 当事件触发执行的函数
- 上一篇: Jquery中的delegate()使用方法介绍
- 下一篇: web前端必考的面试题
猜你喜欢
- 2024-11-24 SpringBoot静态资源配置原理详解
- 2024-11-24 57.后端必备的前端技巧
- 2024-11-24 Web前端面试题(初级)
- 2024-11-24 《理解ASP.NET Core》系列9- 过滤器(Filters)
- 2024-11-24 php手把手教你做网站(十)添加文章分类多级联动
- 2024-11-24 了解这些难度较高的前端面试题,助你顺利完成求职
- 2024-11-24 Spring Boot源码学习:自动配置与自定义注解详解
- 2024-11-24 web前端必考的面试题
- 2024-11-24 Jquery中的delegate()使用方法介绍
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)