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

Posted 2020-09-21 672530440

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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() : 事件操作的相关方法的主要内容，如果未能解决你的问题，请参考以下文章

jquery的自定义事件通过on绑定trigger触发

jQuery 的自定义事件

javascript实现jQuery的trigger方法 .

Jquery 中 .trigger 的用法

使用jQuery中trigger()方法自动触发事件

jQuery之on