JQuery事件委托原理与用法实例分析


Posted in jQuery onMay 13, 2019

本文实例讲述了JQuery事件委托原理与用法。分享给大家供大家参考,具体如下:

事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作。事件委托首先可以极大的减少事件绑定次数,其次也可以让新加入的子集元素也拥有相同的操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style type="text/css">
  .list{
    background-color: gold;
    list-style-type: none;
    padding: 10px;
  }
  .list li{
    height: 30px;
    background-color: green;
    margin: 10px;
  }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
    /*$('.list li').click(function () {
      $(this).css({backgroundColor:'red'});
    });*///写成事件委托的方式,把委托的事件放在父级
    $('.list').delegate('li','click',function () {
      $(this).css({backgroundColor:'red'});
    });
    //新建li元素复制给$li变量
    var $li=$('<li>9</li>');
    $('.list').append($li);//把新建元素放到ul子集最后面。这就是节点操作
  })
</script>
<body>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</body>
</html>

关键代码,事件委托函数

$('.list').delegate('li','click',function () {
  $(this).css({backgroundColor:'red'});

新建节点也能使用,就是因为有事件委托

//新建li元素复制给$li变量
var $li=$('<li>9</li>');
$('.list').append($li);//把新建元素放到ul子集最后面。这就是节点操作

JQuery事件列表

blur()元素失去焦点
focus()元素获得焦点 ,其实就是光标在输入框里就是叫做获得焦点
click()点击
mouseover()鼠标进入
mouseout()鼠标离开
mouseenter()鼠标进入,进入元素不触发
mouseleave()鼠标离开,离开元素不触发
hover()同时为mouseenter和mouseleave事件指定处理函数
ready()DOM加载完毕
resize()浏览器窗口大小发生改变
scroll()滚动条位置发生变化
submit()用户提交表单

blur和focus事件和提交submit

若想提交表单,form得写提交地址action,input得写name

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
    /*$('#input01').focus(function () {
      alert('获得焦点');/!*其实就是光标在输入框的时候叫做获得焦点*!/
    })*///在获得焦点的时候做什么事情
    $('#input01').focus();//这就是一进去页面的时候就获得焦点
    $('#input01').blur(function () {/*失去焦点的时候处理函数*/
      alert('失去焦点');
    })
    $('#form1').submit(function () {
      alert('提交');
    })
  })
</script>
<body>
<form id="form1" action="http://www.baidu.com">
  <input type="text" name="dat01" id="input01" >
  <input type="text" name="dat02" id="input02" >
  <input type="submit" name="" value="提交" id="sub">
</form>
</body>
</html>

可以直接粘贴验证。

resize事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(window).resize(function () {
      var $w=$(window).width();
      document.title=$w;
    })
  </script>
</head>
<body>
</body>
</html>

浏览器大小发生改变的时候,把浏览器宽度打到title上,resize事件要绑定在window上面。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery操作css样式
May 15 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
使vue实现jQuery调用的两种方法
May 12 #jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
jquery登录的异步验证操作示例
May 09 #jQuery
You might like
多文件上载系统完整版
2006/10/09 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
js查错流程归纳
2012/05/04 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
vue 实现走马灯效果
2019/10/28 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python使用turtle库绘制树
2018/06/25 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
学年自我鉴定范文
2013/10/01 职场文书
服务员态度差检讨书
2014/10/28 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
采购员岗位职责范本
2015/04/07 职场文书
网聊搭讪开场白
2015/05/28 职场文书
运动会宣传语
2015/07/13 职场文书
美容院员工规章制度
2015/08/05 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL