js dom 이벤트에 대한 고급 보충

우리는 이전에 네이티브 js를 사용하여 dom을 작동하는 방법을 공유했습니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라면서 js의 dom 이벤트에 대한 고급 보충 내용을 따르겠습니다.

이벤트 커버리지의 문제 원칙을 명확하게
이벤트 소스를 사용하세요. 이벤트 종류에 이벤트를 추가하는 방식은 커버리지 문제를 야기합니다. 우리는 이 문제를 피하기 위해 함수를 사용합니다.

function addEvent(tag,fn){
    var oldClick=tag.onclick    if(typeof oldClick=="function"){
        tag.onclick=function(){
            oldClick();
            fn();
    }
    }else{
        tag.onclick=fn;
    }
}

이벤트 추가(마스터해야 함) 이벤트를 추가하는 새로운 방법:
이점, 이벤트 범위 문제를 피할 수 있습니다.
Event source.addEventListener("click",function(){});
참고: 유형 이름에 추가하지 마세요

Event source.attachEvent("onclick", function(){}) IE 하위 버전은 지원합니다.

참고: 유형 이름에 추가하세요

이벤트 제거 방법 addEventListener 추가 방법 RemoveEventListener를 사용하여 제거
두 번째 매개변수 작성에 주의하세요

Event source.detachEvent("onclick",fn)는 attachmentEvent를 사용하여 추가된 이벤트를 취소하는 데 사용됩니다

원래 취소 method

box.onclick=function(){}
box.onclick=null;

addEventListener 호환 패키징.

var Event = {//添加事件。oElement：元素，sEvent：事件类型，fnHandler：绑定的函数
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)    
    },//删除事件。
    removeHandler: function (oElement, sEvent, fnHandler) {
        oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
    }
}
使用列子：
<input type="button" value="毫无用处的按钮"> <input type="button" value="绑定click"> <input type="button" value="解除绑定">

window.onload = function (){
    var aBtn = document.getElementsByTagName("input");    //为第一个按钮添加绑定事件
    aBtn[1].onclick = function ()
    {
        Event.addHandler(aBtn[0], "click", fnHandler);    
        aBtn[0].value = "我可以点击了"
    }    //解除第一个按钮的绑定事件
    aBtn[2].onclick = function ()
    {
        Event.removeHandler(aBtn[0], "click", fnHandler);
        aBtn[0].value = "毫无用处的按钮"    
    }    //事件处理函数
    function fnHandler ()
    {
        alert("事件绑定成功！")    
    }
}

이벤트 버블링 및 이벤트 캡처 버블링 및 캡처의 실행 순서를 마스터해야 합니다
이벤트 버블링은 이벤트 전달 방법입니다
전달 방법은 가장 구체적인 요소에서 가장 덜 구체적인 요소로 트리거됩니다.
子向父먼저 현재 요소의 이벤트를 트리거합니다. 트리거가 완료된 후 상위 항목에도 이 이벤트가 포함되어 있으면 트리거되고 그렇지 않은 경우 계속해서 위쪽으로 검색됩니다.
addEventListener를 통해 추가된 이벤트, 세 번째 매개변수는 이벤트 버블링을 나타내는 false입니다. 기본값은 false

box1.addEventListener("click",function(){alert(1)},false)

이벤트 캡쳐는 이벤트 전달 방식입니다

이벤트 캡쳐 실행 방식은 외부에서 내부로(버블링의 반대)입니다.
addEventListener를 통해 추가된 이벤트, 세 번째 매개변수는 이벤트 캡처를 나타내는 true입니다.

box1.addEventListener("click",function(){alert(1)},true)

이벤트 객체(마스터 필수)

획득 방법:
1. 이벤트가 트리거되면 이벤트 핸들러에서 이벤트 객체를 받을 수 있습니다.
이러한 획득 형식은 IE 하위 버전에서는 지원되지 않습니다.

