jquery15 on() trigger() : 事件操作的相关方法
2024-10-01 18:14:15
<!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>
最新文章
- Codeforces Round #258 (Div. 2)
- 设置默认访问项目的客户端的浏览器版本（IE版本）
- Uwp Windows10获取设备位置（经纬度）
- jsp页面间传递参数 中文乱码问题(zz)
- 递推DP URAL 1009 K-based Numbers
- Heritrix源码分析(九) Heritrix的二次抓取以及如何让Heritrix抓取你不想抓取的URL
- zoj1028-Flip and Shift
- 说说SACC2016第八届架构师大会
- win7 Anaconda 安装 scrapy模块
- HMM：隐马尔可夫模型HMM
- 开启irqbalance提升服务器性能
- MRP设置自动执行
- CFileFind
- python网络编程（七）
- JavaScript的类、对象、原型、继承、引用
- nginx: [emerg] BIO_new_file("/etc/nginx/ssl_key/server.crt") failed (SSL: error:02001002:syste
- 从SharePoint 2013迁移到SharePoint Online - 评估工具
- 苹果Mac OS 显示隐藏文件
- iOS蓝牙APP常驻后台
- PAT 1051 复数乘法
热门文章
- spring mvc给参数起别名
- [转]60fps on the mobile web
- javascript中的那些宽度和高度
- [codewars_python]Best travel
- Java基础学习总结（19）——Java环境变量配置
- Java基础学习总结（15）——java读取properties文件总结
- Gradle编译spring3.x报错找不到itextpdf4.2.2解决方案
- 从零開始学android&lt;SlidingDrawer 隐式抽屉.三十三.&gt;
- hdu4691 Front compression(后缀数组)
- Broadleaf电商系统开发(一) - Broadleaf介绍