<!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. HBase框架基础（一）

    * HBase框架基础(一) 官方网址:http://hbase.apache.org/ * HBase是什么妖怪? 要解释HBase,我们就先说一说经常接触到的RDBMS,即关系型数据库: ** m ...

  2. 线程1—Thread

    随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread类实 ...

  3. vue2.0 兄弟组件数据传递方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. healthcheck

    -- ============================================================================= -- USAGE  : sqlplus ...

  5. 共用体 union

    共用体是一种数据格式,能够存储不同的数据类型,但只能同时存储其中的一种类型. union one4all { int int_val; double double_val; long long_val ...

  6. php动态导出数据成Excel表格

    一.封装 Excel 导出类 include/components/ExecExcel.php <?php /*** * @Excel 导入导出类. */ class ExecExcel { / ...

  7. Git强制覆盖master分支

    在开发中,通常会保持两个分支master分支和develop分支,但是如果因为develop上面迭代太多而没有及时维护master,最后想丢弃master而直接将测试确认过的develop强推到mas ...

  8. Unity Shader （四）顶点程序示例

    1.在顶点函数中实现凸起效果 Shader "Custom/Example" { properties { _R(,))= //圆的半径,也是凸起的范围 _OX(,))= //x轴 ...

  9. 题解 P3521 【[POI2011]ROT-Tree Rotations】

    这道题采用权值线段树合并的解法. 首先讲一下解法中出现的两个概念:权值线段树与线段树合并. 所谓权值线段树,可以理解为维护的信息反过来的普通线段树,我个人认为值域线段树这个名字其实要准确一些. 举个例 ...

  10. 在Windows上调整SGA大小遭遇ora-27100、ora-27102错误的处理方法

    今天早上去一公司合作伙伴那里,协助处理他们某客户的数据库性能问题,那个库是Oracle 10.2.0.1的,前台业务系统是政府某机构查询系统,碰到的问题是首页展示很慢,与之相关的SQL语句查询结果须要 ...