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 21 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery插件实现图片轮播效果
Oct 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
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
php微信公众号开发模式详解
2016/11/28 PHP
javascript 节点排序 2
2011/01/31 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python采集百度百科的方法
2015/06/05 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
django反向解析和正向解析的方式
2018/06/05 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
社会实践自我鉴定
2013/11/07 职场文书
低碳环保标语
2014/06/12 职场文书
服务标语大全
2014/06/18 职场文书
房屋出售授权委托书
2014/10/12 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
2015年电教工作总结
2015/05/26 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书