<!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. BZOJ 2115 DFS+高斯消元

    思路: 先搞出来所有的环的抑或值 随便求一条1~n的路径异或和 gauss消元找异或和最大 贪心取max即可 //By SiriusRen #include <cstdio> #inclu ...

  2. Metasploit渗透测试实验报告

    Metasploit渗透测试实验报告

  3. FLUME KAFKA SOURCE 和 SINK 使用同一个 TOPIC

    FLUME KAFKA SOURCE 和 SINK 使用同一个 TOPIC 最近做了一个事情,过滤下kakfa中的数据后,做这个就用到了flume,直接使用flume source 和 flume s ...

  4. css hover图片hover效果兼容ie8

    例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. [POI2002][HAOI2007]反素数 数论 搜索 好题

    题目描述: 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1,2,4, ...

  6. [转载]-分布式之redis复习精讲

    原创地址:https://www.cnblogs.com/rjzheng/p/9096228.html 看这篇文章前,我看的是另一个人博客上的文章.看到最后(评论这一块)很多人就指出这并非原创而是抄袭 ...

  7. ConEmu windows上的终端工具

    ConEmu Windows terminal   官网: http://conemu.github.io/        

  8. Git学习总结（6）——作为一名程序员这些代码托管工具你都知道吗？

    作为一名程序员这些代码托管工具你都知道吗? 作为一名优秀的开发者,大家都会用到代码托管,我本人用的是github,确实github里面有很多很多开源的项目,所以我们目前的创业项目程序员客栈www.pr ...

  9. 洛谷 P1754 球迷购票问题

    P1754 球迷购票问题 题目背景 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的 ...

  10. 一些牛人的IOS博客，mark下慢慢学习

    http://blog.devtang.com/                  唐巧的个人blog http://gracelancy.com/     Lancy's blog http://b ...