document.onmousemove=function(e){
    var e=e||window.event;//兼容ie}

2. e

이벤트 객체 속성(마스터링 필요) Event object.type은 이벤트 유형을 나타냅니다. . on은 추가되지 않습니다.

Event object.clientX 및 event object.clientY는 이벤트가 트리거될 때 브라우저의 가시 영역을 기준으로 마우스의 가로 좌표와 세로 좌표를 얻을 수 있습니다.

Event object.pageX 및 event object.pageY는 이벤트가 트리거될 때 페이지의 왼쪽 정점에 대한 마우스의 가로 좌표와 세로 좌표를 얻을 수 있습니다. 호환성 문제가 있습니다. IE의 하위 버전에서는 이를 지원하지 않으며 이를 얻으려면 캡슐화 기능이 필요합니다.

페이지 패키지는 dom 요소 자체를 가리킵니다.
obj.addEventListener(type, fn, false)

이 프로그램은 dom 요소 자체를 가리킵니다.

obj.attachEvent('on' + type, fn); 이것은 window

function getPage(e){var e=e||window.event;var src=scroll()//这个函数是在dom高级里面讲到对scrollLeft和scrollTop的封装;
    return {
     PageX:scroll.scrollleft+e.clientX,
      PageY:scroll.scrolltop+e.clienttop,
    }
}

封装兼容性的addEvent(elem, type, handle);方法function addEvent(elem, type, handle) {    if(elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent) {
         elem['temp'] = function() {
            handle.call(elem);
        }
        elem.attachEvent('on' + type, elem['temp']);
    }else{
        elem['on' + type] = handle;
    }
}

이벤트를 가리킵니다. 버블링과 이벤트 캡처의 장점과 단점은 무엇인가요?
(1) 버블형 이벤트: 가장 구체적인 이벤트 대상부터 가장 구체적인 이벤트 대상(문서 개체) 순으로 이벤트가 발생합니다.
IE 5.5: p -> 본문 -> IE 6.0: p -> 본문 -> html -> 문서 Mozilla 1.0: p -> body -> document -> window
(2) 이벤트 캡처(이벤트 캡처): 이벤트는 가장 정확하지 않은 개체(문서 개체)부터 시작됩니다. 가장 정확합니다(이벤트는 창 수준에서도 캡처할 수 있지만 이는 개발자가 지정해야 함).
(3) DOM 이벤트 흐름: 캡처 이벤트와 버블링 이벤트라는 두 가지 이벤트 모델을 동시에 지원하지만 캡처 이벤트가 먼저 발생합니다. 두 이벤트 스트림 모두 문서 개체에서 시작하여 문서 개체로 끝나는 DOM의 모든 개체에 적용됩니다.
DOM 이벤트 모델의 가장 독특한 속성은 텍스트 노드도 이벤트를 트리거한다는 것입니다(IE에서는 아님).

이벤트 버블링의 일반적인 예

버블링의 개념은 상위 노드에서 이벤트를 수신하고 event.target/event.srcElement를 결합하여 최종 효과를 얻는 것입니다. 효과는 다음 코드와 같습니다.

封装的兼容方法function removeEvent(elem, type, handle) {
    if(elem.removeEventListener) {
        elem.removeEventListener(type, handle, false);
    }else if(elem.detachEvent) {
        elem.detachEvent('on' + type, handle);
    }else{
        elem['on' + type] = null;
    }
}

이벤트 버블링 중지

event.stopPropagation(); // 阻止事件冒泡return false;既能阻止默认事件又能 阻止事件冒泡

当用户名为空时，单击“提交”按钮，会出现提示，并且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault()方法能阻止表单的提交行为。
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
在表单的例子中，可以把 event.preventDefault(); 改写为： return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为： return false;

事件覆盖的问题
清楚原理
使用事件源.事件类型的添加事件方式会产生覆盖问题。我们通过一个函数去避免这个问题。

function addEvent(tag,fn){
    var oldClick=tag.onclick    if(typeof oldClick=="function"){
        tag.onclick=function(){
            oldClick();
            fn();
    }
    }else{
        tag.onclick=fn;
    }
}

添加事件（必须掌握）
自带的添加事件新方式：
好处，可以避免事件覆盖问题
事件源.addEventListener(“click”,function(){}); ie9以上浏览器支持
注意：类型名不加 on

事件源.attachEvent(“onclick”,function(){}) ie低版本支持
注意，类型名加on

移除事件的方式
addEventListener 的添加方式使用removeEventListener进行移除
注意第二个参数的写法

事件源.detachEvent(“onclick”,fn)用于取消使用attachEvent添加的事件

原始的取消方式

box.onclick=function(){}
box.onclick=null;

addEventListener兼容封装。

var Event = {//添加事件。oElement：元素，sEvent：事件类型，fnHandler：绑定的函数
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)    
    },//删除事件。
    removeHandler: function (oElement, sEvent, fnHandler) {
        oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
    }
}
使用列子：
<input type="button" value="毫无用处的按钮"> <input type="button" value="绑定click"> <input type="button" value="解除绑定">

window.onload = function (){
    var aBtn = document.getElementsByTagName("input");    //为第一个按钮添加绑定事件
    aBtn[1].onclick = function ()
    {
        Event.addHandler(aBtn[0], "click", fnHandler);    
        aBtn[0].value = "我可以点击了"
    }    //解除第一个按钮的绑定事件
    aBtn[2].onclick = function ()
    {
        Event.removeHandler(aBtn[0], "click", fnHandler);
        aBtn[0].value = "毫无用处的按钮"    
    }    //事件处理函数
    function fnHandler ()
    {
        alert("事件绑定成功！")    
    }
}

