<!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. 1.Windows7下安装与破解IntelliJ IDEA2017

    转自:https://www.cnblogs.com/justuntil/p/7245170.html IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界 ...

  2. sql查询每个学生的最高成绩mysql语句

    张三 语文 100 张三 数学 83 李四 语文 88 李四 数学 100 查询每个学生的最高成绩. select b.* from (select name,max(score) score fro ...

  3. windows下MySQL5.6以上版本，如何通过修改配置文件来修改数据库的最大连接数啊？

    并没有my.ini文件,只有一个my-default.ini文件,并且里面并没有max_connections windows下MySQL5.6以上版本,如何通过修改配置文件来修改数据库的最大连接数啊 ...

  4. C# HashSet<T> 简单使用

    一个简单的HashSet<T> 的例子,介绍其简单的方法,深入学习可参考微软:https://msdn.microsoft.com/en-us/library/bb359438(v=vs. ...

  5. <Sicily>Brackets Matching

    一.题目描述 Let us define a regular brackets sequence in the following way: Empty sequence is a regular s ...

  6. Android Studio获取开发版SHA1值和发布版SHA1值，详细过程

    转自原文 Android Studio获取开发版SHA1值和发布版SHA1值的史上最详细方法 前言: 今天我想把百度地图的定位集成到项目中来,想写个小小的案例,实现一下,但在集成百度地图时首先要申请秘 ...

  7. C语言函数--E

    函数名: ecvt 功 能: 把一个浮点数转换为字符串 用 法: char ecvt(double value, int ndigit, int *decpt, int *sign); 程序例: #i ...

  8. 从零開始学android&lt;SlidingDrawer 隐式抽屉.三十三.&gt;

    SlidingDrawer是一种抽屉型的组件.当用户选择打开此抽屉之后,会得到一些能够使用的"程序集".这样当一个界面要摆放多个组件的时候,使用此组件就能够非常好的解决布局空间紧张 ...

  9. HMACSHA256 Class

    https://msdn.microsoft.com/en-us/library/system.security.cryptography.hmacsha256(v=vs.110).aspx Comp ...

  10. 智课雅思词汇---七、cur是什么意思

    智课雅思词汇---七.cur是什么意思 一.总结 一句话总结:词根:cur, curs ( cor, cour, cours, coars) = to run 1.cub是什么意思? 词根:cumb, ...