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

<!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>

$(function(){

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

        alert(1);

        $('#div1').off('click');

    });

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

        alert(2);

    });

    $('#div1').trigger('click');//弹出1,2

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

    $('#span1').on('show',function(){//自定义事件，show是函数名，后面是函数体，

        alert(3);

    });

    $('#span1').trigger('show');//自定义事件只能通过trigger触发，调用函数show执行

    $('#span1').on('hide',function(){//函数名字相同名字会覆盖，事件名相同不会覆盖，这是跟函数的区别

        alert(3);

    });

    $('#span1').on('hide',function(){

        alert(4);

    });

    $('#span1').trigger('hide');//弹出3,4

});

window.onload = function(){

    var oDiv = document.getElementById('div1');

    var oSpan = document.getElementById('span1');

    var aaa = function(){

        alert(1);

    };

    var bbb = function(){

        alert(2);

    };

    var ccc = function(){

        alert(3);

    };

    add(oDiv,'click',aaa);

    remove(oDiv,'click',aaa);

    add(oSpan,'show',aaa);

    add(oSpan,'show',bbb);

    add(oSpan,'hide',ccc);

    remove(oSpan,'hide');

    trigger(oSpan,'hide');  

};

function add(obj,eventName,fn){

    /*

    oSpan=｛

        listeners：｛

            eventName1:[fn1,fn2],

            eventName2:[fn3,fn4]

        ｝

    ｝

    */

    obj.listeners = obj.listeners || {};//保证第一次进来是{}，后面使用的时候不是null,第二次进来不再是{}而是之前的。

    obj.listeners[eventName] = obj.listeners[eventName] || [];

    obj.listeners[eventName].push(fn);

    //不是自定义事件可以不通过trigger调用

    obj.addEventListener(eventName,fn,false);

}

function remove(obj,eventName,fn){

    obj.removeEventListener(eventName,fn,false);

    //等同于上面写法

    delete obj.listeners[eventName];

}

function trigger(obj,eventName){

    var arr = obj.listeners[eventName] || [];

    for(var i=0;i<arr.length;i++){

        arr[i]();//函数执行

    }

}

</script>

</head>

<body>

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

<span id="span1">span</span>

</body>

</html>

<!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>

window.onload = function(){

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

        alert(1);

    });

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

        alert(2);

    });

    $('#div1').on('click.AAA','span',function(c){//AAA是命名空间

        alert(3);

    });

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

        alert(4);

    });

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

        alert(5);

    });

};

console.log(data_priv);

/*

data_priv = Data {cache: Object, expando: "jQuery203079181909836815280.49169554144700656"}

*/

/*  guid是第几个添加进去的，handler是事件函数，handle:function(e){}是真正事件函数，delegateCount 委托的个数,needsContext有委托就是false,origType是原始事件，可能不兼容，type就是兼容后的事件

data_priv = ｛

    cache:{

        1:{},

        2:{},

        3:{   //$('#div1')  3这个json是elemData

               events:{   //elemData.events = {}

                bind:[

                {

                    data:undefined,guid:5,handler:function (){guid:5},namespace:"",needsContext:undefined,

                    origType:"bind",selector:undefined,type:"bind"

                },

                delegateCount:0

                ],

                click:[   //handlers = events[ type ] = [];

                {      //handleObj={}

                    data:undefined,          //没有传数据data

                    guid:3,               //函数的标识

                    handler:function (c){guid:3},  //普通函数

                    namespace:"AAA",

                    needsContext:false,

                    origType:"click",

                    selector:"span",     //委托

                    type:"click"

                },

                {

                    data:undefined,guid:1,

                    handler:function (a),namespace:"",

                    needsContext:undefined,

                    origType:"click",selector:undefined,

                    type:"click"

                },

                {

                    data:undefined,guid:2,handler:function(b),

                    namespace:"",needsContext:undefined,

                    origType:"click",selector:undefined,

                    type:"click"

                },

                delegateCount:1]

            }

            handle : function(e){}        //eventHandle = elemData.handle=function(), elem.addEventListener( type, eventHandle, false )绑定事件函数

        }

        4:{   //$('body')

            events:{

                click:[

                {

                    data:undefined,guid:4,handler:function (c),namespace:"",needsContext:false,

                    origType:"click",selector:"#div1",

                    type:"click"

                },

                delegateCount:1

                ]

            }

            handle:function(e){}

        }

    }

｝

*/

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

        alert(2);

        //event.preventDefault();  //阻止默认事件

        //event.stopPropagation(); //阻止冒泡事件

        return false;  //阻止冒泡和阻止默认事件

    });

});

