Advanced supplement for js dom events

We have shared before the method of operating dom with native js. In this article, we will follow the advanced supplement of dom events in js, hoping to help everyone.

Problems with event coverage
Clear the principle
Using event sources. The way of adding events to event types will cause coverage problems. We use a function to avoid this problem.

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

Add events (must master)
New way to add events:
Benefits, can avoid event coverage problems
Event source.addEventListener("click ”,function(){}); Supported by ie9 and above browsers
Note: Do not add on to the type name

Event source.attachEvent(“onclick”,function(){}) Supported by lower ie versions
Note that the type name is added with on

How to remove the event
The method of adding addEventListener is to use removeEventListener to remove it
Pay attention to the writing of the second parameter

Event source.detachEvent("onclick",fn) is used to cancel events added using attachEvent

Original cancellation method

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

addEventListener compatible package.

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("事件绑定成功！")    
    }
}

Event bubbling and event capturing
Must master the execution order of bubbling and capturing
Event bubbling is a way of event delivery
The delivery method is : Triggered from the most specific element to the least specific element Son to parent
First triggers the event of the current element, and propagates upward after the triggering is completed. If the parent also contains this event, it is triggered, and then upwards. If not, continue looking upwards.
Events added through addEventListener, the third parameter is false to indicate event bubbling. The default is false

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

Event capture is a way of event delivery
The execution method of event capture is from outside to inside (opposite to bubbling).
Events added through addEventListener, the third parameter is true to indicate event capture.

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

Event object (must be mastered)
How to obtain:
1. When the event is triggered, we can receive the event object in the event handler.
This form of acquisition is not supported in lower versions of IE.

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

2. Use window.event as the event object in lower versions of IE, which has the same function as e

Attributes of the event object (must be mastered)
Event Object.type represents the type of event. Note that the

event object.clientX and event object.clientY without on can obtain the abscissa and ordinate coordinates of the mouse for the browser's visible area when the event is triggered.

Event object.pageX and event object.pageY can obtain the abscissa and ordinate of the mouse against the left vertex of the page when the event is triggered. There is a compatibility issue. Lower versions of IE do not support it and require encapsulation functions to obtain it.
Package of page

ele.onxxx = function(event) { }
The program this points to the dom element itself
obj.addEventListener(type, fn, false);
The program this points to the dom element itself obj.attachEvent('on' + type, fn); Program this points to 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;
    }
}

What are the advantages and disadvantages of event bubbling and event capturing.


(1) Bubble-type events: Events are triggered in order from the most specific event target to the least specific event target (document object).

IE 5.5: p -> body -> document

IE 6.0: p -> body -> html -> document Mozilla 1.0: p -> body -> html -> document -> window (2) Capturing event (event capturing): The event is triggered starting from the least precise object (document object), and then to Most accurate (events can also be captured at the window level, but this must be specifically specified by the developer).

(3) DOM event flow: supports two event models at the same time: capturing events and bubbling events, but the capturing events occur first. Both event streams will touch all objects in the DOM, starting from the document object and ending with the document object.

The most unique property of the DOM event model is that text nodes also trigger events (not in IE).

Typical example of event bubbling

The idea of ​​bubbling is to listen for events on ancestor nodes and combine event.target/event.srcElement to achieve the final effect. The effect is equivalent to the following code:

封装的兼容方法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;
    }
}

Stop event bubbling

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/imghwm/default1.png"  data-src="star.gif"  class="lazy"   title="很烂" / alt="Advanced supplement for js dom events" >
  <img  src="/static/imghwm/default1.png"  data-src="star.gif"  class="lazy"   title="一般" / alt="Advanced supplement for js dom events" >
  <img  src="/static/imghwm/default1.png"  data-src="star.gif"  class="lazy"   title="还好" / alt="Advanced supplement for js dom events" >
  <img  src="/static/imghwm/default1.png"  data-src="star.gif"  class="lazy"   title="较好" / alt="Advanced supplement for js dom events" >
  <img  src="/static/imghwm/default1.png"  data-src="star.gif"  class="lazy"   title="很好" / alt="Advanced supplement for js dom events" >
 </p>
 // 五心好评的例子，不用给img添加，直接给父元素加

停止事件冒泡

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

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

相关推荐：

jquery之dom学习

原生js 操作dom

jQuery操作DOM的方法

The above is the detailed content of Advanced supplement for js dom events. For more information, please follow other related articles on the PHP Chinese website!