文档章节

Javascript 页面行为事件&自定义事件

IamOkay
 IamOkay
发布于 2014/11/28 17:46
字数 674
阅读 181
收藏 14

页面行为事件

定义:指窗体(window)和根页面(document)的形态、状态的改变触发的时间,这里主要指出典型的页面行为事件。

常见的页面行为事件

//阻塞询问用户
window.onbeforeunload = function() {  
 
    return '你确认要离开吗?';
  
};

//无法阻塞
window.onunload = function() {
 
    
  
};

//无法阻塞
window.onclose = function() {
 
    
  
};
//无法阻塞
window.onload = function(){

};

页面加载完成的事件(在onload之后调用)

//页面状态事件
document.onreadystatechange = function(){

    if(document.readyState=='complete')
     {
       
     }
};

//页面加载完最先调用的事件
document.addEventListener("DOMContentLoaded", functio(){

}, false);

 

页面像素变化事件meidaQueryChanged

var mql = window.matchMedia("(max-width: 700px)"); //顶一个mediaQuery匹配对象,当匹配到当前media,则触发回调
 // 指定回调函数 
mql.addListener(function(mql){   
   if (mql.matches) {   
  
     // 宽度小于等于700像素   
  } else {    
      // 宽度大于700像素  
      mql.removeListener(mqCallback); 
   }
 
});

 

移动页面触摸事件

function load (){

	document.addEventListener('touchstart',touch, false);
	document.addEventListener('touchmove',touch, false);
	document.addEventListener('touchend',touch, false);
	
	function touch (event){
		var event = event || window.event;
		
		var oInp = document.getElementById("inp");

		switch(event.type){
			case "touchstart":
				oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
				break;
			case "touchend":
				oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
				break;
			case "touchmove":
				event.preventDefault();
				oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
				break;
		}
		
	}
}
window.addEventListener('load',load, false);

 

html5滚轮控件  http://www.17sucai.com/pins/7750.html

 

~~~~~~~~~~~~~~~~~~~~2014-11-29 更新~~~~~~~~~~~~~~~~~~~~~~~

自定义事件

对于自定义事件,这是一个很时尚的词汇,对于一个事件,他需要具备什么样的条件呢?

①使用特定的消息队列,必须遵守先进先出的原则

②事件具有瞬时性,在特定的条件下,事件造成的结果不会持久化,除非特别的进行了保存

③事件必须可传递,可被拦截,可以阻止浏览器默认行为

④必须遵循3个阶段的原则(根元素-*-*->目标元素的捕获阶段;目标元素的处理阶段;目标元素-*-*->根元素冒泡阶段),

其中第一阶段对于非目标元素而言,并不自动(当然如果你喜欢的话其实也可以捕获进行捕获处理(这点比android好多了),

(注:在标准浏览器中,addEventListener的第三个参数 useCapture表示是否在捕获阶段捕获,值为true时在捕获阶段捕获)

⑤必须可触发dispatchEvent

自定义事件①

/**
 *自定义事件
 *
 **/
var myEvent = document.createEvent('CustomEvent'); 

myEvent.initCustomEvent('myevent',true,false,{name:'张三'});
//参数1表示事件的名称,参数二表示是否可冒泡,参数三表示是否可取消

element.addEventListener('myevent', function(event) {
   
    console.log('Hello ' + event.detail.name);
    
 }); 
 
element.dispatchEvent(myEvent);

 

注意:createEvent的参数必须参考如下表格

自定事件②

此外,还有一种自定义事件的方式

document.addEventListener('look',function(){

 console.log('look me !');

},false);

var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);

 

try doing it!

 

© 著作权归作者所有

IamOkay

IamOkay

粉丝 198
博文 483
码字总数 403041
作品 0
海淀
程序员
私信 提问
JavaScript零基础入门——(十三)JavaScript的事件

JavaScript零基础入门——(十三)JavaScript的事件 大家好,欢迎回到我们的JavaScript零基础入门。上一节课,我们了解了JavaScript定时器,也演示了一些比较经典的例子,其实我们已经用到了...

JandenMa
2018/07/01
0
0
jquery之trigger()

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。 <script type="text/javascrip...

freedonn
2014/09/13
0
0
JavaScript学习笔记(一)——JS基础知识介绍

术语解释 Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为...

长平狐
2013/01/06
113
0
asp.net中调用javascript自定义函数的方法(包括引入JavaScript文件)总结

通常javascript代码可以与HTML标签一起直接放在前端页面中,但如果JS代码多的话一方面不利于维护,另一方面也对搜索引擎不友好,因为页面因此而变得臃肿;所以一般有良好开发习惯的程序员都会...

黄献
2012/11/04
0
0
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot 日志

spring-boot-starter中就提供了对spring-boot-starter-logging的依赖 在spring-boot-starter-logging中可以看到以及集成了slf4j与具体实现logback的默认支持 日志级别 默认情况下,Spring Bo...

少年已不再年少
16分钟前
2
0
UltraEdit使用正则表达式

正则表达式 (UltraEdit Syntax): % 匹配行首 - 表明要搜索的字符串一定在行首. $ 匹配行尾 - 表明要搜索的字符串一定在行尾 ? 匹配除换行符外的任一单个字符. * 匹配任意个数的字符出现任意次...

阿锋zxf
23分钟前
1
0
苹果面向Mac发布英特尔处理器漏洞缓解措施

去年苹果向Safari浏览器推出安全更新以修复基于ARM价格和英特尔的处理器存在的推测执行系列安全漏洞。 不过当时苹果并未发布有关处理器性能下降的测试结果,但大家都知道安装缓解措施会造成处...

linuxCool
23分钟前
2
0
springboot使用

Spring 3.1 引入了基于注释(annotation)的缓存(cache)技术,它本质上不是一个具体的缓存实现方案(例如 EHCache 或者 OSCache),而是一个对缓存使用的抽象,通过在既有代码中添加少量它...

贾峰uk
38分钟前
3
0
NCRE考试感想 四级嵌入式(上)

权威的官方文件 考试时间:2017年3月 经验写于:2017年5月 万事万物都在变化,四级嵌入式也是如此。所以,该经验仅作为参考,官方的文件才是权威。   考试时间与题目架构 考试时间为90min,...

志成就
40分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部