</script>

</head>

<body>

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

</body>

</html>

<!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>

$(function(){

    $(document).on('mousedown',function(ev){

        alert(ev.pageX);

        alert(ev.pageY);    //距离页面顶部的距离(滑动不见也算)

        //ev : jq中的event

        alert(ev.originalEvent);

        //ev.originalEvent : 原生JS中的event

        //changedTouches  //原生的event才有，jQery的event没有

        alert(  ev.clientY );  //距离屏幕顶部的距离(滑动不见不算)

    });

    $('span').on('click',function(ev){//ev是jQuery的event,

        alert(ev.originalEvent);//originalEvent这就是原生的event

        alert(ev.which);//左键1中键2右键3，最好用mousedown不用click

        alert(3);

    });

    $('div').on('click',function(){

        alert(1);

    });

    $('span').on('click',function(){

        alert(2);

    });

    $('span').on('click',function(ev){

        alert( ev.isPropagationStopped() );

        ev.stopPropagation();//2,3弹1不弹

        ev.stopImmediatePropagation();//3弹1,2不弹，同一元素的其他事件也阻止

        console.log(ev);

        alert( ev.isPropagationStopped() );

        alert(3);

    });

});

document.onkeydown = function(ev){

    var ev = ev || window.event;

    alert(ev.which);  //IE8以下版本不支持，用charCode keyCode替代

};

document.onkeypress = function(ev){

    var ev = ev || window.event;

    alert(ev.charCode);  //charCode keyCode

};

$('div').on('click',function(ee){

    console.log(ee);

    {altKey:false,bubbles:true,button:0,buttons:0,cancelable:true,

    clientX:25,clientY:22,ctrlKey:currentTarget:div#div1,

    data:undefined,delegateTarget:div#div1,eventPhase:2,

    handleObj:Object,isDefaultPrevented:function returnFalse(),

    jQuery20300025591973997705075:true,metaKey:false,

    offsetX:17,offsetY:14,originalEvent:MouseEvent,pageX:25,

    pageY:22,relatedTarget:null,:513,screenY:117,shiftKey:false,

    target:timeStamp:3422.9950000000003,toElement:div#div1,

    type:"click",view:Window,which:1,}

});

</script>

</head>

<body style="height:2000px;">

<div>div<span>span</span></div>

</body>

</html>

<!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.special

load

focus

blur

click

beforeunload

mouseenter

mouseleave

focusin

focusout

$(function(){

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

        alert(1);

    });

    $('input').on('click',function(){

        alert(2);

    });

    $('input').trigger('click');//父级div也弹出，冒泡了，

    $(window).on('load',function(){});

    $('img').on('load',function(){});

    $('img').trigger('load');//jQuery处理了，不会冒泡到div

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

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

        alert(1);

    });

    $('input').on('focus',function(){

        alert(2);

    });

    $('input').trigger('focus');//2不弹1，不冒泡

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

    $('#div1').delegate('input','focus',function(){

        alert(1);

    });

    $('#input1').on('click',function(){});

    $('#input1').trigger('click');

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

    $('a').on('click',function(){

        alert(1);

    });

    $('a').trigger('click');

    $(window).on('beforeunload',function(){ //关闭页面

        return 123;

    });

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

        alert(1);

    });

    $('input').trigger('focusin');

});

</script>

</head>

<body>

<div id="div1"><input type="text"></div>

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

<a href="http://www.baidu.com">aaaaaa</a>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

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

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

<style>

#div1{ width:200px; height:200px; background:red;}

#div2{ width:100px; height:100px; background:yellow;}

</style>

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

<script>

window.onload = function(){

    var oDiv1 = document.getElementById('div1');

    var oDiv2 = document.getElementById('div2');

    var oSpan1 = document.getElementById('span1');

    oDiv1.onmouseover = function(ev){

        var ev = ev || window.event;

        var a = this;

        var b = ev.relatedTarget;

        if( !elContains(a, b) && a!=b ){

            oSpan1.innerHTML += '1';

        }

    };

    oDiv1.onmouseout = function(ev){

        var ev = ev || window.event;

        var a = this;

        var b = ev.relatedTarget;

        if( !elContains(a, b) && a!=b ){

            oSpan1.innerHTML += '2';

        }

    };

};

