zoukankan      html  css  js  c++  java
  • DOM高级

    1元素注册事件两种方式。

    2 删除事件两种方式。

    3 DOM事件流3个阶段。 事件对象,阻止事件冒泡。

    4 事件委托。

    5 常用鼠标和键盘事件。 

    1 注册事件概述:

    传统方式和方法监听方式。

    1.传统注册方式:以on开头的时间。

     btn.onclick=function(){} 注册事件的唯一性。后面的事件处理函数 会将前面覆盖调。所以需要有新的方法。

    2.监听注册方式:

    addEventListener()是一个方法。(使用的更多。)同一个事件添加多个事件处理程序。

    IE9不支持方法,可使用attachEvent()代替。

    按照顺序执行。

    addEventListener(type,listener,[flase,true])

    type:click,mouseover:带引号!这里面不需要带on,

    listenr:事件处理函数,事件发生时,会调用监听改事件。监听器!

    bts[1].addEventListener('click',function(){})

    IE9之前:attachEvent事件;该特性非标准,不在生产环境中使用。

    eventTarget.attachEvent(eventName,callBack())

    删除事件,解绑事件:!

    1.传统注册方式 :eventTarget.onclick= null; divs[0].onclick =null;

    2.方法监听注册方式:

    eventTarget.removeEventListener(type,listenr{,false,true})

    divs[1].removeEventListener('click',不能用匿名函数

    divs[1].addEventLister('click',fn)

    divs[1].removeEventListener('click',fn);

    function fn(){ alert(22); }

    3 divs[2].attachEvent('onclick',fn1)

    function fn1{alert(33)}

    divs[2].detachEvent('onclick',fn1)

    DOM事件流;事件发生时候,元素节点之间按照特定的顺序传播,

    事件传播的过程就是事件流。

    Document HTml body div

    1 捕获阶段: 中国 山东 蓝翔。

    2 当前目标阶段。

    3 冒泡阶段。

    事件冒泡:IE最早提出,

    事件捕获:网景最早提出,DOM,

    最后W3C ,综合两个阶段。

    注意:

    1 JS代码只能执行捕获或者冒泡的其中一个阶段!!!!!不能同时弄两个。

    2 onclick和attachEvent(ie)只能得到冒泡阶段。

    3 addEventListen('',function,true);true是捕获阶段。默认或者false则是捕获阶段。

    4 但是在我们的实际开发过程中,我们很少使用事件捕获,更关注事件冒泡。

    5 有些事件是没有冒泡的,比如:onblur,onfocus,onmousenter,onmouseleave

    6 有时候事件冒泡会带来麻烦,有时候会有帮助,

    事件对象。 

    div =document.querySelector('div')

    div.onclick =function (event){ console.log(event)}

    1 event就是一个事件对象,写到我们侦听函数的小括号,当做形参

    2 事件对象只有有了事件才会存在。这是系统给我们创建的,不需要我们传递实参。

    3 事件对象,是我们事件一系列数据的结合,和事件相关的,比如鼠标点击就包含鼠标的信息,

    鼠标坐标,键盘事件,比如按下了那个键。

    div.addEventListener('click',function(event){e})

    4 event,evt,e都可以!

    5 事件对象也有兼容性问题 ie678 是window.event

    兼容性的写法。 e= e || window.event;

    常见的事件对象,

    返回事件类型。

    阻止 事件默认行为,让链接不跳转,或者提交按钮不提交。

    e.preventDefault()//DOM 标准写法。

    e.returnValue ; ie678属性

    return false();//阻止,也能默认阻止,return后面是不执行的。

    阻止冒泡的两种方式:

    stopPropagation //stop 停止 propagation的传播

    e.cancelBublle= true;//非标准cancle取消bubble泡泡

    if (e&& e.stopPropagetion){ e.stopPropagation}

    else { windows.event.cancelBublle =true}

    事件冒泡的坏处。需要阻止事件冒泡。

    事件冒泡的好处。事件委托。

    100个快递,

    ul li里面 每个事件,进行点击事件,dom访问次数就很多,就会延长交换事时间。

    事件委托,也称为,事件代理,在jQuery里面成为事件委派。

    事件委托的原理:不是子节点监听,而是父节点监听,利用冒泡原理影响每个子节点。

    ul注册,target找到li,点击的是li,事件冒泡到ul上,ul有注册事件,会触发监听器。

    事件委托的作用:

    只操作了一次DOM,提高了程序的特性。

    e.target.style.backgroundColor='pink'

    7.1 鼠标事件:

    鼠标经过: on mouseover, 鼠标离开:onmouse out

    鼠标左键触发: onclick

    鼠标失去焦点。onblur,鼠标获得焦点onfocus

    1.禁止鼠标右键:

    contextmenu:e.preventDefault() 取消默认的上下文菜单。不能右键删除。

    selectstart :e.preventDefault();禁止选中

    7.2鼠标事件对象。

    event

    e.clientX,

    e.clientY:相对于浏览器窗口的XY

    e.pageX 返回鼠标对于文档页面的X坐标,(用的最多)

    e.pageY, 返回鼠标Y坐标

    e.screenX

    e.screeY 鼠标相对于电脑的屏幕Y

    常用键盘事件。

    onkeyup

    onkeydown

    onkepress  区分字母大小写。

    键盘事件对象。

    keyCode

  • 相关阅读:
    【JS】DOM
    【JS】事件处理
    【JS】引用类型之Global
    【JS】引用类型之RegExp
    【JS】引用类型之Function
    树形图(菜单)构建组建dhtmlXTree
    【JS】引用类型之String
    【JS】引用类型之Math
    【JS】鼠标事件
    【JS】UI事件
  • 原文地址:https://www.cnblogs.com/hacker-caomei/p/14879368.html
Copyright © 2011-2022 走看看