>  기사  >  웹 프론트엔드  >  javascript_javascript 기술의 DOM 이벤트 이해

javascript_javascript 기술의 DOM 이벤트 이해

WBOY
WBOY원래의
2016-05-16 15:23:431295검색

우선 이 글에서는 지루한 내용을 다루지는 않겠지만, 독자들의 영적인 감정과 긍정적인 태도를 고려하여 예시를 나열하겠습니다.

​제목은 DOM 이벤트 이해이므로 간단한 클릭 이벤트를 예로 들어보겠습니다. 이 예제를 보고 이해하시기 바랍니다.
처음에는 다음 작업처럼 간단하게 페이지 클릭을 구현했습니다.
먼저 1c51a309e92a9afaf1c383489dfc7193microuniverse16b28748ea4df4d9c2150843fecfba68와 같은 블록을 정의한 다음 4ec11beb6c39d0703d1751d203c170532cacc6d41bbb37262a98f745aa00fbf0 다음 코드와 같이 weiyuzhou라는 ID로 클릭 이벤트를 내부적으로 구현합니다.

var wyz = document.getElementById('weiyuzhou');
wyz.onclick = function () {
  confirm(arguments.length)
}

确保上面这些步骤都没问题的话,我们才可以继续的往下走,然后我们在IE浏览器(低版本)看到弹出0,确切的说,IE8以下(包含IE8)的弹出0,反之弹出1。接着我在firefox浏览器看到弹出1。也就是说在IE8以下版本事件的触发不存在于函数的作用域内部,是不是说IE8以下的事件触发发生在全局作用域中,此处留个悬念,但是,可以肯定的是IE8以下事件的方法并没有这个Event参数,也就是说arguments的长度为0,如下视图5所示:

于是,我们看firefox浏览器窗口弹出1,说明事件存在于函数内部,再次证明方法的内部数组arguments长度为1,并且是可枚举的变量,也可以说可写,如下视图所示。

如果,你还是不明白其中的原理,你不防去看一下《web前端开发修炼之道》书上第169页,然后再回过头来看此处文章摘要,可能会让你更加深层次的了解书中的内容。

接下来,我们该怎么办呢,我们肯定不能让IE和firefox返回的事件输出不相同,那么如何让IE和firefox下弹出的内容都一样。

衔接上一段内容,下面给点击函数的内部设置一个参数,参数名为e,然后在IE和firefox浏览器下面同时触发点击事件,我们看到firefox下面显示e为鼠标事件[objectMouseEvent],IE8下报错,弹出错误信息未定义undefined。此时你要问我错在哪里,咱们回到刚刚的那句话‘此处留个悬念'进行分析,IE8以下的浏览器的事件是不是发生在全局作用域中,从视图5-02所示看到有一个global全局对象,我们可以对global展开搜索,global的继承的方法有一个event事件,找到了IE8的专有事件方法window继承event,于是我们对这个参数e设置为window.event进行一个调试,目前我们在IE8下面看到返回了一个事件[objectevent],如图所示。


想必你一定发现了IE8和firefox浏览器下对话框的事件返回值各不不同,IE8的对话框为[objectevent],firefox的对话框为[objectMouseEvent],那我们怎么让IE8和firefox下的返回值都相同呢?

看到这里,你的心里是不是有点小沮丧,挖坑挖了这么久了,怎么还没有看到水流出来,别急,正题才刚刚开始,咱们不闲聊,继续围绕正题展开分析,通过刚刚的返回值,我们继续使用断点的方法寻找能够实现IE和firefox的返回值的共同点。

经由以上分析,我们查找发现firefox下的event有我们需要的方法名可以被调用,当然,我们查找发现IE8下面的srcElement也有我们所需的方法名可以被调用,于是乎,呵呵!看到这里你的内心是不是有点小激动,一步步排除,最后发现也没有什么难的。回到正题,现在我们声明一个变量vare_child=e.srcElement||e.target;然后我们在IE8和firefox浏览器上看到对话框信息都为[objectHTMLDivElement],如图所示。

现在我们解决了不同浏览器的返回值不同的问题,也就是说解决了兼容的问题,这只是冰上一角。

下面我们要解决实现窗口的容器触发事件,主要是基于上面的结构进行的一次分析。

当你有了上面基础的话,下面的内容相对于上面而言比较简单一点。

还是以上一个页面的块为例,现在我继续往块431c9e1dec2cbcf2faa85942ae2273d9微宇宙16b28748ea4df4d9c2150843fecfba68하위 컨테이너를 추가합니다. 이 하위 컨테이너는 인라인 요소 이고, ID 이름 coz를 지정한 다음 이 요소도 제공합니다. 텍스트 내용의 차이를 구분하기 위해 위와 동일한 기능을 가진 클릭 이벤트 코드를 추가합니다.