function elContains(a, b){  //两个元素是否是嵌套关系

    return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);

}

$(function(){

    $('#span1').on('click.aaa',function(){

        alert(1);

    });

    $('#span1').on('mouseover.aaa',function(){

        alert(2);

    });

    $('#span1').off('.aaa');//把click和mouseover都移除了

});

</script>

</head>

<body>

<div id="div1">

    <div id="div2"></div>

</div>

<span id="span1">11111111111</span>

</body>

</html>

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

jquery14 on() trigger() : 事件操作的相关方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
trigger事件模拟
事件模拟trigger 在操作DOM元素中,大多数事件都是用户必须操作才会触发事件,但有时,需要模拟用户的操作,来达到效果. 需求:页面初始化时触发搜索事件并获取input控件值,并打印输出(效果图如 ...
jq事件操作汇总
bind() 向匹配元素附加一个或更多事件处理器blur( ) 触发.或将函数绑定到指定元素的 blur 事件change() 触发.或将函数绑定到指定元素的 ...
jQuery 事件操作
入口函数使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...
HTML 事件(四) 模拟事件操作
本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
（旧）子数涵数·Flash——影片剪辑的事件操作
一.综述 1.概念:影片剪辑的事件操作,就是onClipEvent命令,就如同在按钮上使用的on命令. 2.方法:onClipEnvent(参数){命令} 3.参数:onClipEnvent有许多的参 ...
U3D Trigger事件触发
使用Trigger事件触发,可以达到虽然触发了,可是不改变任何效果. 这个是进入时候触发的: void OnTriggerEnter2D(Collider2D other) { print (othe ...
10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

随机推荐

Kali linux 2016.2（Rolling）里Metasploit的口令猜测与嗅探
不多说,直接上干货! 对于发现的系统与文件管理类网络服务,比如Telnet.SSH.FTP等,可以进行弱口令的猜测,以及对明文传输口令的嗅探,从而尝试获取直接通过这些服务进入目标网络的通道. 对于SS ...
JavaScript 获取移动设备的型号
https://joyqi.com/javascript/how-to-detect-mobile-devices-model-using-javascript.html?utm_source=too ...
Scala和范畴论 -- 对Monad的一点认识
Scala和范畴论 -- 对Monad的一点认识背景所有一切的开始都是因为这句话:一个单子(Monad)说白了不过就是自函子范畴上的一个幺半群而已,有什么难以理解的.第一次看到这句话是在这篇文章: ...
Chromium Graphics: Compositor Thread Architecture
Compositor Thread Architecture <jamesr, enne, vangelis, nduca> @chromium.org Goals The main re ...
phpstorm10安装并汉化
一.下载phpstorm 下载地址:https://pan.baidu.com/s/1R64ZROVP1ljGbYfCwWjwxA 二.一直点击下一步安装即可注意:第3步的时候选择一下支持的后缀三 ...
oracle创建静态监听
[oracle@localhost admin]$ pwd /u01/app/oracle/product/11.2.0/dbhome_1/network/admin [oracle@localhos ...
关于vue自定义事件中，传递参数的一点理解
例如有如下场景先熟悉一下Vue事件处理  <template> <div> <!--我们想在这个dealName的方法中传递额外参数 ...
从终端运行python程序
终端窗口运行.py程序首先你要安装python,命令行输入 python 有python提示符 >>> 出现说明安装成功程序第一行应该是 #! python3 #! python ...
紫书例题 10-24 UVa 1641（面积计算）
遍历一遍,遇到边界为奇数次时,格子在多边形内偶数次时,在多边形外 #include<cstdio> #define REP(i, a, b) for(int i = (a); i < ...
浅析[分块]qwq
首先说明这篇博客写得奇差无比让我们理清一下为什么要打分块,在大部分情况下,线段树啊,splay,treap,主席树什么的都要比分块的效率高得多,但是在出问题的时候如果你和这些数据结构只是混的脸熟的话 ...

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

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

随机推荐

热门专题