事件冒泡和事件捕获
必须掌握冒泡和捕获的执行顺序
事件冒泡是事件传递的一种方式
传递方式为：由最特定的元素触发到最不特定的元素 子向父
首先触发当前元素的事件，触发完毕向上传播，如果父级也含有这个事件，触发，再向上，如果没有直接继续向上寻找。
通过addEventListener添加的事件，第三个参数为false表示事件冒泡。默认为false

box1.addEventListener("click",function(){alert(1)},false)

事件捕获是事件传递的一种方式
事件捕获的执行方式，是由外向内（跟冒泡相反）。
通过addEventListener添加的事件，第三个参数为true表示事件捕获。

box1.addEventListener("click",function(){alert(1)},true)

事件对象（必须掌握）
获取方式：
1、当事件触发时，我们可以通过在事件处理程序中接收事件对象。
这种获取形式在ie低版本不支持。

document.onmousemove=function(e){
    var e=e||window.event;//兼容ie}

2、在ie低版本中使用window.event作为事件对象，作用和e相同

事件对象的属性（必须掌握）
事件对象.type 表示事件的类型，注意是不加on的

事件对象.clientX和事件对象.clientY可以获取事件触发时鼠标针对浏览器可视区域的横坐标和纵坐标。

事件对象.pageX和事件对象.pageY可以获取事件触发时鼠标针对页面左顶点的横坐标和纵坐标。 有兼容性问题，ie低版本不支持，需要封装函数获取。
pageX和pageY的封装

function getPage(e){var e=e||window.event;var src=scroll()//这个函数是在dom高级里面讲到对scrollLeft和scrollTop的封装;
    return {
     PageX:scroll.scrollleft+e.clientX,
      PageY:scroll.scrolltop+e.clienttop,
    }
}

onmousemove 鼠标移动时触发
onmousedown 鼠标点下时触发
onmouseup 鼠标抬起时触发
事件处理程序的运行环境
ele.onxxx = function(event) { }
程序this指向是dom元素本身
obj.addEventListener(type, fn, false);
程序this指向是dom元素本身
obj.attachEvent(‘on’ + type, fn);
程序this指向window

封装兼容性的addEvent(elem, type, handle);方法function addEvent(elem, type, handle) {    if(elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent) {
         elem['temp'] = function() {
            handle.call(elem);
        }
        elem.attachEvent('on' + type, elem['temp']);
    }else{
        elem['on' + type] = handle;
    }
}

封装的兼容方法function removeEvent(elem, type, handle) {
    if(elem.removeEventListener) {
        elem.removeEventListener(type, handle, false);
    }else if(elem.detachEvent) {
        elem.detachEvent('on' + type, handle);
    }else{
        elem['on' + type] = null;
    }
}

事件冒泡和事件捕获有什么好处和弊端。

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: p -> body -> document
IE 6.0: p -> body -> html -> document
Mozilla 1.0: p -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
事件冒泡典型的例子
冒泡的思路是在祖先节点上监听事件，结合event.target/event.srcElement来实现最终效果，其效果等同于如下代码：

<p class="J_rate" onmouseover="..." onmouseout="..." onclick="...">
  <img  src="/static/imghw/default1.png"  data-src="star.gif"  class="lazy"   title="很烂" / alt="js dom 이벤트에 대한 고급 보충" >
  <img  src="/static/imghw/default1.png"  data-src="star.gif"  class="lazy"   title="一般" / alt="js dom 이벤트에 대한 고급 보충" >
  <img  src="/static/imghw/default1.png"  data-src="star.gif"  class="lazy"   title="还好" / alt="js dom 이벤트에 대한 고급 보충" >
  <img  src="/static/imghw/default1.png"  data-src="star.gif"  class="lazy"   title="较好" / alt="js dom 이벤트에 대한 고급 보충" >
  <img  src="/static/imghw/default1.png"  data-src="star.gif"  class="lazy"   title="很好" / alt="js dom 이벤트에 대한 고급 보충" >
 </p>
 // 五心好评的例子，不用给img添加，直接给父元素加

停止事件冒泡

event.stopPropagation(); // 阻止事件冒泡return false;既能阻止默认事件又能 阻止事件冒泡

当用户名为空时，单击“提交”按钮，会出现提示，并且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault()方法能阻止表单的提交行为。
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
在表单的例子中，可以把 event.preventDefault(); 改写为： return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为： return false;

相关推荐：

jquery之dom学习

原生js 操作dom

jQuery操作DOM的方法

위 내용은 js dom 이벤트에 대한 고급 보충의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!