Event事件
妙味课堂-Event事件
1、焦点：当一个元素有焦点的时候，那么他就可以接受用户的输入(不是所有元素都能接受焦点)
给元素设置焦点的方式：
1、点击
2、tab
3、js
2、（例子：输入框提示文字）
onfocus:当元素获取焦点时触发：
element.onfocus = function(){};
onblur:当元素失去焦点时触发：
element.onblur = function(){};
obj.focus() 给指定的元素设置焦点
obj.blur() 取消指定元素的焦点
obj.select()选择指定元素里面的文本内容
3、（例子：方块随着鼠标移动）
event: 事件对象。
当一个事件发生时，和当前这个对象发生的事件所有有关的信息都会临时保存在一个指定的地方-event对象，供我们需要时调用。就像是飞机的黑匣子。
事件对象必须在一个对象的事件调用函数中使用才有内容。
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时决定而是在调用的时候决定
4、兼容
element.onclick = fn1;
IE/Chrome浏览器:event是一个内置的全局对象（可以直接使用）
function fn1(){
alert(event);
}
标准下：事件对象是通过事件函数的第一个参数传入
function fn1(ev){
alert(ev);
}
兼容写法：
function fn1(ev){
var ev = ev || event;
}
clientX[Y]:当一个事件发生的时候，鼠标到页面可视区的距离
5、事件流（例子：仿select控件）
● 事件冒泡：当一个元素接受到事件的时候，会把他接受到的事件传播给他的父级，一直到顶层window。
● 事件捕获:一个元素要想接受到事件，它的父元素会首先接受到该事件，然后再传给它。
注意：在ie下是没有的事件捕获的。在事件绑定中，标准下有
6、事件绑定
● 第一种：
element.onclick = fn1;
注意：oDiv.onclick = fn1;
oDiv.onclick = fn2;
这样fn2会覆盖fn1;
● 第二种：
IE:obj.attachEvent(事件名称，事件函数)
1、没有捕获
2、事件名称有on
3、事件函数的执行顺序：标准》正序 非标准》倒序
4、this指向window
element.attachEvent(onclick,fn1);
标准：obj.addEventListener(事件名称，事件函数，是否捕获)
1、有捕获
2、事件名称没有on
3、事件的执行顺序是正序
4、this指向触发该事件的对象
element.addEventListener(click,fn1,false);
bind函数
function bind(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on' + evname,function(){
fn.call(obj);
});
}
}
7、事件取消绑定
● 第一种
element.onclick = null;
● 第二种
IE:obj.detachEvent(事件名称，事件函数);
document.detachEvent('onclick',fn1);
标准：obj.removeEventListener(事件名称，事件函数，是否捕获)；
document.removeEventListener('click',fn1,false);
8、键盘事件(例子：留言本)
● onkeydown : 当键盘按键按下的时候触发
● onkeyup : 当键盘按键抬起的时候触发
● event.keyCode : 数字类型 键盘按键的值 键值
ctrlKey，shiftKey，altKey布尔值
当一个事件触发的时候，如果shift || ctrl || alt键没有按下，则返回false，否则返回true;
9、默认事件(例子：自定义右键菜单、键盘控制div运动)
● 事件默认行为 : 当一个事件发生的时候浏览器默认会做的事。
● 阻止默认事件：return false;
oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发。
案例：
▓▓▓▓▓▓ 方块随着鼠标移动：
onmouseover:当鼠标在一个元素上移动时触发
注意：触发的频率不是像素，而是间隔时间。在一个间隔时间内不论鼠标移动了多远只触发一次
<style>
body{
height: 2000px;
}
#div{
width:100px;
height: 100px;
background:red;
position: absolute;
}
</style>
<body>
<div id="div1"></div>
</body>
<script>
var oDiv = document.getElementById('div1');
document.onmouseover = function(ev){
var ev = ev || event;
// 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDIv.style.top = ev.clientX + scrollTop + 'px';
oDIv.style.left = ev.clientY + 'px';
}
</script>
▓▓▓▓▓▓ 输入框文字提示:
<style></style>
<body>
<input type="text" id="text1" value="请输入内容"/>
<input type="button" id="btn" value="全选" />
</body>
<script>
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
oText.onfocus = function(){
if(this.value == '请输入内容'){
this.value = '';
}
}
oText.onblur = function(){
if(this.value == ''){
this.value = '请输入内容';
}
}
oBtn.onclick = function(){
oText.select();
}
</script>
▓▓▓▓▓▓仿select控件：
<style>
#div1{
width: 100px;
height: 200px;
border: 1px solid red;
display: none;
}
</style>
<body>
<input type="button" value="按钮" id="btn" />
<div id="div1"></div>
<p>ppppppppp</p>
<p>ppppppppp</p>
<p>ppppppppp</p>
<p>ppppppppp</p>
<p>ppppppppp</p>
</body>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(ev){
var ev = ev || event;
ev.cancelBubble = true;
oDiv.style.display = 'block';
}
document.onclick = function(){
oDiv.style.display = 'none';
}
}
</script>
▓▓▓▓▓▓ 留言本:
<style></style>
<body>
<input type="text" id="con"/>
<ul id="box"></ul>
</body>
<script>
var oUl = document.getElementById('box');
var oText = document.getElementById('con'); document.onkeyup = function(ev){
var ev = ev || even;
if(ev.keyCode != ''){
if(ev.keyCode == 13){
var oLi = document.createElement('li');
oLi.innerHTML = oText.value;
if(oUl.children[0]){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
}
}
}
</script>
▓▓▓▓▓▓ 自定义右键菜单:
<style>
body{
height: 2000px;
}
#box{
width: 100px;
height: 200px;
background: red;
display: none;
position: absolute;;
}
</style>
<body>
<div id="box"></div>
</body>
<script>
var oBox = document.getElementById('box');
document.oncontextmenu = function(ev){
var ev = ev || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
oBox.style.display = 'block';
oBox.style.top = scrollTop + ev.clientY + 'px';
oBox.style.left = scrollLeft + ev.clientX + 'px'; return false;
}
document.onclick = function(){
oBox.style.display = 'none';
}
</script>
▓▓▓▓▓▓ 键盘控制div运动:
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<body>
<div id="box"></div>
</body>
<script>
var oBox = document.getElementById('box');
var timer = null;
var oLeft = false;
var oTop = false;
var oRight = false;
var oBottom = false; // 运动一直就绪，等待按键操作
timer = setInterval(function(){
if(oLeft){
oBox.style.left = oBox.offsetLeft - 10 + 'px';
}else if(oTop){
oBox.style.top = oBox.offsetTop - 10 + 'px';
}else if(oRight){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}else if(oBottom){
oBox.style.top = oBox.offsetTop + 10 + 'px';
}
// 防止溢出
limit();
},10); // 按键按下，开始运动
document.onkeydown = function(ev){
var ev = ev || even;
switch (ev.keyCode){
case 37:
oLeft = true;
break;
case 38:
oTop = true;
break;
case 39:
oRight = true;
break;
case 40:
oBottom = true;
break;
}
} // 按键抬起，停止运动
document.onkeyup = function(ev){
var ev = ev || even;
switch (ev.keyCode){
case 37:
oLeft = false;
break;
case 38:
oTop = false;
break;
case 39:
oRight = false;
break;
case 40:
oBottom = false;
break;
}
} function limit(){
// 控制左边
if(oBox.offsetLeft <= 0){
oBox.style.left = 0;
}
// 控制上边
if(oBox.offsetTop <= 0){
oBox.style.top = 0;
}
// 控制右边
if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){
oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px';
}
// 控制下边
if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){
oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px';
}
}
</script>
Event事件的更多相关文章
- [.NET] C# 知识回顾 - Event 事件
C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- JS(event事件)
常用的event事件: 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事 ...
- event事件学习小节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript 事件对象（二）event事件
Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- PHP event 事件机制
PHP event 事件机制 <?php /* * PHP 事件机制 */ class baseClass{ private $_e; public function __set($name ...
- trigger()的event事件对象之坑
问题引入,先贴一段有问题的代码,如果你对 trigger() 这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...
- Event事件详解
首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...
随机推荐
- Java多线程
一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程. 进程:进程 ...
- dotNET跨平台相关文档整理
一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...
- URL安全的Base64编码
Base64编码可用于在HTTP环境下传递较长的标识信息.在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式.此时,采用Base64编码不仅比较简短,同时也具有不可 ...
- 【Net跨平台第一步】逆天带你零基础Linux入门【更新完毕】
部分讲义:(视频已删,后期以文档形式发布)
- Xamarin+Prism开发详解三：Visual studio 2017 RC初体验
Visual studio 2017 RC出来一段时间了,最近有时间就想安装试试,随带分享一下安装使用体验. 1,卸载visual studio 2015 虽然可以同时安装visual studio ...
- ORACLE从共享池删除指定SQL的执行计划
Oracle 11g在DBMS_SHARED_POOL包中引入了一个名为PURGE的新存储过程,用于从对象库缓存中刷新特定对象,例如游标,包,序列,触发器等.也就是说可以删除.清理特定SQL的执行计划 ...
- Python处理Excel表格
同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...
- CYQ.Data V5 分布式缓存Redis应用开发及实现算法原理介绍
前言: 自从CYQ.Data框架出了数据库读写分离.分布式缓存MemCache.自动缓存等大功能之后,就进入了频繁的细节打磨优化阶段. 从以下的更新列表就可以看出来了,3个月更新了100条次功能: 3 ...
- Redis集群搭建与简单使用
介绍安装环境与版本 用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-3.2.4 版本. 两台虚拟机都是 CentOS ,一台 ...
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...