事件:事件类型

Posted Zina

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件:事件类型相关的知识,希望对你有一定的参考价值。

事件类型

web浏览器中可能发生的事件有很多类型:
UI事件:当用户与页面上的元素交互时触发;
焦点事件:当元素获得或失去焦点时触发;
鼠标事件:当用户通过鼠标在页面上执行操作时触发;
滚轮事件:当使用鼠标滚轮(或类似设备)时触发;
文本事件:当在文档中输入文本时触发;
键盘事件:当用户通过键盘在页面上执行操作时触发;
合成事件:当为IME(input method editor,输入法编辑器)输入字符时触发;
变动事件:当底层dom结构发生变化时触发。
变动名称事件:当元素或属性名变动时触发。此类事件已经被废弃,没有任何浏览器实现它们

UI事件

1、load事件

<body onload="alert(‘Loaded‘)">
    <input type=‘button‘ value=‘click me‘ id=‘myBtn‘/>
</body>

 

图像也可以触发load事件

<img  src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  onload="alert(‘image Loaded‘)">

 

2、unload事件 与load事件对应的是unload事件,这是事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会发生unload事件。而利用这个事件最多的情况是清除引用,以避免内存泄漏。

<body onunload="alert(‘unloaded!‘)"></body>

 

或者

EventUtil.addhandler(window,‘unload‘,function(){
    alert(‘unloaded‘);
})

 

无论是用哪种方式,都要小心编写onunload事件处理程序中的代码,既然unload是在一切都被卸载之后才触发,那么在页面加载后存在的那些对象,此时就不一定存在了。

3、resize事件 当浏览器窗口被他调整到一个新的高度或宽度时,就会触发resize事件

EventUtil.addHandler(window,‘resize‘,function(){
    alert(‘Resized‘);
})

 

关于何时触发resize事件,不同的浏览器不同的机制,IE,Safari,Chrome和Opera会在浏览器窗口变化了1px就会触发resize事件,然后随着变化不断重复被触发。FireFox则只会在用户停止调整窗口大小时才会触发resize事件。由于这个差别,应该注意不要在这个事件的处理程序中加入大计算量的代码,因为这些代码有可能被频繁执行,从而导致浏览器反应明显变慢。

4、scroll事件

EventUtil.addHandler(window,‘scroll‘,function(event){
    if(document.compatMode == ‘CSS1Compat‘){
        alert(document.documentElement.scrollTop);
    }else{
        alert(document.body.scrollTop);
    }
})

 

在标准模式下,除Safari之外的所有浏览器都会通过元素来反映这一变化(Safari仍然基于body跟踪滚动位置),以上代码根据模式不同而用了不同当元素,由于safari之前的版本不支持document.compatMode,因此旧版本的浏览器就会满足第二个条件。
与resize类似,scroll事件也会在文档滚动期间重复被触发,所以有必要尽量保持事件处理程序的代码简单

以上是关于事件:事件类型的主要内容,如果未能解决你的问题,请参考以下文章

从活动中调用片段事件

选择选项卡片段时触发啥事件

如何处理片段上的触摸事件?

Reactreact概述组件事件

片段实例中带有 Otto 事件总线的 IllegalArgumentException

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法