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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery实现简单每周轮换的日历
Sep 10 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
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
JavaScript中string对象
2015/06/12 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
利用Python获取操作系统信息实例
2016/09/02 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
物业电工岗位职责
2013/11/20 职场文书
银行柜员应聘推荐信范文
2013/11/24 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
五一晚会主持词
2015/07/01 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
浅谈Python数学建模之固定费用问题
2021/06/23 Python
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技