ホームページ > 記事 > ウェブフロントエンド > 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(){}); ie9 以降のブラウザでサポートされています。
注: タイプ名に追加しないでください
注: タイプ名に追加しないでください
イベントの削除方法 addEventListenerの追加方法 削除にはremoveEventListenerを使用します
第二引数の書き方に注意
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 を通じて追加されたイベントの場合、3 番目のパラメーターはイベントのバブリングを示す false です。デフォルトはfalseです
box1.addEventListener("click",function(){alert(1)},false)イベントキャプチャはイベント配信の方法です
イベントキャプチャの実行方法は外側から内側へ(バブリングの逆)です。
addEventListener を通じて追加されたイベント。3 番目のパラメーターは 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
属性と同じ機能を持ちます (マスターする必要があります) Event object.type は、イベントの種類を示しますon は追加されないことに注意してください
ページのパッケージ thisがdom要素そのものを指す
obj.addEventListener(type, fn, false);
obj.attachEvent('on' + type, fn);これはウィンドウ
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; } }
イベントバブリングの典型的な例
バブリングのアイデアは、祖先ノードでイベントをリッスンし、event.target/event.srcElement を組み合わせて最終的な効果を実現することです。その効果は次のコードと同等です。
イベントのバブリングを停止
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="star.gif" title="很烂" / alt="js dom イベントの高度な補足" > <img src="star.gif" title="一般" / alt="js dom イベントの高度な補足" > <img src="star.gif" title="还好" / alt="js dom イベントの高度な補足" > <img src="star.gif" title="较好" / alt="js dom イベントの高度な補足" > <img src="star.gif" title="很好" / alt="js dom イベントの高度な補足" > </p> // 五心好评的例子,不用给img添加,直接给父元素加
停止事件冒泡
event.stopPropagation(); // 阻止事件冒泡return false;既能阻止默认事件又能 阻止事件冒泡
当用户名为空时,单击“提交”按钮,会出现提示,并且表单不能提交。只有在用户名里输入内容后,才能提交表单。可见,preventDefault()方法能阻止表单的提交行为。
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
在表单的例子中,可以把 event.preventDefault(); 改写为: return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为: return false;
相关推荐:
以上がjs dom イベントの高度な補足の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。