<!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. spring boot 的常用注解使用 总结

    附:Spring Boot 官方文档学习(一)入门及使用见https://www.cnblogs.com/larryzeal/p/5799195.html @RestController和@Reque ...

  2. 2.boost遍历数组容器

    #include <iostream> #include <string> #include<boost/array.hpp>//区别 using namespac ...

  3. 移动端viewport解惑

    我们在做移动端webapp的时候需要设置这么一段: <meta name="viewport" content="width=device-width, initi ...

  4. 紫书 例题 10-９ UVa 1636 （概率计算）

    小学数学问题 记得分数比较的时候可以交叉相乘(同号) #include<cstdio> #include<cstring> #define REP(i, a, b) for(i ...

  5. MyBatis学习总结（17）——Mybatis分页插件PageHelper

    如果你也在用Mybatis,建议尝试该分页插件,这一定是最方便使用的分页插件. 分页插件支持任何复杂的单表.多表分页,部分特殊情况请看重要提示. 想要使用分页插件?请看如何使用分页插件. 物理分页 该 ...

  6. Eclipse下面的Maven管理的SSH框架整合（Struts,Spring,Hibernate)

    搭建的环境:eclispe下面的maven web项目 Struts:    2.5.10 Spring:    4.3.8 Hibernate:   5.1.7 .Final MySQL:   5. ...

  7. 开源项目 AllJoyn 基础服务

    AllJoyn 基础服务主要包含 Onboarding,Notification 和 Control Panel三个大项. 这三个也是编写App的最基础的,最经常使用的部分. Onboarding 提 ...

  8. 优化时序之补全if else

    时序优化中重要的一项就是提高模块的最高工作频率,工作频率由关键路径决定,通常的提高工作频率的步骤是:利用时序分析工具找到关键路径,分析关键路径主要延迟是布线延迟还是逻辑延迟,然后轮番十八般武器,如果是 ...

  9. Introduction to IIS Architectures

    https://docs.microsoft.com/en-us/iis/get-started/introduction-to-iis/introduction-to-iis-architectur ...

  10. orm 通用方法——RunProc调用存储过程

    该方法暂不支持带返回值的存储过程,期待能人补充指点. 定义代码: /** * 描述:执行存储过程 * 作者:Tianqi * 日期:2014-09-16 * param:rs orm.RawSeter ...