<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

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

<script>

jQuery.event = {

    global         事件的全局属性(源码还没用到)

    add            绑定事件

    remove         取消事件

    trigger        主动触发事件

    dispatch       配发事件的具体操作

    handlers       函数执行顺序的操作

    props          JQ中共享原生JS的event属性

    fixHooks       收集event兼容的集合

    keyHooks       键盘的event兼容

    mouseHooks     鼠标的event兼容

    fix            event对象的兼容处理

    special        特殊事件的处理

    simulate       focusin的模拟操作(trigger , dispatch)

};

jQuery.Event = function(){};

jQuery.Event.prototype = {

    isDefaultPrevented

    isPropagationStopped

    isImmediatePropagationStopped

    preventDefault

    stopPropagation

    stopImmediatePropagation

};

jQuery.fn.extend({

    on

    one

    off

    trigger

    triggerHandler

});

//6720

.click();

.mouseover();

jQuery.fn.extend({

    hover

    bind

    unbind

    delegate

    undelegate

});

$(function(){

    $('#div1').on('click',function(){

        alert(123);

    });

    $('#div1').on('click',{name:'hello'},function(ev){

        alert(ev.data.name);

    });

-----------------------------------------------------------------------

    //ul要是li的父级或者主线节点

    /*

    delegate: function( selector, types, data, fn ) {

        return this.on( types, selector, data, fn );//this=$('ul')

    },

    */

    $('ul').delegate('li','click',{name:'hello'},function(){

        $(this).css('background','red');//点击li,li变红，这个点击其实是ul身上，通过委托加到了li身上

    });

    $('ul').on('click','li',{name:'hello'},function(){//这也是委托，on有selector就是委托

        $(this).css('background','red');

    });

-----------------------------------------------------------------------

    $('#div1').on('click',function(){

        alert(123);

    });

    $('#div1').on('mouseover',function(){

        alert(456);

    });

    $('#div1').on({

        'click' : function(){

            alert(123);

        },

        'mouseover' : function(){

            alert(456);

        }

    });

-----------------------------------------------------------------------

    $('#div1').one('click',function(){//只执行一次

        alert(123);

    });

-------------------------------------------------------------------

    $('#input1').focus(function(){

        $(this).css('background','red');

    });

    $('#input1').trigger('focus');//触发focus事件

    $('#input1').triggerHandler('focus');   //触发focus事件，但是光标不会移进去，不会触发当前事件的默认行为

});

</script>

</head>

<body>

<div id="div1">div</div>

<ul>

    <li>11111</li>

    <li>11111</li>

    <li>11111</li>

    <li>11111</li>

</ul>

<input type="text" id="input1">

</body>

</html>

jquery14 on() trigger() : 事件操作的相关方法的更多相关文章

  1. jquery15 on() trigger() : 事件操作的相关方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. trigger事件模拟

    事件模拟trigger 在操作DOM元素中,大多数事件都是用户必须操作才会触发事件,但有时,需要模拟用户的操作,来达到效果. 需求:页面初始化时触发搜索事件并获取input控件值,并打印输出(效果图如 ...

  3. jq事件操作汇总

    bind()        向匹配元素附加一个或更多事件处理器blur( )        触发.或将函数绑定到指定元素的 blur 事件change()        触发.或将函数绑定到指定元素的 ...

  4. jQuery 事件操作

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

  5. HTML 事件(四) 模拟事件操作

    本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4.  ...

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

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

  7. （旧）子数涵数·Flash——影片剪辑的事件操作

    一.综述 1.概念:影片剪辑的事件操作,就是onClipEvent命令,就如同在按钮上使用的on命令. 2.方法:onClipEnvent(参数){命令} 3.参数:onClipEnvent有许多的参 ...

  8. U3D Trigger事件触发

    使用Trigger事件触发,可以达到虽然触发了,可是不改变任何效果. 这个是进入时候触发的: void OnTriggerEnter2D(Collider2D other) { print (othe ...

  9. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

随机推荐

  1. Linux下离线安装MySQL

    Linux下安装mysql 1 检查并卸载已安装mysql 命令:rpm -qa|grep -i mysql 命令:rpm -e --nodeps ‘上个命令后显示的本机已安装mysql依赖’ 如果存 ...

  2. Metasploit渗透测试实验报告

    Metasploit渗透测试实验报告

  3. kali 2.0 linux中的Nmap的操作系统扫描功能

    不多说,直接上干货! 可以使用-O选项,让Nmap对目标的操作系统进行识别. msf > nmap -O 202.193.58.13 [*] exec: nmap -O 202.193.58.1 ...

  4. <Sicily>Funny Game

    一.题目描述 Two players, Singa and Suny, play, starting with two natural numbers. Singa, the first player ...

  5. plt.rcParams[]

    plt.rcParams[] pylot使用rc配置文件来自定义图形的各种默认属性,称之为rc配置或rc参数.通过rc参数可以修改默认的属性,包括窗体大小.每英寸的点数.线条宽度.颜色.样式.坐标轴. ...

  6. [BJOI2014]大融合 LCT维护子树信息

    Code: #include <cstdio> #include <algorithm> #include <cstring> #include <strin ...

  7. 洛谷3933 Chtholly Nota Seniorious 二分答案+贪心

    题目链接 题意 给你一个N*M的矩阵 (N,M <=2000)  把他分成两部分 使两部分的极差较大的一个最小  求这个最小值.然后分矩阵的要求是:每个部分内部的方块之间,可以通过上下左右相互到 ...

  8. 【转】NPOI使用手册

    [转]NPOI使用手册 NPOI使用手册 目录 1.认识NPOI 2. 使用NPOI生成xls文件 2.1 创建基本内容 2.1.1创建Workbook和Sheet 2.1.2创建DocumentSu ...

  9. 关于App程序猿泡沫

    前言 做开发快七年了,对于程序猿,外行人总有着数不完的讽刺和误解,可是我都懒得去解释.代码搬运工人也好,民工也罢,随他们去说吧.可是网上近期流传的程序猿泡沫,尤其是APP程序猿泡沫的文章导致非常多我们 ...

  10. 关于HttpClient模拟浏览器请求的參数乱码问题解决方式

    转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/44407297 http://www.llwjy.com/blogdetail/9 ...