浅析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 相关文章推荐
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
jQuery实现动态操作table行
Nov 23 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
You might like
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python time.strptime格式化实例详解
2021/02/03 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
销售心得体会
2014/01/02 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
励志演讲稿600字
2014/08/21 职场文书
个人收入证明范本
2014/09/18 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
酒店开业主持词
2015/07/02 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
基于Python的EasyGUI学习实践
2021/05/07 Python
SpringBoot 集成Redis 过程
2021/06/02 Redis
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记