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>
时间： 2024-10-10 00:52:29

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

jquery14 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> jQu

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

U3D Trigger事件触发

使用Trigger事件触发,可以达到虽然触发了,可是不改变任何效果. 这个是进入时候触发的: void OnTriggerEnter2D(Collider2D other) { print (other.transform.name); } 退出触发: void OnTriggerExit2D(Collider2D other) { print (other.transform.name + "-----"); } 停留时触发: void OnTriggerStay2D(Collide

子数涵数&#183;Flash——影片剪辑的事件操作

一.综述 1.概念:影片剪辑的事件操作,就是onClipEvent命令,就如同在按钮上使用的on命令. 2.方法:onClipEnvent(参数){命令} 3.参数:onClipEnvent有许多的参数,常用的有以下几种,如下图. 二.具体使用 (影片剪辑的事件命令一定要写在影片剪辑上) 1.load调用时 onClipEvent (load) { this._rotation+=15 //只旋转一次15°,a+=1就相当于a=a+1 } 2.enterFrame不断触发 onClipEvent

【工作记录】android手势事件操作记录

/* 用户按下触摸屏.快速移动后松开 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { //参数解释: // e1:第1个ACTION_DOWN MotionEvent // e2:最后一个ACTION_MOVE MotionEvent // velocityX:X轴上的移动速度,像素/秒 // velocityY:Y轴上的移动速度,像素/秒 // 触发条件 : /

154在屏幕中绘图时设置透明度（扩展知识：为图片视图添加点击手势识别器，来实现点击事件操作）

一张图片,通过混合模式绘制后,能得到不同效果的图片. 这里的示例仅是测试效果:实际上可以通过不同程度的混合模式绘制,来得到符合需求的效果. 效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @property (strong, nonatomic) UIImageView *imgVBlend; 5 @property (strong, nona

js事件操作

常用事件分类: onclick(点击) onmouseover(鼠标放上) onmouseout(鼠标移开) onfocus(获得焦点) onblur(失去焦点) onload(网页加载完) ondblclick(鼠标双击) onkeydown(键盘按下) onkeyup(键盘抬起) onkeypress(按下并抬起) DOM0级事件设置方式: a)         <input  onclick=”alert(this)”>  this指引当前input框 b)        <inp

jquery api 常见 事件操作

change.html 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ready.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"

10-JavaScript之DOM的事件操作

JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 2.事件 JS是以事件驱动为核心的一门语言 2.1事件的三要素 事件的三要素:事件源.事件.事件驱动程序. 比如,我用手去按开关,灯亮了.这件