事件委托与键盘事件

  1.fn()与fn的区别?

  fn():执行里面的函数

  fn:  将函数的内容赋给谁

  2.事件委托的解析

  onmouseenter,onmouseleave与onmouseover,onmouseout的区别?

  onmouseenter获取的事件源(target)是元素的本身,所以他没有事件冒泡的机制

  onmouseover获取的事件源(target)是为他的子级,当改变事件源的时候也是改变子级(同时也让自己拥有了父级的事件)从而就会产生冒泡机制;

  3.dom0级与dom2级的区别?

  1.dom2级正常事件,先捕获在冒泡

    dom0级无捕获,直接就冒泡

  (addEventListener() 中的第三个参数  true代表捕获   false代表冒泡)

  2. dom0级事件元素绑定多个onclick,最后值执行最后一个onclick

    dom2级事件绑定多个click,都要执行(注意:当绑定多个事件名,函数,事件发生阶段(捕获或冒泡),三者完全一样时,才执行一个);

  案例:

  div.addEventListener("click","fn1",false)

  div.addEventListener("click","fn1",false)    (这种情况下才执行一个,且事件函数不能使用匿名函数)(因为匿名函数开辟的内存地址不一样,事件函数名相同时,内存地址才一样)

  3.dom0级如果绑定多个相同事件,后者会覆盖前者,dom2级不会

    dom0级只适合普通事件,dom2级需要制定的事件类型如domContentLoaded(当文档结构加载完成之后执行)

  4.事件取消

  dom0级直接赋值:null

  div.onclick=null

  dom2级需要使用removeEventListener()

  div.removeEventListener("click","fn1",true)

  5.键盘事件:

  键盘事件:onkeydown(键盘按下)  onkeyup(键盘抬起)

  document.onkeydown (包括了所有键盘,键盘事件的常用写法)

  键盘事件触发时,浏览器天生自带一个叫keyboardEvent对象,所有键盘信息都在这个对象上

  靠keycode来识别你按哪个键

  我们发现ev有个属性keycode键盘编码

  案例:

  document.onkeydown=function(ev){

    var ev=ev||window.event

    console.log(ev.keycode)

  }

  右击鼠标事件:oncontextmenu

  案例:鼠标右击事件:

  

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .you{
        position:absolute;
        width:200px;
        height:300px;
        border:red 1px solid;
      }
    </style>
  </head>
  <body>
  </body>
  <script>
    document.oncontextmenu=function(ev){
    var ev=ev||window.event;
    ev.preventDefault()||ev.returnValue;
    var div=document.createElement("div");
    div.className="you";
    div.id="you";
    var you=document.getElementById("you");
      if(you){

        document.body.removeChild(you);
        div.style.left=ev.clientX+5+"px";
        div.style.top=ev.clientY+5+"px";
        document.body.appendChild(div)
      }
      else{
        div.style.left=ev.clientX+5+"px";
        div.style.top=ev.clientY+5+"px";
        document.body.appendChild(div)
      }

    }
    document.onclick=function(){
    var you=document.getElementById("you");
    document.body.removeChild(you)
  }
  </script>

  鼠标拖拽的案例:

  

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  <style>
    div{
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    }
  </style>
  </head>
  <body>
    <div id="ha">

    </div>
  </body>
  </html>
  <script>
  var ha=document.getElementById("ha");
  ha.onmousedown=function(ev){
    var ev=ev||window.event;
    var x=ev.clientX-ha.offsetLeft;
    var y=ev.clientY-ha.offsetTop;
    document.onmousemove=function(ev){
      var ev=ev||window.event;
      ha.style.left=ev.clientX-x+"px";
      ha.style.top=ev.clientY-y+"px";
    }
  ha.onmouseup=function(){
    document.onmousemove=null;
    }
  }
  </script>

原文地址:https://www.cnblogs.com/shangjun6/p/10066153.html

时间: 2024-10-02 04:42:50

事件委托与键盘事件的相关文章

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

事件委托和JQ事件绑定总结

事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 实现原理:我们知道,DOM在为页面中的每个元素分派事

javascript 事件委托 和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

javascript事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

事件类型(键盘事件)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelB

JavaScript的事件对象_键盘事件

用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 keydown 和 keyup 事件时,event 对象的 keyCode 属性中会包含一个代码,与键盘上一个特定的键对应.对数字字母字符集,keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同.字母中大小写不影响. <script type="text/javascript&q

关于事件冒泡和键盘事件 以及与Angular的区别

一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelB