浅析javascript中的Event事件


Posted in Javascript onDecember 09, 2016

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);
     });
    }
   }

事件取消绑定

 ● 第一种

    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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
js如何获取网页所有图片
May 12 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
清除js缓存的多种方法总结
Dec 09 #Javascript
Vue.js计算属性computed与watch(5)
Dec 09 #Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 #Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 #Javascript
vue.js绑定class和style样式(6)
Dec 09 #Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 #Javascript
JS定时器实现数值从0到10来回变化
Dec 09 #Javascript
You might like
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP实现货币换算的方法
2014/11/29 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
python实现redis三种cas事务操作
2017/12/19 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
总务岗位职责
2013/11/19 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
活动总结报告格式
2014/05/09 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python