IE8과 Firefox에서 각각 컨테이너의 내용을 클릭했을 때 이상한 상황이 발생했습니다. Firefox 브라우저의 창을 클릭했을 때 중국어 텍스트를 클릭하면 'Micro Universe' 대화 상자가 나타납니다. 다시 koringz를 클릭했을 때 보조 대화 상자가 팝업되는 것을 발견했는데, 팝업 내용이 모두 'koringz'였습니다. 그 이유는 하위 컨테이너를 클릭했을 때 이전 레이어의 클릭 동작 때문이었습니다. koringz를 클릭하여 보조 대화 상자를 표시하는 문제를 해결하는 방법 js에 대해 조금 알아보십시오. 대부분의 프로그래머는 이것이 버블링 이벤트라는 것을 알고 있습니다.

Firefox에서 버블링 이벤트를 지울 수 있는 것은 이벤트 아래의 stopPropagation이므로 두 번째 클릭 이벤트 함수 코드 블록 뒤에 e.stopPropagation() 코드 줄을 추가한 다음 koringz를 클릭하면 'koringz'가 나타나는 것을 확인합니다. 한 번 . 사진과 같이

다음으로, IE8에서 테스트하고 IE8 브라우저를 클릭해도 두 번 팝업되는 것을 확인합니다. IE8의 버블링 중지 이벤트에 대한 해결책은 cacelBubble이며 cacelBubble을 true로 설정하기만 하면 됩니다.
IE8에서 global에 포함된 이벤트 속성 cacelBubble은 메소드가 아니라 부울 값을 출력하는 객체이기 때문에 Firefox가 이 이벤트를 메소드로 캡슐화한다는 점을 제외하면 Firefox와 다릅니다. 좋습니다. 이제 두 번째 클릭의 이벤트 코드 블록 뒤에 e.cancelBubble=true; 코드 줄을 추가한 다음 IE8 브라우저에서 테스트한 다음 koringz를 다시 클릭하면 이 코드도 한 번 나타나는지 확인합니다. 사진과 같이


위의 버블링 이벤트 중지 코드는 브라우저에 따라 별도로 작성할 수 있습니다. 별도로 작성하는 방법은 IE8 브라우저에서 문서를 살펴보니 개체가 모두 있는 것으로 나타났습니다. 즉, document.all은 IE8 버전에서 고유한 속성입니다. 이를 통해 브라우저의 버블링 이벤트를 구별할 수 있습니다.

지금까지 창의 버블링 이벤트를 해결했습니다. 다음으로 이벤트가 여러 사람에 의해 정의되었기 때문에 원래 기능을 덮어쓰는 문제를 해결해야 합니다. 또한 회사의 이전 직원이 이 이벤트를 추가한 후 새로운 직원이 프로젝트를 인수한 후 이 이벤트를 추가하고 수정하여 원래 이벤트 실행으로 인해 발생한 문제를 해결할 수도 있습니다. 즉, 현재 ID에 이러한 이벤트를 여러 번 추가해도 이 이벤트의 원래 함수 실행을 덮어쓰지 않습니다.

firefox 아래 창에는 addEventListener(type,listener,useCapture) 메소드가 포함되어 있으며, 이 청취 이벤트 domElement.addEventListener(' 내부 11a73d278ce8ce2c4b6ff6f8b6ea3f912cacc6d41bbb37262a98f745aa00fbf0 click'을 정의합니다. ,function(e){confirm(e 'e')},false); 그런 다음 Firefox 브라우저에서 콘텐츠를 클릭하여 두 번 팝업합니다. 마지막 팝업은 [objectMouseEvent]e이고 그 뒤에 추가 e가 표시됩니다. 나인가 구분하기 위해 의도적으로 추가한 것입니다. 그림과 같습니다.


다음으로 IE8에서 테스트를 해보니 addEventListener 오류가 발견되었는데, window 아래에 그런 메소드가 있는 걸 봤습니다. IE8에는 attachmentEvent(event, pdisp)도 있고, 수신 이벤트 wyz.attachEvent('onclick', function(e){confirm(e 'e')})를 설정합니다. 참고: 이벤트는 'onclick'입니다. 그런 다음 IE8에서 클릭하면 마지막 [objectMouseEvent]e가 두 번 나타납니다. 이때 on('click',pdisp)와 attachmentEvent(event,pdisp)를 함께 사용할 수 있습니다.

요약하자면 DOM 이벤트의 호환성, DOM 이벤트 버블링, DOM 이벤트 재사용 문제를 해결했습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.