浅析javascript中的Event事件

2024-10-16 10:44:56

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

Node.js事件循环（Event Loop）和线程池详解

Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互,所以使用基于事件
Nodejs实战心得之eventproxy模块控制并发

目标建立一个 lesson4 项目,在其中编写代码. 代码的入口是 app.js,当调用 node app.js 时,它会输出 CNode(https://cnodejs.org/ ) 社区首页的所有主题的标题,链接和第一条评论,以 json 的格式. 输出示例: [ { "title": "[公告]发招聘帖的同学留意一下这里", "href": "http://cnodejs.org/topic/541ed2d05e28155f24
javascript中attachEvent用法实例分析

本文实例讲述了javascript中attachEvent用法.分享给大家供大家参考.具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1 obj.onclick=method2 obj.onclick=method3 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,
JavaScript使用addEventListener添加事件监听用法实例

本文实例讲述了JavaScript使用addEventListener添加事件监听用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html lang="en"> <head> <title>This text is the title of the document</title> <script> function showalert(){ alert('you clicked
JavaScript event对象整理及详细介绍

Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

我们先看一个简单的例子: 复制代码代码如下: <input type="text" onblur="alert(this.value)"/>完全没有问题. 那么什么情况下不可以用? fuction method() { alert(this.value); } <input type="text" onblur="method()"/> 这个就不可以,因为method()是被响应函数调用的函数. 那么
node.js中的events.emitter.once方法使用说明

方法说明: 为指定事件注册一个单次监听器,所以监听器至多只会触发一次,触发后立即解除该监听器. 语法: 复制代码代码如下: emitter.once(event, listener) 接收参数: event (string) 事件类型 listener (function) 触发事件时的回调函数例子: 复制代码代码如下: server.once('connection', function (stream)
JavaScript对HTML DOM使用EventListener进行操作

addEventListener() 方法实例点用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可以向一个元素添加多个事件句柄. 你可以向同个元素添加多个同类型的事件句柄,如:两个
javascript中的altKey 和 Event属性大全

下面给大家介绍javascript中altkey属性,具体介绍如下所示: altKey属性的定义和用法: 此属性返回一个布尔值.指示在指定的事件发生时,Alt键是否被按下并保持住了. 语法结构: event.altKey=true|false|1|0 浏览器支持: 1.IE浏览器支持此属性. 2.火狐浏览器支持此属性. 3.Opera浏览器支持此属性. 4.谷歌浏览器支持此属性. 实例代码: <!DOCTYPE html> <html> <head> <meta
浅析javascript中的Event事件

1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) onfocus:当元素获取焦点时触发: element.onfocus = function(){}; onblur:当元素失去焦点时触发: element.onblur = function(){}; obj.focus() 给指定的元素设置焦点 obj.blur() 取消指定元素的焦点 obj.select
javascript中window.event事件用法详解

前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如
浅析javascript中的事件代理

本文的主要内容是根据前不久面试某家公司Web前端开发岗位,面试时做的一道数组去重问题的解题思路进行整理的,分享给大家. 题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy, <ul id="ulItem"> <li id="li1">1</li> <li id="li2">2</li> <li
浅析JavaScript中的事件委托机制跟深浅拷贝

今天聊下JavaScript中的事件委托跟深浅拷贝一.事件委托首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()">点击</button> <script> function clickEvent(){ alert("点击事件"); } </script> //方法二:通过addEventListener <button id="bt
浅析JavaScript中浏览器的兼容问题

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 1 // 老版本浏
JavaScript中的模拟事件和自定义事件实例分析

本文实例讲述了JavaScript中的模拟事件和自定义事件.分享给大家供大家参考,具体如下: 前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event. 下面介绍JavaScript中的模拟事件和自定义事件. 1.DOM中的事件模拟 1) DOM中的事件模拟有以下3个步骤: 步骤1:创建事件对象event 可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,即要创建的事件类型的字符串.在DOM2级中这
浅析JavaScript中var that=this

在阅读别人的代码时,发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢?经过一番查阅,才明白是这么回事. 在JavaScript中,this代表的是当前对象. var that=this就是将当前的this对象复制一份到that变量中.这样做有什么意义呢? $('#conten').click(function(){ //this是被点击的#conten var that = this; $('.conten').each(function(){ //this是.c
浅析Javascript中bind()方法的使用与实现

在讨论bind()方法之前我们先来看一道题目: var altwrite = document.write; altwrite("hello"); //1.以上代码有什么问题 //2.正确操作是怎样的 //3.bind()方法怎么实现对于上面这道题目,答案并不是太难,主要考点就是this指向的问题,altwrite()函数改变this的指向global或window对象,导致执行时提示非法调用异常,正确的方案就是使用bind()方法: altwrite.bind(document
深入浅析JavaScript中的Function类型

Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va
浅析JavaScript中的变量提升

目录前言: 函数提升 var变量提升 let & const提升 Class提升前言: JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们.就好像是变量声明和函数声明被提升了代码的顶部一样. sayHi() // Hi there! function sayHi() { console.log('Hi there!') } name = 'John Doe' console.log(name) // John Doe var name 然而JavaScript并不会移动你的

浅析javascript中的Event事件

相关推荐

随机推荐