首页 > 代码库 > jquery15 on() trigger() : 事件操作的相关方法

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() : 事件操作的相关方法