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语句等 ...
随机推荐
- 22.允许重复的容器(unordered_multiset)
#include <string> #include <iostream> #include <unordered_set> using namespace std ...
- OpenGL编程逐步深入（十）索引绘制
准备知识 OpenGl提供了一些绘图函数.到目前为止我们使用的glDrawArrays绘图函数属于"顺序绘制".这意味着顶点缓冲区从指定的偏移量开始被扫描,每X(点为1,直线为2等 ...
- Django分页和查询参数的问题
查询是通过get的方式,之前没有分页之前,url是这样的: http://hostname/search?query=port%3A8080 那么我的想法是如果分页了. 1,不带page参数了.nex ...
- Java hashCode(), equals()
转自:http://blog.csdn.net/fenglibing/article/details/8905007冯立彬的博客 以下是关于HashCode的官方文档定义: hashcode方法返回该 ...
- PostgreSQL Replication之第二章 理解PostgreSQL的事务日志（5）
2.5 XLOG的内部结构 我们将使用事务贯穿本书,并让您在技术层面上更深地洞察事情是如果工作的,我们已经增加了这部分专门处理XLOG的内部工作机制.我们会尽量避免前往下降到C级,因为这将超出本书的范 ...
- <Sicily>Prime Palindromes
一.题目描述 The number 151 is a prime palindrome because it is both a prime number and a palindrome (it i ...
- Mac上vmware虚拟机Windows10安装Tomcat8.0及配置环境
1.下载tomcat8.0或其他版本.下载地址:http://tomcat.apache.org/download-80.cgi 2.双击进行解压. 3.安装成功之后,右键我的电脑 --> 选择 ...
- NodeJS学习笔记 (31)定时器-timers
https://github.com/chyingp/nodejs-learning-guide
- Http协议与TCP协议理解（转载的）
TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.Http会通 ...
- luogu-1908 逆序对 离散化+树状数组
题目链接:https://www.luogu.org/problem/show?pid=P1908 题意 简单的求逆序对 思路 用树状数组来做逆序对 对于过大的数字来讲,用离散化处理即可 比赛的时候没 ...