首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

浅析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中的Event事件

- Author -

老板丶鱼丸粗面

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
清除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
腾讯云(1) TaiShan(1) queue(1) 内存池(1) Foreign Key(1) 云服务器(1) RecyclerView(1) 九宫格(5) JDK(1) Hadoop(1)
You might like
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
PHP中的使用curl发送请求（GET请求和POST请求）
2017/02/08 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
js查找父节点的简单方法
2008/06/28 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
javascript控制台详解
2015/06/25 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
python分割和拼接字符串
2013/11/01 Python
python自动zip压缩目录的方法
2015/06/28 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python异步存储数据详解
2019/03/19 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Subside Sports德国：足球球衣和球迷商品
2019/06/08 全球购物
《桂林山水》教学反思
2014/02/08 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
改进工作作风心得体会
2016/01/23 职场文书
演讲开头怎么书写？
2019/08/06 职场文书