事件绑定

1、简单事件绑定

$("button").click(function () {})//可重复绑定，不会被层叠

2、bind()：不推荐使用

$("button").bind("click mouseenter",function () {})//可通过绑定多个事件，但是事件源必须存在文档中

3、delegate()

$(".parentBox").delegate("p", "click", function(){}) //父元素下绑定子元素事件

$("button").delegate("click",function () {})//支持动态创建元素

4、on()

$(.parentBox).on( "click",“span”, function() {}) //父元素下绑定子元素事件

$(selector).on(events，[selector]，[data],handler) //data是传递给函数的数据，event.data可调用

$("button").on("click",function () {})//支持动态创建元素
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            border: 1px solid #ccc;

        }

    </style>

    <script src="jquery-1.11.1.js"></script>

    <script>

        $(function () {

            $("div").on("click", "button:eq(0)", function () {

                alert("11");

            });

            $("button:eq(1)").on("click", function () {

                alert(22);

            });

        });

    </script>

</head>

<body>

<div>

    <button>点击1</button>

    <button>点击2</button>

</div>

</body>

</html>

事件解绑

1、unbind()

$(selector).unbind(); //解绑所有的事件

$(selector).unbind(“click”); //解绑指定的事件

2、undelegate()

$( selector ).undelegate(); //解绑所有的delegate事件

$( selector).undelegate( “click” ); //解绑所有的click事件

3、off()

$(selector).off();// 解绑匹配元素的所有事件

$(selector).off(“click”);// 解绑匹配元素的所有click事件

$(selector).off( “click”, “**” ); // 解绑所有代理的click事件，元素本身的事件不会被解绑

事件触发

1、简单事件触发

$(selector).click(); //触发 click事件

2、trigger()：触发浏览器行为

$(selector).trigger(“click”);

3、triggerHandler()：不触发浏览器行为

$(selector).triggerHandler(“focus”);//不会触发默认行为，只会执行函数体的内容
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.11.1.js"></script>

    <script>

        //input注册的focus事件虽然被处罚，但是光标并没有进入标签内

        $(function () {

            $("input").focus(function () {

                alert("input注册的focus被触发")

            });

            $("button").click(function () {

                $("input").triggerHandler("focus");

            });

        });

    </script>

</head>

<body>

<button>手动触发事件</button>

<input type="text">

</body>

</html>

事件对象

event.data                    //传递给事件处理程序的额外数据

event.currentTarget           //等同于this，当前DOM对象

event.pageX                   //鼠标相对于文档左部边缘的位置

event.target                  //触发事件源，不一定===this

event.stopPropagation()；      //阻止事件冒泡

event.preventDefault();       //阻止默认行为

event.type                    //事件类型：click，dbclick…

event.which                   //鼠标的按键类型：左1 中2 右3

event.keyCode                 //键盘按键代码

jQuery——事件操作的更多相关文章

  1. jQuery 事件操作

    入口函数 使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...

  2. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  3. jQuery事件操作

    bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...

  4. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  5. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  6. [jQuery学习系列四 ]4-Jquery学习四-事件操作

    前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365 ...

  7. Jquery基础之事件操作

    事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...

  8. 事件冒泡及事件委托的理解（JQuery Dom操作）

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  9. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

随机推荐

  1. jQuery动态添加表格1

    用jquery的append方法在指定行的后面新增一行tr,会把新增的行的html追加到指定行的html里面 content +="<tr><td>123</t ...

  2. BZOJ1452 count （树状数组）

    一道比较水的二维树状数组,开100个即可,只有100种颜色还是比较EZ的. Program BZOJ1452; ; maxc=; ..maxn,..maxn,..maxc] of longint; f ...

  3. Ubuntu 16.04使用NASM编译时用ld链接程序出现：i386 架构于输入文件 sandbox.o 与 i386:x86-64 输出不兼容（I386 architecture in the input file sandbox.o is not compatible with i386: x86-64 output）

    错误: 问题解决过程: 1.先确定CPU的架构 2.这是以64位架构的CPU,如果使用elf参数时,默认是以32位模式去处理,那么此时需要更精确的去指定这个模式,比如elf32(32位),elf64( ...

  4. Memcached高可用方案收集（集群及分布式）

    Memcached的集群方案有很多,不止magent一个,但是单靠集群软件去实现高可用感觉还是会缺少一步,最推荐的方案应该是软件加编码去实现高可用,至少能保证站点的99.5%的可运行行,以下是集群的方 ...

  5. 红帽/CentOS ext4无法格式化大分区

    红帽/CentOS 6.5的e2fsprogs版本号为1.41.12较低.无法创建16TB以上的文件系统 下载最新的e2fsprogs,编译安装 ftp://ftp.ntu.edu.tw/linux/ ...

  6. POJ 1260-Pearls（DP）

    Pearls Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7465   Accepted: 3695 Descriptio ...

  7. 异常：”未处理System.TypeLoadException“

    1.问题由来:     在敲系统时原来的已有的类都能正常的执行,可是当加入一个新的实体类CancelCard的时候系统执行时显示错误例如以下: watermark/2/text/aHR0cDovL2J ...

  8. Workspace in use or cannot be created, choose a different one.--错误解决的方法

    eclipse 使用一段时间后.有时会由于一些故障自己就莫名奇异的关闭了,再打开时有时没有问题,有时有会提示错误 Workspace Unavailable: Workspace in use or ...

  9. MapR CEO对2016大数据的5个预測

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/mapr-ceo-5-big-data-predictions MapR ...

  10. Faas 典型场景——应用负载有显著的波峰波谷，典型用例-基于事件的数据处理

    Serverless适用的两大场景 场景一:应用负载有显著的波峰波谷 Serverless化与否的评判标准并不是公司规模的大小,而是其业务背后的具体技术问题,比如业务波峰波谷明显,如何实现削峰填谷.一 ...